CSS：花苞落水起涟漪

马黑黑 · 发表于 2022-3-31 07:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-3-31 07:53

代码:

<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>

马黑黑 · 发表于 2022-3-31 08:06

本帖最后由马黑黑于 2022-3-31 08:08 编辑

一、涟漪的模拟

① 主窗体伪元素40*40，圆形，背景透明，边框1px 加外边框 1px 做双圆圈，二者间距20px。
② 用 transform(scale(2, 1.2)) 令伪元素大小放大，不要太圆，所以sy半径值不同；
③ 不透明度 opacity 从 0 到 .1，不可见到可见，.1可以改大一点点。

二、两个动画的配合

两个动画都没有分步，我的设想是通过另一个动画的延时来达到花苞落到“水面”时涟漪泛起。涟漪的动画设计是单一的两种状态的变化，比方说可见与不可见，那么，理论上它的延时可以是另一个动画周期时长的一半。注意，两个动画周期时长是一样的。

效果可能存在细微误差，可以进一步调节直到达到目的为止。另，CSS模拟的效果通常难以逼真，差不多就行了，不死磕。