css-水滴

最新推荐文章于 2025-05-25 13:54:04 发布

Mr.王征

最新推荐文章于 2025-05-25 13:54:04 发布

阅读量584

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css3 css html5

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/117519278

CSS 专栏收录该内容

32 篇文章

订阅专栏

最近好久没有没有更新博客了，小伙伴们好久不见，今天看到一个比较有意思的动画所以研究了一下，就依然老王用css简单的实现了一把，话不多说开始干

样式效果：

动态样式

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小水滴效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .border{
            width: 500px;
            height: 500px;
            margin:  auto;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgb(5,5,5);
            filter: contrast(30);
        }
        .droplet{
           position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            filter: blur(20px);
            animation: fall 3s linear infinite;
            opacity: 0;
        }
        /*第2和和第3个水滴延迟时间后再播放动画 */
        .border div:nth-of-type(2){
            animation-delay: 1.5s;
        }
        .border div:nth-of-type(3){
            animation-delay: 2s;
        }
        /*给水滴设置动画，让它们从上往下落下，期间大小发生变化*/
        @keyframes fall{
            0%{
                opacity: 0;
                transform:  scale(0.8) translateY(-500%);               
            }
            50%{
                opacity: 1;
                transform: scale(0.5) translateY(-100%) ;
            }
            100%{
                   transform: scale(0.3) translateY(0px);
            }
        }
        .borderbottom{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            filter: blur(20px);
            animation: zhuan 3s  infinite;
        }
        /*给显示数字的圆圈动画效果，让它转起来*/
        @keyframes zhuan{
            0%{
              transform: scale(1) rotate(0deg);
            }
            50%{
                transform: scale(1.1) rotate(180deg);
                height: 90px;
                border-top-left-radius: 45%;
                border-bottom-left-radius: 48%;

            }
            100%{
                transform:scale(1) rotate(360deg);
            }
        }
      span{
          position: absolute;
          color: rgb(184, 182, 182);
          font-size: 26px;
          font-weight: bold;
          
      }
    </style>
</head>
<body>
    <div class="border">
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="borderbottom"></div>
      <span>99%</span>
   </div>
</body>
</html>