使用css写一个水滴下落的动画

创建一个水滴下落的动画可以通过多种方法实现,下面是一个简单的例子,使用CSS的关键帧动画(@keyframes)来模拟水滴下落的效果:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水滴下落动画</title>
<style>
  .water-drop {
    position: relative;
    width: 50px;
    height: 70px;
    background: #0F4C81;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    animation: dropFall 2s infinite; /* 动画名称,持续时间,循环次数 */
  }

  @keyframes dropFall {
    0% {
      top: 0;
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      top: 300px; /* 下落距离 */
      opacity: 0; /* 透明度变为0,模拟水滴消失 */
      transform: scale(0.5); /* 水滴在底部时缩小 */
    }
  }
</style>
</head>
<body>
  <div class="water-drop"></div>
</body>
</html>

这个例子中,.water-drop 类定义了一个水滴的形状和动画。@keyframes dropFall 定义了动画的关键帧,从水滴的起始位置(top: 0)下落到底部(top: 300px),并且在底部时缩小并变为透明。

你可以根据需要调整水滴的形状、颜色、下落距离、动画持续时间等属性。此外,为了更逼真的效果,你还可以添加更多的细节,比如水滴下落时的晃动效果。

posted @   王铁柱6  阅读(16)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示