论坛 › 马黑黑教程专版 › css-doodle：使用offset-path路径

马黑黑 发表于 2023-5-19 22:03

css-doodle：使用offset-path路径

<style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box;         overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>

<div class="papa">
        <p>以下代码极其简单：仅一个css-doodle单元格，鲸鱼形状，用 :after 做眼睛。鲸鱼做曲线运动，实现的核心在 offset-path 和 offset-distance 属性的相关设置，是这两个属性令鲸鱼做不规则运动：</p>
        <div class="mama">
                <pre class="hCode">&lt;css-doodle grid="1" click-to-update&gt;
        :doodle { @size: 600px 200px; }
        @size: 100px;
        @shape: whale;
        background: rgb(50,100,200);
        cursor: pointer;
        :after {
                content: '';
                position: absolute;
                right: 10px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: radial-gradient(black,snow);
        }
        offset-path: path('M80 80 Q 100 10, 145 80 T 500 60');
        animation: move 6s forwards;
        @keyframes move { to { offset-distance: 100%; } }
&lt;/css-doodle&gt;</pre>
                <pre class="hLineNum"></pre>
        </div>
        <p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
        <div class="stage"></div>
        <p>点击鲸鱼，它会从头开始执行关键帧动画。</p>
</div>

<script>

let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);

let btns = document.querySelectorAll('.btnok'),
        stages = document.querySelectorAll('.stage'),
        hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum'),
        mamas = document.querySelectorAll('.mama');

btns.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
        mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
        item.onclick = () => {
                let val = item.value;
                stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
                item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
        }
});

</script>

小辣椒 发表于 2023-5-19 22:14

太神奇了{:4_199:}

红影 发表于 2023-5-19 22:40

给鲸鱼画了个眼睛，好看。offset-path怎么画的又忘得差不多了，看到Q是二次贝塞尔曲线吧{:4_173:}

马黑黑 发表于 2023-5-22 11:52

小辣椒 发表于 2023-5-19 22:14
太神奇了

你若能懂得原理，就没什么神奇的

马黑黑 发表于 2023-5-22 11:52

红影 发表于 2023-5-19 22:40
给鲸鱼画了个眼睛，好看。offset-path怎么画的又忘得差不多了，看到Q是二次贝塞尔曲线吧

西瓜芝麻问题又来了{:4_170:}

红影 发表于 2023-5-22 19:02

马黑黑 发表于 2023-5-22 11:52
西瓜芝麻问题又来了

然后，我顺势赶紧去复习了一下啊{:4_173:}

马黑黑 发表于 2023-5-22 20:23

红影 发表于 2023-5-22 19:02
然后，我顺势赶紧去复习了一下啊

下回还会忘记

红影 发表于 2023-5-22 21:24

马黑黑 发表于 2023-5-22 20:23
下回还会忘记

忘记了再复习呗{:4_173:}

马黑黑 发表于 2023-5-22 23:04

红影 发表于 2023-5-22 21:24
忘记了再复习呗

反反复复，迷迷糊糊，与仙一模一样

红影 发表于 2023-5-23 10:26

马黑黑 发表于 2023-5-22 23:04
反反复复，迷迷糊糊，与仙一模一样

我那个风筝就是用了你这个里面的路径方式。
多忘几次还能成仙，真不错啊{:4_189:}

马黑黑 发表于 2023-5-23 12:08

红影 发表于 2023-5-23 10:26
我那个风筝就是用了你这个里面的路径方式。
多忘几次还能成仙，真不错啊

没错

红影 发表于 2023-5-23 17:10

马黑黑 发表于 2023-5-23 12:08
没错

那我赶快祈求成仙吧{:4_189:}

马黑黑 发表于 2023-5-23 19:22

红影 发表于 2023-5-23 17:10
那我赶快祈求成仙吧

必须的

红影 发表于 2023-5-23 20:03

马黑黑 发表于 2023-5-23 19:22
必须的

学了忘忘了再学{:4_173:}

马黑黑 发表于 2023-5-23 20:46

红影 发表于 2023-5-23 20:03
学了忘忘了再学

反反复复乐此不疲

红影 发表于 2023-5-23 22:22

马黑黑 发表于 2023-5-23 20:46
反反复复乐此不疲

刚才又去试个鱼的帖子，争取复习过后记住路径的相关知识{:4_173:}

马黑黑 发表于 2023-5-23 23:36

红影 发表于 2023-5-23 22:22
刚才又去试个鱼的帖子，争取复习过后记住路径的相关知识

路径难度有些大，要多复习才能真正掌握。我再我的网站再整理一下 svg path

红影 发表于 2023-5-24 16:27

马黑黑 发表于 2023-5-23 23:36
路径难度有些大，要多复习才能真正掌握。我再我的网站再整理一下 svg path

嗯嗯，我去看看。。。

马黑黑 发表于 2023-5-24 19:16

红影 发表于 2023-5-24 16:27
嗯嗯，我去看看。。。

谢谢关注。我会慢慢把 d 属性弄全

红影 发表于 2023-5-24 19:38

马黑黑 发表于 2023-5-24 19:16
谢谢关注。我会慢慢把 d 属性弄全

跑去看了看，也没找到啊{:4_189:}

查看完整版本: css-doodle：使用offset-path路径