叶子和七星瓢虫

马黑黑

马黑黑

代码：

1. <style>
   
2. .leaf {
   
3.         margin: auto;
   
4.         margin-top: 100px;
   
5.         width: 200px;
   
6.         height: 200px;
   
7.         background: linear-gradient(-45deg,lightgreen,darkgreen,green);
   
8.         border-radius: 100% 0;
   
9.         overflow: hidden;
   
10.         transform: scale(1.2);
    
11.         position: relative;
    
12. }
    
13. .pic {
    
14.         position: absolute;
    
15.         width: 30px;
    
16.         top: 0;
    
17.         left: 0;
    
18.         transform: rotate(90deg) skew(-5deg);
    
19.         offset-path: path('M0,200 L200,0');
    
20.         offset-distance: 0;
    
21.         animation: move 10s linear infinite, skew .2s linear infinite alternate;
    
22. }
    
23. @keyframes move { to { offset-distance: 100%; } }
    
24. @keyframes skew { to { transform: rotate(90deg) skew(5deg); } }
    
25. </style>
    
26. 
    
27. <div class="leaf">
    
28.         <img class="pic" src="https://638183.freep.cn/638183/t23/bug/ladybug01.webp" alt="" />
    
29. </div>

复制代码

南无月

太逼真了，代码画的动画，十分好看

马黑黑

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

逼真还谈不上的

红影

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

马黑黑

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

还好的吧

南无月

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

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

马黑黑

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

不太像的

南无月

马黑黑 发表于 2024-5-25 19:29
不太像的

要求有点高啊，总不能整得跟工笔画似 的

马黑黑

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

写实的要得

南无月

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

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

马黑黑

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

信心没啥用

红影

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

叶子也是代码叶，这个真漂亮

马黑黑

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

南无月

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

没用才好用

马黑黑

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

好用多用用

南无月

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

好用的要搁着等爱用的时候才用用。

马黑黑

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

也行

红影

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

小瓢虫走起来一点不疲倦

马黑黑

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

永动