马黑黑 发表于 2024-5-25 10:24

叶子和七星瓢虫

<style>
.leaf {
        margin: auto;
        margin-top: 100px;
        width: 200px;
        height: 200px;
        background: linear-gradient(-45deg,lightgreen,darkgreen,green);
        border-radius: 100% 0;
        overflow: hidden;
        transform: scale(1.2);
        position: relative;
}
.pic {
        position: absolute;
        width: 30px;
        top: 0;
        left: 0;
        transform: rotate(90deg) skew(-5deg);
        offset-path: path('M0,200 L200,0');
        offset-distance: 0;
        animation: move 10s linear infinite, skew .2s linear infinite alternate;
}
@keyframes move { to { offset-distance: 100%; } }
@keyframes skew { to { transform: rotate(90deg) skew(5deg); } }
</style>

<div class="leaf">
        <img class="pic" src="https://638183.freep.cn/638183/t23/bug/ladybug01.webp" alt="" />
</div>

马黑黑 发表于 2024-5-25 10:25

代码：
<style>
.leaf {
        margin: auto;
        margin-top: 100px;
        width: 200px;
        height: 200px;
        background: linear-gradient(-45deg,lightgreen,darkgreen,green);
        border-radius: 100% 0;
        overflow: hidden;
        transform: scale(1.2);
        position: relative;
}
.pic {
        position: absolute;
        width: 30px;
        top: 0;
        left: 0;
        transform: rotate(90deg) skew(-5deg);
        offset-path: path('M0,200 L200,0');
        offset-distance: 0;
        animation: move 10s linear infinite, skew .2s linear infinite alternate;
}
@keyframes move { to { offset-distance: 100%; } }
@keyframes skew { to { transform: rotate(90deg) skew(5deg); } }
</style>

<div class="leaf">
        <img class="pic" src="https://638183.freep.cn/638183/t23/bug/ladybug01.webp" alt="" />
</div>

南无月 发表于 2024-5-25 10:59

太逼真了，代码画的动画，十分好看{:4_187:}

马黑黑 发表于 2024-5-25 11:11

南无月 发表于 2024-5-25 10:59
太逼真了，代码画的动画，十分好看

逼真还谈不上的

红影 发表于 2024-5-25 13:34

这个漂亮，把静态的小瓢虫变成了活泼的行走小瓢虫呢{:4_199:}

马黑黑 发表于 2024-5-25 17:25

红影 发表于 2024-5-25 13:34
这个漂亮，把静态的小瓢虫变成了活泼的行走小瓢虫呢

还好的吧

南无月 发表于 2024-5-25 19:27

马黑黑 发表于 2024-5-25 11:11
逼真还谈不上的

这个线性渐变把叶梗都整出来了，只用几行代码很强大

马黑黑 发表于 2024-5-25 19:29

南无月 发表于 2024-5-25 19:27
这个线性渐变把叶梗都整出来了，只用几行代码很强大

不太像的

南无月 发表于 2024-5-25 19:57

马黑黑 发表于 2024-5-25 19:29
不太像的
要求有点高啊，总不能整得跟工笔画似 的

马黑黑 发表于 2024-5-25 20:56

南无月 发表于 2024-5-25 19:57
要求有点高啊，总不能整得跟工笔画似 的

写实的要得

南无月 发表于 2024-5-25 21:07

马黑黑 发表于 2024-5-25 20:56
写实的要得

我感觉有想法就能实现它，反正我对你充满了信心{:4_199:}

马黑黑 发表于 2024-5-25 22:24

南无月 发表于 2024-5-25 21:07
我感觉有想法就能实现它，反正我对你充满了信心

信心没啥用

红影 发表于 2024-5-26 08:50

马黑黑 发表于 2024-5-25 17:25
还好的吧

叶子也是代码叶，这个真漂亮{:4_199:}

马黑黑 发表于 2024-5-26 09:56

红影 发表于 2024-5-26 08:50
叶子也是代码叶，这个真漂亮

{:4_190:}

南无月 发表于 2024-5-26 15:25

马黑黑 发表于 2024-5-25 22:24
信心没啥用

{:4_170:}没用才好用

马黑黑 发表于 2024-5-26 18:00

南无月 发表于 2024-5-26 15:25
没用才好用

好用多用用

南无月 发表于 2024-5-26 21:19

马黑黑 发表于 2024-5-26 18:00
好用多用用

好用的要搁着等爱用的时候才用用。{:4_170:}

马黑黑 发表于 2024-5-26 21:40

南无月 发表于 2024-5-26 21:19
好用的要搁着等爱用的时候才用用。

也行

红影 发表于 2024-5-26 21:42

马黑黑 发表于 2024-5-26 09:56


小瓢虫走起来一点不疲倦{:4_173:}

马黑黑 发表于 2024-5-26 21:43

红影 发表于 2024-5-26 21:42
小瓢虫走起来一点不疲倦

永动
页: [1] 2 3
查看完整版本: 叶子和七星瓢虫