前端纯CSS实现水滴充电效果

八怪iii

已于 2023-05-25 18:29:36 修改

阅读量599

点赞数 1

文章标签：前端 css javascript

于 2023-05-24 17:03:16 首次发布

本文链接：https://blog.csdn.net/gsy445566778899/article/details/130848566

版权

前端用纯css 制作水滴特效充电效果，这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个，用于学习和记录；

实现思路：

1.先定义三个盒子和一个最底层的盒子，还有一个span 用于显示数字；

   <div class="container">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="collection"></div>
        <span>80%</span>
    </div>

2.给大盒子定义基本样式，用弹性布局，这样三个水滴盒子（.drop）会左右上下居中排列；

filter的contrast(number); 调整图像对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

 .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
            flex-direction: column;
            filter: contrast(30);
        }

3.给三个水滴盒子设置绝对定位，让它们重叠在一起；

filter: blur(20px);给水滴盒子设置模糊；

⚠️注意：给水滴盒子和收集的大盒子（ .collection ）设置模糊，然后再给父盒子设置对比度，这样在水滴滴落的过程中，会重新绘制图像，实现类似粘连的效果；

        .drop {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            filter: blur(20px);
            opacity: 0;
            animation: 2.5s drop linear infinite;
        }
        .collection {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            filter: blur(20px);
            animation: 3s colleation linear infinite;
        }

4.其次给水滴添加滴落的动画 drop ,以及收集盒子的动画 colleation ，自己把参数调到看着舒服为止；

      /* 给水滴添加动画延时，避免三个水滴同时掉落 */
        .drop:nth-child(2) {
            animation-delay: .5s;
        }

        .drop:nth-child(3) {
            animation-delay: .7s;
        }
        /* 水滴掉落动画 */
        @keyframes drop {
            0% {
                transform: scale(0.7) translateY(-600%);
                opacity: 0;
            }

            50% {
                transform: scale(0.4) translateY(-80%);
                opacity: 1;
            }

            100% {
                transform: scale(0.3) translateY(0px);
            }
        }

        /* 收集水滴的盒子添加的蠕动效果 */
        @keyframes colleation {
            0% {
                transform: scale(1) rotate(0deg);
            }

            50% {
                transform: scale(1.3) rotate(180deg);
                width: 90px;
            }

            100% {
                transform: scale(1) rotate(360deg);
            }
        }

5.效果展示如下

6.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
            flex-direction: column;
            filter: contrast(30);
        }

        .drop {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            filter: blur(20px);
            opacity: 0;
            animation: 2.5s drop linear infinite;
        }

       

        .collection {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            filter: blur(20px);
            animation: 3s colleation linear infinite;
        }

        span {
            position: absolute;
            font-size: 20px;
            font-weight: 500;
            color: #000;
        }
        /* 给水滴添加动画延时，避免三个水滴同时掉落 */
        .drop:nth-child(2) {
            animation-delay: .5s;
        }

        .drop:nth-child(3) {
            animation-delay: .7s;
        }
        /* 水滴掉落动画 */
        @keyframes drop {
            0% {
                transform: scale(0.7) translateY(-600%);
                opacity: 0;
            }

            50% {
                transform: scale(0.4) translateY(-80%);
                opacity: 1;
            }

            100% {
                transform: scale(0.3) translateY(0px);
            }
        }

        /* 收集水滴的盒子添加的蠕动效果 */
        @keyframes colleation {
            0% {
                transform: scale(1) rotate(0deg);
            }

            50% {
                transform: scale(1.3) rotate(180deg);
                width: 90px;
            }

            100% {
                transform: scale(1) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="collection"></div>
        <span>80%</span>
    </div>

</body>

</html>