这片叶子送给羽羽吧

马黑黑

马黑黑

代码：

<style type="text/css">

.mumBox{
   width: 100%;
   min-height: 400px;
   background: #333;
   position: relative;
}

.leaf {
   position: relative;
   left: calc(50% - 100px);
   top: 5px;
   width: 200px;
   height: 200px;
   border-radius: 10% 100% 10% 100% / 0 100% 0 100%;
   background: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
   transform-origin: 0 0;
   animation: swift 5s ease-in infinite;
}

.leaf::before, .leaf::after { content: ''; position: absolute; }

.leaf::before {
   width: 30px;
   height: 8px;
   background: olive;
   opacity: .75;
   border-radius: 1px;
   left: -25px;
   top: -5px;
   transform: rotate(15deg);
}

.leaf::after {
   width: 25px;
   height: 20px;
   border-radius: 50%;
   background: #eee;
   opacity: 0.4;
   left: 25%;
   top: 25%;
   animation: bigger 5s linear infinite;
}
@keyframes bigger {
   0% { left: -10px;top: -10px; width: 10px; height: 8px; opacity: .1; }
   10% { left: 25%;top: 25%; width: 10px; height: 15px;  opacity: .2 }
   20% { left: 65%; top: 64%; width: 20px; height: 20px;  opacity: .3 }
   30% { left: 65%; top: 64%; width: 30px; height: 35px;  opacity: .4 }
   40% { left: 65%; top: 64%; width: 35px; height: 38px;  opacity: .4 }
   50% { left: 65%; top: 64%; width: 40px; height: 48px;  opacity: .4 }
   60% { left: 65%; top: 64%; width: 45px; height: 50px;  opacity: .4 }
   70% { left: 70%; top: 70%; width: 50px; height: 45px;  opacity: .3 }
   80% { left: 70%; top: 70%; width: 45px; height: 55px;  opacity: .2 }
   90% { left: 70%; top: 80%; width: 50px; height: 50px;  opacity: .1 }
   100% { left: 70%; top: 80%; width: 50px; height: 60px;  opacity: 0 }
}

@keyframes swift {
   to { transform: rotate(5deg); }
}
</style>

<div class="mumBox">
   <div class="leaf"></div>
</div>

马黑黑

下面酱紫的效果也很不错：

1. <style type="text/css">
   
2. 
   
3. .mumBox{
   
4.         width: 100%;
   
5.         min-height: 400px;
   
6.         background: #333;
   
7.         position: relative;
   
8. }
   
9. 
   
10. .leaf {
    
11.         position: relative;
    
12.         left: calc(50% - 100px);
    
13.         top: 5px;
    
14.         width: 200px;
    
15.         height: 200px;
    
16.         border-radius: 10% 100% 10% 100% / 0 100% 0 100%;
    
17.         background: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
    
18.         transform-origin: 0 0;
    
19.         animation: swift 2s ease-in infinite;
    
20. }
    
21. 
    
22. .leaf::before, .leaf::after { content: ''; position: absolute; }
    
23. 
    
24. .leaf::before {
    
25.         width: 30px;
    
26.         height: 8px;
    
27.         background: olive;
    
28.         opacity: .75;
    
29.         border-radius: 1px;
    
30.         left: -25px;
    
31.         top: -5px;
    
32.         transform: rotate(15deg);
    
33. }
    
34. 
    
35. .leaf::after {
    
36.         width: 25px;
    
37.         height: 20px;
    
38.         border-radius: 50%;
    
39.         background: #eee;
    
40.         opacity: 0.4;
    
41.         left: 25%;
    
42.         top: 25%;
    
43.         animation: bigger 2s ease-in-out infinite;
    
44. }
    
45. @keyframes bigger {
    
46.         from { left: -10px; top: -10px; width: 8px; height: 8px; }
    
47.         to { left: 80%; top: 80%; width: 40px; height: 45px; }
    
48. }
    
49. 
    
50. @keyframes swift {
    
51.         to { transform: rotate(5deg); }
    
52. }
    
53. </style>
    
54. 
    
55. <div class="mumBox">
    
56.         <div class="leaf"></div>
    
57. </div>

复制代码

加林森

@千羽  这下又够千羽玩的了。收礼开心~~~~~~~~~~

马黑黑

加林森 发表于 2022-3-29 12:39
这下又够千羽玩的了。

加林森

马黑黑 发表于 2022-3-29 13:16

老黑中午不休息吗？

红影

这片叶子上还有水珠滴落呢，太美了

红影

马黑黑 发表于 2022-3-29 12:32
下面酱紫的效果也很不错：

这个又是什么样子的呢，我来放到帖子里看一看

红影

红影

原来是水珠不同的运动方式，效果差不多，后者却简单了很多

来看你

叶子上还有会动的光点

千羽快来收礼，春天的叶子

马黑黑

来看你 发表于 2022-3-29 15:56
叶子上还有会动的光点

千羽快来收礼，春天的叶子

不是水珠吗

马黑黑

红影 发表于 2022-3-29 15:42
这个又是什么样子的呢，我来放到帖子里看一看

末尾部分我处理的不太好

马黑黑

红影 发表于 2022-3-29 15:51
原来是水珠不同的运动方式，效果差不多，后者却简单了很多

对，还是简单的好

马黑黑

加林森 发表于 2022-3-29 13:17
老黑中午不休息吗？

休息的，比任正非老总多休息40分钟

加林森

马黑黑 发表于 2022-3-29 18:16
休息的，比任正非老总多休息40分钟

那就很幸福了嘛

马黑黑

加林森 发表于 2022-3-29 18:17
那就很幸福了嘛

必须的

加林森

马黑黑 发表于 2022-3-29 18:23
必须的

是的是的

千羽

来收礼啦

千羽

很有趣的精致礼物，谢谢黑黑老师