花落水家
<style>.stage {
margin: auto;
position: relative;
max-width: 600px;
min-height: 400px;
background: linear-gradient(olive, gray, blue);
}
.stage::after {
content: '';
width: 40px;
height: 40px;
background: transparent;
border: 1px solid #eee;
box-shadow: 0px 0px 4px #eee inset, 0 0 6px blue;
border-radius: 50%;
position: absolute;
left: calc(50% - 20px);
top: 300px;
opacity: 0;
animation: circle 1.5s 1.5s 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.1; }
100% { transform: scale(3, 1.2); opacity: 0; }
}
</style>
<div class="stage">
<div class="wdrop"></div>
</div>
本帖最后由 马黑黑 于 2022-3-31 12:56 编辑 <br /><br /><p>原创代码分享：</p>
<pre style="font-size: 12px;">
<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;'>max-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: red;'>.<span style='color: blue;'>stage</span>:<span style='color: blue;'></span>:after </span>{
<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;'>border-radius</span>: 50%;
<span style='color: blue;'>box-shadow</span>: 0px 0px 4px #eee inset, 0 0 6px blue;
<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 1.5s 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>: 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>{
0% { <span style='color: blue;'>top</span>: -20px; }
100% { <span style='color: blue;'>top</span>: 300px; }
}
<span style='color: red;'>@keyframes circle </span>{
0% { <span style='color: blue;'>opacity</span>: 0.1; }
100% { <span style='color: blue;'>transform</span>: scale(3, 1.2); <span style='color: blue;'>opacity</span>: 0; }
}
</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>
知道黑黑的二楼一般是用来放代码的，前面都没敢回帖{:4_173:} 现在这个涟漪好美，水滴也很漂亮{:4_187:} 一些说明：
原来在我的地儿发了个效果相近的帖子，这个是改进版，效果似乎更好。
本帖涟漪动画实现原理：
其一，涟漪形状的构成：涟漪所依托的div盒子初始时设为圆形、背景透明（transparent）、边框1像素接近白色。
其二，涟漪动画的设计：从盒子的不透明度 opacity 的 0.1 过渡到 0，盒子大小从 原始状态 过渡到 扩大xy值为{3, 1.2)，令其过渡过程呈椭圆状。
两个动画的配合：
花苞落下与涟漪泛起运行周期时长相同，涟漪推迟一个动画运行周期时长的时间在运行，这样看上去两个动画的衔接好像没多大时差。
我地儿上的帖子，实现机制与这里有所不同，两者的效果也不尽一样。 忘了说明一点：
这里没有弄双环涟漪，原因是 outline 属性不是最先进的浏览器总是呈现为方框。本帖放弃双环涟漪，用的是单环，辅之以 box-shadow 营造内外模糊阴影进一步修饰涟漪形状。下面的句子可以进一步完善或丰富：
box-shadow: 0px 0px 4px #eee inset, 0 0 6px blue; 红影 发表于 2022-3-31 12:39
现在这个涟漪好美，水滴也很漂亮
水滴难道不更像花苞吗{:4_170:} 红影 发表于 2022-3-31 12:38
知道黑黑的二楼一般是用来放代码的，前面都没敢回帖
{:5_108:} 制作得真漂亮，回来再研究。 马黑黑 发表于 2022-3-31 12:46
水滴难道不更像花苞吗
不像{:4_173:} 马黑黑 发表于 2022-3-31 12:40
一些说明：
原来在我的地儿发了个效果相近的帖子，这个是改进版，效果似乎更好。
记得那个牛顿摆也有个时间延迟。animation: circle 1.5s 1.5s linear infinite;这里两个1.5是什么？ 红影 发表于 2022-3-31 17:16
记得那个牛顿摆也有个时间延迟。animation: circle 1.5s 1.5s linear infinite;这里两个1.5是什么？
第二个 1.5s 是延时 红影 发表于 2022-3-31 16:42
不像
{:4_203:} 马黑黑 发表于 2022-3-31 18:57
第二个 1.5s 是延时
哦 哦，，延时原来是这个里面实现的。 马黑黑 发表于 2022-3-31 18:57
很想拿这几天黑黑分享的做个帖子，只是这两天事有点多。空了一定玩玩{:4_187:} 红影 发表于 2022-3-31 22:04
很想拿这几天黑黑分享的做个帖子，只是这两天事有点多。空了一定玩玩
应该已有创意了 红影 发表于 2022-3-31 22:02
哦 哦，，延时原来是这个里面实现的。
延时放在animation里 马黑黑 发表于 2022-3-31 23:04
应该已有创意了
还没有想好怎么做呢，还是做个了气球{:4_173:} 马黑黑 发表于 2022-3-31 23:05
延时放在animation里
真不错，在黑黑这里总能学到很多招数{:4_187:} 红影 发表于 2022-4-2 10:19
还没有想好怎么做呢，还是做个了气球
气球大家都喜欢