CSS：花苞落水起涟漪
<style>.stage {
margin: auto;
position: relative;
width: 600px;
min-height: 400px;
background: linear-gradient(olive, gray, blue);
}
.stage::after {
content: '';
width: 40px;
height: 40px;
background: transparent;
border: 1px solid #eee;
outline: 1px solid #eee;
outline-offset: 20px;
border-radius: 50%;
position: absolute;
left: calc(50% - 20px);
top: 300px;
opacity: 0;
animation: circle 1.5s 0.75s linear infinite;
}
.wdrop {
position: absolute;
left: calc(50% - 10px);
top: -20px;
width: 20px;
height: 20px;
border-radius: 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
transform: rotate(-45deg);
background-image: linear-gradient(45deg, #32c415 0%, #f09 100%);
animation: drop 1.5s ease-in infinite;
}
@keyframes drop{
0% { top: -20px; }
100% { top: 300px; }
}
@keyframes circle {
0% { opacity: 0; }
100% { transform: scale(2, 1.2); opacity: .1; }
}
</style>
<div class="stage">
<div class="wdrop"></div>
</div>
<p>代码: <br><br></p>
<pre style="font-size: 13px; padding: 10px; border: 1px solid; border-color: deeppink olive magenta navy;"><style>
<span style="color: red;">.stage </span>{
<span style="color: blue;"> margin</span>: auto;
<span style="color: blue;"> position</span>: relative;
<span style="color: blue;"> width</span>: 600px;
<span style="color: blue;"> min-height</span>: 400px;
<span style="color: blue;"> background</span>: linear-gradient(olive, gray, blue);
}
<span style="color: blue;">.stage</span>::after {
<span style="color: blue;"> content</span>: <span style="color: magenta">''</span>;
<span style="color: blue;"> width</span>: 40px;
<span style="color: blue;"> height</span>: 40px;
<span style="color: blue;"> background</span>: transparent;
<span style="color: blue;"> border</span>: 1px solid #eee;
<span style="color: blue;"> outline</span>: 1px solid #eee;
<span style="color: blue;"> outline-offset</span>: 20px;
<span style="color: blue;"> border-radius</span>: 50%;
<span style="color: blue;"> position</span>: absolute;
<span style="color: blue;"> left</span>: calc(50% - 20px);
<span style="color: blue;"> top</span>: 300px;
<span style="color: blue;"> opacity</span>: 0;
<span style="color: blue;"> animation</span>: circle 1.5s 0.75s linear infinite;
}
<span style="color: red;">.wdrop </span>{
<span style="color: blue;"> position</span>: absolute;
<span style="color: blue;"> left</span>: calc(50% - 10px);
<span style="color: blue;"> top</span>: -20px;
<span style="color: blue;"> width</span>: 20px;
<span style="color: blue;"> height</span>: 20px;
<span style="color: blue;"> border-radius</span>: 50%;
<span style="color: blue;"> border-radius</span>: 80% 0 55% 50% / 55% 0 80% 50%;
<span style="color: blue;"> transform</span>: rotate(-45deg);
<span style="color: blue;"> background-image</span>: linear-gradient(45deg, #32c415 0%, #f09 100%);
<span style="color: blue;"> animation</span>: drop 1.5s ease-in infinite;
}
<span style="color: red;">@keyframes drop</span>{
<span style="color: blue;"> 0% { top</span>: -20px; }
<span style="color: blue;"> 100% { top</span>: 300px; }
}
<span style="color: red;">@keyframes circle </span>{
<span style="color: blue;"> 0% { opacity</span>: 0; }
<span style="color: blue;"> 100% { transform</span>: scale(2, 1.2); <span style="color: blue;">opacity</span>: .1; }
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"stage"</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"wdrop"</span>><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
</pre>
本帖最后由 马黑黑 于 2022-3-31 08:08 编辑
一、涟漪的模拟
① 主窗体伪元素40*40，圆形，背景透明，边框1px 加 外边框 1px 做双圆圈，二者间距20px。
② 用 transform(scale(2, 1.2)) 令伪元素大小放大，不要太圆，所以sy半径值不同；
③ 不透明度 opacity 从 0 到 .1，不可见到可见，.1可以改大一点点。
二、两个动画的配合
两个动画都没有分步，我的设想是通过另一个动画的延时来达到花苞落到“水面”时涟漪泛起。涟漪的动画设计是单一的两种状态的变化，比方说可见与不可见，那么，理论上它的延时可以是另一个动画周期时长的一半。注意，两个动画周期时长是一样的。
效果可能存在细微误差，可以进一步调节直到达到目的为止。另，CSS模拟的效果通常难以逼真，差不多就行了，不死磕。 来学习 真漂亮，黑黑辛苦了{:4_187:} 为什么涟漪外面的圈我这里看着是方的？ 红影 发表于 2022-3-31 10:07
为什么涟漪外面的圈我这里看着是方的？
有些浏览器是这样。
outline的形状，在不同的浏览器呈现的外观是不一样的，通常为矩形，但先进的浏览器识别为与 border-radius 属性一致。
不管怎么说，outline不太合适涟漪使用，因为涟漪不是方的，而有的浏览器没能将 border-radius 继承到外边框里 马黑黑 发表于 2022-3-31 12:18
有些浏览器是这样。
outline的形状，在不同的浏览器呈现的外观是不一样的，通常为矩形，但先进的浏览 ...
嗯嗯，应该是我的浏览器的问题。 红影 发表于 2022-3-31 13:30
嗯嗯，应该是我的浏览器的问题。
目前也没几个浏览器不是方的 马黑黑 发表于 2022-3-31 13:31
目前也没几个浏览器不是方的
滴落还有气球都很漂亮，空了都能用来做帖子玩呢{:4_187:} 红影 发表于 2022-3-31 20:27
滴落还有气球都很漂亮，空了都能用来做帖子玩呢
哦，那就不能用outline 马黑黑 发表于 2022-3-31 20:48
哦，那就不能用outline
这句没看懂呢{:4_173:} 红影 发表于 2022-3-31 22:18
这句没看懂呢
就是外边框，以前介绍过的 马黑黑 发表于 2022-3-31 23:02
就是外边框，以前介绍过的
哦哦，对的，只把效果搬过去就行了，外边框就不用了。 红影 发表于 2022-4-1 23:48
哦哦，对的，只把效果搬过去就行了，外边框就不用了。
嗯嗯，就这么办吧 马黑黑 发表于 2022-4-2 08:06
嗯嗯，就这么办吧
这两天反正闲着，我找个图图试试{:4_173:} 红影 发表于 2022-4-2 12:40
这两天反正闲着，我找个图图试试
( ^_^ )不错嘛 马黑黑 发表于 2022-4-2 12:48
( ^_^ )不错嘛
还没去找了啊{:4_173:} 红影 发表于 2022-4-2 13:54
还没去找了啊
不急慢慢来 马黑黑 发表于 2022-4-2 16:07
不急慢慢来
总觉得在比较大的图里，这个涟漪可能看不出来呢。