充电水滴效果

最新推荐文章于 2023-08-21 00:57:56 发布

小白小白从不日白

最新推荐文章于 2023-08-21 00:57:56 发布

阅读量429

点赞数

分类专栏： html+css 文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_43285360/article/details/123891951

版权

html+css 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何使用HTML、CSS和CSS3创建一个充电效果的水滴融合动画。通过设置div元素、应用flex布局、高斯模糊、关键帧动画以及延迟效果，实现了三个水滴从上而下落下的视觉效果，同时底部有一个显示数据的圆圈，整个过程模拟了充电过程中的百分比变化。代码示例清晰地展示了每个部分的CSS样式和动画设置。

摘要由CSDN通过智能技术生成

对于这个的实现主要采用了 html css css3，进行设计的

其大致布局结构如下：

这里总共有五个div构成，最外层的容器、3个水滴、最底部的一个圆圈容器用于显示数据以及显示文本的span

结构：

    <div class="container">
        <!-- 三个水滴 -->
        <div class="droplet"></div>
        <div class="droplet"></div>
        <div class="droplet"></div>
        <!-- 圆圈盒子用于显示数据 -->
        <div class="circle"></div>
        <span>99.99%</span>
    </div>

首先，我们给最外层的盒子采用 flex 布局，再设置其排列方向为纵向排列以及设置其水平垂直居中

        .container {
            position: relative;
            height: 100vh;
            display: flex;
            /* 横向排列 */
            flex-direction: column;
            /* 水平垂直居中 */
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            background-color: rgb(5, 5, 5);
            /* 调整图像的像素比
            0%：全黑
            100%：图像不变
            值可以超过100%，但是意味着会运用更低的对比
            若未设置，默认为1 */
            filter: contrast(30);
        }

其次，给最外层的盒子设置为相对定位，三个水滴设置为绝对定位，并设置其高斯模糊度。这样暂时3个水滴就会重叠在一起，后面我们可以利用CSS3的关键帧动画以及分别给第二个以及第三个水滴设置不同的延迟下落时间来解决

        .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;
        }

然后，给用于显示数据的容器设置其基本样式，同时也需设置高斯模糊，这样的话在图像的对比度下才会有与下落的水滴相互融合的效果哦

        .circle {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            /* 设置高斯模糊 */
            filter: blur(20px);
            /* 设置盒子的运动动画 */
            animation: circle 3s infinite;
        }

紧接着，设置水滴的动画，使其产生从上往下落的效果并且设置第二个和第三个水滴的下落延迟时间

        @keyframes fall {
            0% {
                opacity: 0;
                transform: scale(.8) translateY(-500%);
            }
            50% {
                opacity: 1;
                transform: scale(.5) translateY(-100%);
            }
            100% {
                transform: scale(.3) translateY(0px);
            }
        }

        /* 接下来就是分别设置第二个和第三个水滴延迟下落，这样就可以模拟充电效果了 */
        .container div:nth-of-type(2) {
            animation-delay: 1.5s;
        }

        .container div:nth-of-type(3) {
            animation-delay: 2s;
        }

最后，设置底部用于显示数据容器的动画效果以及底部文字的基本样式

        @keyframes circle {
            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-family: 'fangsong';
            font-weight: 700;
        }

全部源码：

<!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>充电水滴融合特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            position: relative;
            height: 100vh;
            display: flex;
            /* 横向排列 */
            flex-direction: column;
            /* 水平垂直居中 */
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            background-color: rgb(5, 5, 5);
            /* 调整图像的像素比
            0%：全黑
            100%：图像不变
            值可以超过100%，但是意味着会运用更低的对比
            若未设置，默认为1 */
            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;
        }

        .circle {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            /* 设置高斯模糊 */
            filter: blur(20px);
            /* 设置盒子的运动动画 */
            animation: circle 3s infinite;
        }

        /* 接下来就是分别设置第二个和第三个水滴延迟下落，这样就可以模拟充电效果了 */
        .container div:nth-of-type(2) {
            animation-delay: 1.5s;
        }

        .container div:nth-of-type(3) {
            animation-delay: 2s;
        }

        span {
            position: absolute;
            color: rgb(184, 182, 182);
            font-size: 26px;
            font-family: 'fangsong';
            font-weight: 700;
        }

        @keyframes fall {
            0% {
                opacity: 0;
                transform: scale(.8) translateY(-500%);
            }
            50% {
                opacity: 1;
                transform: scale(.5) translateY(-100%);
            }
            100% {
                transform: scale(.3) translateY(0px);
            }
        }

        @keyframes circle {
            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);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 三个水滴 -->
        <div class="droplet"></div>
        <div class="droplet"></div>
        <div class="droplet"></div>
        <!-- 圆圈盒子用于显示数据 -->
        <div class="circle"></div>
        <span>99.99%</span>
    </div>
</body>
</html>