使用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 @ 2024-12-20 09:01  王铁柱6  阅读(105)  评论(0)    收藏  举报