本帖最后由 千羽 于 2022-3-29 20:00 编辑 <br /><br /><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>
本帖最后由 千羽 于 2022-3-29 19:54 编辑
千羽 发表于 2022-3-29 19:43
.mumBox{
width: 100%;
min-height: 400px;
俺来试试，感觉水珠滚动速度比黑黑老师的快{:4_203:}
马黑黑 发表于 2022-3-29 12:32
下面酱紫的效果也很不错：
<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 2s 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 2s ease-in-out infinite;
}
@keyframes bigger {
from { left: -10px; top: -10px; width: 8px; height: 8px; }
to { left: 80%; top: 80%; width: 40px; height: 45px; }
}
@keyframes swift {
to { transform: rotate(5deg); }
}
</style>
<div class="mumBox">
<div class="leaf"></div>
</div>
加林森 发表于 2022-3-29 12:39
@千羽这下又够千羽玩的了。收礼开心~~~~~~~~~~
问好队长，谢谢{:4_187:}
来看你 发表于 2022-3-29 15:56
叶子上还有会动的光点
千羽快来收礼，春天的叶子
来啦，，问好看看{:4_187:}
马黑黑 发表于 2022-3-29 18:15
末尾部分我处理的不太好
可以有个掉落后渐隐，然后再从头开始{:4_173:}
马黑黑 发表于 2022-3-29 18:15
对，还是简单的好
这个漂亮，又可以想办法用帖子里去了呢{:4_173:}
红影 发表于 2022-3-29 20:16
这个漂亮，又可以想办法用帖子里去了呢
又用上了{:5_117:}
红影 发表于 2022-3-29 20:15
可以有个掉落后渐隐，然后再从头开始
你试试看吧
千羽 发表于 2022-3-29 19:45
.mumBox{
width: 100%;
min-height: 400px;
好玩不
千羽 发表于 2022-3-29 19:42
很有趣的精致礼物，谢谢黑黑老师
{:5_108:}
马黑黑 发表于 2022-3-29 20:45
又用上了
还没想好怎么用呢{:4_173:}
马黑黑 发表于 2022-3-29 20:49
好玩不
新颖，亮色，挺好的{:4_187:}
红影 发表于 2022-3-29 20:50
还没想好怎么用呢
主力想想。如果是 @小辣椒，可能很快{:5_117:}
千羽 发表于 2022-3-29 20:52
新颖，亮色，挺好的
嗯，玩玩防老
红影 发表于 2022-3-29 20:16
这个漂亮，又可以想办法用帖子里去了呢
影子做了我就跟着做，用影子的代码{:4_185:}
马黑黑 发表于 2022-3-29 20:53
嗯，玩玩防老
好的，等影子做出来的{:4_181:}
千羽 发表于 2022-3-29 20:55
好的，等影子做出来的
你先做{:5_146:}
马黑黑 发表于 2022-3-29 20:55
你先做
我不会代码，做不出来{:4_201:}
千羽 发表于 2022-3-29 19:58
问好队长，谢谢
不客气。{:4_204:}