一个CSS动画实现落体与涟漪
<style type="text/css">.mnDiv {
width: 760px;
height: 500px;
background: linear-gradient(gray,tan,blue);
overflow: hidden;
position: relative;
}
.ball {
--w: 20px;
--h: 20px;
position: absolute;
width: var(--w);
height:var(--h);
left: calc(50% - var(--w) / 2);
background: #eee;
border: 1px solid #eee;
border-radius: 50%;
animation: drop 2s linear infinite;
}
@keyframes drop{
0% { box-shadow: none; background: #eee;top: -10px; opacity: .6; }
58% { box-shadow: none; background: #eee; top: 400px; opacity: .6; }
59% { box-shadow: 0 0 4px #aaa inset, 0 0 4px #333; background: transparent; top: 400px;opacity: 0; transform: scale(1, 1); }
60% {box-shadow: 0 0 4px #aaa inset, 0 0 4px #333; background: transparent; top: 400px;opacity: .1; transform: scale(1.2, 1); }
100% {box-shadow: 0 0 4px #aaa inset, 0 0 4px #333; background: transparent; top: 400px;opacity: 0; transform: scale(7, 5.8); }
}
</style>
<div class="mnDiv">
<div class="ball"></div>
</div>
<p>代码：</p>
<pre style="font-size: 12px;">
<style type=<span style='color: magenta'>"text/css"</span>>
<span style='color: red;'>.mnDiv </span>{
<span style='color: blue;'>width</span>: 760px;
<span style='color: blue;'>height</span>: 500px;
<span style='color: blue;'>background</span>: linear-gradient(gray,tan,blue);
<span style='color: blue;'>overflow</span>: hidden;
<span style='color: blue;'>position</span>: relative;
}
<span style='color: red;'>.ball </span>{
<span style='color: blue;'>--w</span>: 20px;
<span style='color: blue;'>--h</span>: 20px;
<span style='color: blue;'>position</span>: absolute;
<span style='color: blue;'>width</span>: var(--w);
<span style='color: blue;'>height</span>:var(--h);
<span style='color: blue;'>left</span>: calc(50% - var(--w) / 2);
<span style='color: blue;'>background</span>: #eee;
<span style='color: blue;'>border</span>: 1px solid #eee;
<span style='color: blue;'>border-radius</span>: 50%;
<span style='color: blue;'>animation</span>: drop 2s linear infinite;
}
<span style='color: red;'>@keyframes drop</span>{
0% { <span style='color: blue;'>box-shadow</span>: none; <span style='color: blue;'>background</span>: #eee;<span style='color: blue;'>top</span>: -10px; <span style='color: blue;'>opacity</span>: .6; }
58% { <span style='color: blue;'>box-shadow</span>: none; <span style='color: blue;'>background</span>: #eee; <span style='color: blue;'>top</span>: 400px; <span style='color: blue;'>opacity</span>: .6; }
59% { <span style='color: blue;'>box-shadow</span>: 0 0 4px #aaa inset, 0 0 4px #333; <span style='color: blue;'>background</span>: transparent; <span style='color: blue;'>top</span>: 400px;<span style='color: blue;'>opacity</span>: 0; <span style='color: blue;'>transform</span>: scale(1, 1); }
60% {<span style='color: blue;'>box-shadow</span>: 0 0 4px #aaa inset, 0 0 4px #333; <span style='color: blue;'>background</span>: transparent; <span style='color: blue;'>top</span>: 400px;<span style='color: blue;'>opacity</span>: .1; <span style='color: blue;'>transform</span>: scale(1.2, 1); }
100% {<span style='color: blue;'>box-shadow</span>: 0 0 4px #aaa inset, 0 0 4px #333; <span style='color: blue;'>background</span>: transparent; <span style='color: blue;'>top</span>: 400px;<span style='color: blue;'>opacity</span>: 0; <span style='color: blue;'>transform</span>: scale(7, 5.8); }
}
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"mnDiv"</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"ball"</span>><<span style='color: darkred'>/div</span>>
<<span style='color: darkred'>/div</span>>
</pre>
合拍不再是问题，核心在 @keyframes 动画设计上 这个设置得更精细，黑黑真棒{:4_199:} 红影 发表于 2022-3-31 13:57
这个设置得更精细，黑黑真棒
不死磕{:5_117:} 马黑黑 发表于 2022-3-31 13:59
不死磕
这个让我想到夜露滴落，一切都是那么幽静。 红影 发表于 2022-3-31 20:34
这个让我想到夜露滴落，一切都是那么幽静。
嗯嗯，无声版{:5_106:} 马黑黑 发表于 2022-3-31 20:45
嗯嗯，无声版
不是，是这样的动画本身就有静谧的效果。 红影 发表于 2022-3-31 22:15
不是，是这样的动画本身就有静谧的效果。
原来如此 马黑黑 发表于 2022-3-31 23:03
原来如此
要是最帖子里，也最好弄比较静的背景比较好呢。 红影 发表于 2022-4-1 23:51
要是最帖子里，也最好弄比较静的背景比较好呢。
这得好好设计 马黑黑 发表于 2022-4-2 08:04
这得好好设计
是的，最好能突出它的{:4_173:} 红影 发表于 2022-4-2 12:36
是的，最好能突出它的
用你的美图秀秀吧 马黑黑 发表于 2022-4-2 12:37
用你的美图秀秀吧
要找到合适的图图才行呢{:4_173:} 红影 发表于 2022-4-2 13:20
要找到合适的图图才行呢
找找
页:
[1]