CSS仿真水滴

作者：System 时间：2024年08月08日分类：所有,css 字数：1007

CSS中的伪元素和动画可以用来创建水滴的伪真实效果。以下是一个简单的CSS伪真水滴示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Raindrop Simulation</title>
<style>
  .rain {
    position: relative;
    width: 300px;
    height: 100px;
    margin: 50px;
    background-color: #6495ED;
    border-radius: 10px;
    overflow: hidden;
  }
 
  .rain::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #6495ED;
    border-radius: 50%;
    animation: raindrop 5s infinite linear;
  }
 
  @keyframes raindrop {
    0% {
      transform: translateX(-50%) translateY(0);
    }
    100% {
      transform: translateX(-50%) translateY(-100%);
    }
  }
</style>
</head>
<body>
 
<div class="rain"></div>
 
</body>
</html>

这段代码创建了一个.rain类来模拟雨水的下落，使用伪元素::after来表示水滴，并通过@keyframes动画使其从顶部下落到底部。animation属性设置了动画的时长、次数、计时功能和动画的速度曲线。

CSS仿真水滴

评论已关闭

推荐阅读