花落水家

马黑黑

马黑黑

原创代码分享：

<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;
   border-radius: 50%;
   box-shadow: 0px 0px 4px #eee inset, 0 0 6px blue;
   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: 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>

红影

知道黑黑的二楼一般是用来放代码的，前面都没敢回帖

红影

现在这个涟漪好美，水滴也很漂亮

马黑黑

一些说明：

原来在我的地儿发了个效果相近的帖子，这个是改进版，效果似乎更好。

本帖涟漪动画实现原理：

其一，涟漪形状的构成：涟漪所依托的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
现在这个涟漪好美，水滴也很漂亮

水滴难道不更像花苞吗

马黑黑

红影 发表于 2022-3-31 12:38
知道黑黑的二楼一般是用来放代码的，前面都没敢回帖

加林森

制作得真漂亮，回来再研究。

红影

马黑黑 发表于 2022-3-31 12:46
水滴难道不更像花苞吗

不像

红影

马黑黑 发表于 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
不像

红影

马黑黑 发表于 2022-3-31 18:57
第二个 1.5s 是延时

哦 哦，，延时原来是这个里面实现的。

红影

马黑黑 发表于 2022-3-31 18:57

很想拿这几天黑黑分享的做个帖子，只是这两天事有点多。空了一定玩玩

马黑黑

红影 发表于 2022-3-31 22:04
很想拿这几天黑黑分享的做个帖子，只是这两天事有点多。空了一定玩玩

应该已有创意了

马黑黑

红影 发表于 2022-3-31 22:02
哦 哦，，延时原来是这个里面实现的。

延时放在animation里

红影

马黑黑 发表于 2022-3-31 23:04
应该已有创意了

还没有想好怎么做呢，还是做个了气球

红影

马黑黑 发表于 2022-3-31 23:05
延时放在animation里

真不错，在黑黑这里总能学到很多招数

马黑黑

红影 发表于 2022-4-2 10:19
还没有想好怎么做呢，还是做个了气球

气球大家都喜欢