前言

最近在B站遨游的时候，发现一个大佬做的小Demo非常惊艳！！

非常好奇于是学习了一下，也是经过了大佬的同意将这个Demo写成了这篇文章。

先为大家上效果图：

这个效果确实有惊艳到我！通过CSS动画实现！接下来为大家展示代码！

代码

一、HTML 文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="phone">
        <div class="screen">
            <div class="number">68.6%</div>
            <div class="ascending">
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble-home"></div>
                <div class="circle"></div>
            </div>
        </div>
    </div>
</body>
</html>

这是一个HTML元素的代码，通过各个容器实现一个手机界面的展示！。

最外层的div使用类名"phone"表示手机的容器。
在其中，有一个带有类名"screen"的div，表示手机的屏幕。
在"screen" div内部，有一个带有类名"number"的div，其中包含文本"68.6%"。
在"screen" div内部，还有一个带有类名"ascending"的div，其中包含一组视觉指示器。
在"ascending" div内部，有几个带有类名"bubble"的div（共5个），表示气泡元素。
还有一个带有类名"bubble-home"的div，表示一个气泡出现的底座。
最后，有一个带有类名"circle"的div，表示一个视觉元素。

二、CSS文件

一、全局样式

.phone:创建一个具有特定样式的"phone"元素，包括固定的尺寸、居中显示、背景图以及一些内边距。

.screen:为"screen"元素创建一个特定样式，包括固定的尺寸、居中显示、黑色背景、上部分圆角边框等。这样的样式用于模拟手机屏幕或者是其他类似的视觉样式

.screen .number:为number元素创建一个特定样式，让它在屏幕的上部居中显示，设置特定的尺寸、颜色和文本样式。使其适配我们的手机背景图

二、电量充电动画的大盒子

.screen .ascending:为ascending元素创建一个特定样式，使其具有特定的尺寸、背景颜色和上部圆角边框，与我们的screen元素的样式相协调，形成手机屏幕的一部分。

三、框选电脑显示区域

.screen .circle:为circle元素创建一个特定样式，让它有特定的尺寸和设置它在屏幕上的位置，同时通过负的左边距来实现水平居中。

四、伪元素设置电量周围颜色和伪元素设置电量周围圆

对于 .circle::before：

content: "";: 设置伪元素的内容为空。
width: 200px;和height: 200px;: 设置伪元素的宽度和高度为200像素，使其成为一个正方形。
top: 50%;和left: 50%;: 将伪元素的中心定位在其包含块的50%处。
transform: translate(-50%, -50%);: 使用transform属性，将伪元素在水平和垂直方向上向左上方平移自身宽高的50%，以使其中心与父元素中心对齐。
border-radius: 42% 38% 63% 49%/45%;: 设置伪元素的边框半径，使其形成一个不规则的圆形。

对于 .circle::after：

content: "";: 设置伪元素的内容为空。
width: 178px;和height: 178px;: 设置伪元素的宽度和高度为178像素，使其成为一个正方形。
top: 50%;和left: 50%;: 将伪元素的中心定位在其包含块的50%处。
transform: translate(-50%, -50%);: 使用transform属性，将伪元素在水平和垂直方向上向左上方平移自身宽高的50%，以使其中心与父元素中心对齐。
border-radius: 50%;: 设置伪元素的边框半径为50%，使其形成一个圆形。

这样最终的效果能够创建出两个带有特定颜色和形状的圆形装饰元素。

五、设置向上泡泡的基本样式和设置冒泡底座的基本样式

顾名思义！这两段CSS样式是通过为向上的泡泡设置样式，和泡泡所在的底座创建特定的样式，具体的效果如效果图中的泡泡和底座！

六、调试滤镜

对于 .screen .ascending：
- filter: contrast(15);: 设置动画容器的对比度为15。增加元素的对比度，使图像更加清晰或更加突出。
对于 .screen .circle：
- filter: blur(8px);: 设置电量周围颜色的模糊度为8像素。使元素的边缘产生模糊效果。
对于 .screen .bubble：
- filter: blur(5px);: 设置向上泡泡的模糊度为5像素。使元素的边缘产生一定程度的模糊效果。
对于 .screen .bubble-home：
- filter: blur(8px);: 设置冒泡底座的模糊度为8像素。使元素的边缘产生模糊效果。

七、动画部分

.screen .ascending对比度和色相差动画

使用animation1关键帧动画，在5秒内以线性动画无限循环。
动画从对比度为15，色相差为0度开始，到对比度为15，色相差为360度结束。
整个动画周期中，通过改变色相差属性实现一个完整的360度色相变化。

.screen .circle旋转动画

使用animation2关键帧动画，在5秒内以线性动画无限循环。
动画从旋转角度为0度开始，到旋转角度为360度结束。
整个动画周期中，通过改变元素的旋转角度实现360度的旋转。

.screen .bubble上升动画

使用animation3关键帧动画，在5秒内以缓进缓出的方式无限循环。
动画从底部位置为0开始，到底部位置为(80% - 170px)结束。
整个动画周期中，通过改变元素的底部位置实现上升效果

小气泡动画

.bubble:nth-child(1)通过:nth-child()选择器为每个元素设置不同的样式，通过设置大小，位置和动画持续时间 animation-duration: 2s;，动画延迟时间animation-delay: 3s;来为上升动画添加不同的小气泡！

这样CSS文件代码量还是比较长的，代码如下：每一点的备注已经放入代码当中！

css 复制代码

/* 全局样式 */
.phone{
    margin: 20px auto;
    width: 375px;
    height: 765px ;
    background: url("./手机背景图.jpg");
    background-size: cover;
    box-sizing: border-box;
    padding-top: 16px;
}
.screen{
    width: 330px;
    height: 657px;
    margin: 0 auto;
    background: #000;
    border-radius: 45px 45px 0 0;
    position: relative;
}
.screen .number{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    color: #fff;
}
/* 电量充电动画的大盒子 */
.screen .ascending{
    width: 100%;
    height: 100%;
    background: #050807;
    border-radius: 45px 45px 0 0;
    position: relative;
}
/* 框选电脑显示区域 */
.screen .circle{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 7%;
    left: 50%;
    margin-left: -150px;
}
/* 伪元素设置电量周围颜色 */
.circle::before{
    content: "";
    width: 200px;
    height: 200px;
    background-color: #4dff03;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 42% 38% 63% 49%/45%;
}
/* 伪元素设置电量周围圆 */
.circle::after{
    content: "";
    width: 178px;
    height: 178px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}
/* 设置向上泡泡的基本样式 */
.screen .bubble{
    width: 20px;
    height: 20px;
    background-color: #4dff03;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
}
/* 设置冒泡底座的基本样式 */
.bubble-home{
    width: 100px;
    height: 40px;
    background-color: #4dff03;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -50px;
    border-radius: 100px 100px 0 0;
}
/* 调试滤镜 */
.screen .ascending{
    /* 设置动画容器的对比度 */
    filter: contrast(15);
}
.screen .circle{
    /* 设置电量周围颜色的模糊度 */
    filter: blur(8px);
}
.screen .bubble{
    filter: blur(5px);
}
/* 设置旗袍底座的模糊度 */
.screen .bubble-home{
    filter: blur(8px);
}
/* 添加动画 */
.screen .ascending{
    animation: animation1 5s linear infinite;
}
/* 动画整体设置色相差 */
@keyframes animation1{
    0%{
        filter: contrast(15) hue-rotate(0);
    }
    100%{
        filter: contrast(15) hue-rotate(360deg);
    }
}

.screen .circle{
    animation: animation2 5s linear infinite;
}
/* 设置电量周围的旋转 */
@keyframes animation2{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}

.screen .bubble{
    animation: animation3 5s ease-in-out infinite;
}
/* 设置小气泡上升的动画 */
@keyframes animation3{
    0%{
        bottom: 0;
    }
    100%{
        bottom: calc(80% - 170px);
    }
}
/* 设置小气泡（位置 大小 动画时长 动画延迟） */
.bubble:nth-child(1){
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 5s;
    animation-delay: 1s;
}
.bubble:nth-child(2){
    width: 20px;
    height: 20px;
    left: 49%;
    animation-duration: 4s;
    animation-delay: 2s;
}.bubble:nth-child(3){
    width: 20px;
    height: 20px;
    left: 48%;
    animation-duration: 3s;
    animation-delay: 2s;
}.bubble:nth-child(4){
    width: 20px;
    height: 20px;
    left: 52%;
    animation-duration: 2s;
    animation-delay: 3s;
}.bubble:nth-child(5){
    width: 20px;
    height: 20px;
    left: 51%;
    animation-duration: 1s;
    animation-delay: 5s;
}.bubble:nth-child(6){
    width: 20px;
    height: 20px;
    left: 53%;
    animation-duration: 3s;
    animation-delay: 3s;
}

三、JS代码

我们还需要实现充电球中数字的变化，这里就需要使用JS代码了，我们在HTML文件中加入这样一段代码：

html 复制代码

<!-- 添加js实现数字上涨 -->
<script>
    let num = 686
    const timeId = setInterval(()=>{
        num+=1
        if(num>=1000)
        {
            window.clearInterval(timeId)
        }
        document.querySelector(".number").innerHTML=(num/10)+'%'
    },500)
    // 设置0.5s数组上涨0.1%
</script>

通过这样一段JS代码就可以实现电量的上涨，每过0.5秒上涨0.1%

最后

记得导入CSS文件哦，这样我们的效果就可以实现啦！

大家参考学习一下吧！顺便点个小小赞啦！

B站大佬主页：令人脱发的代码的个人空间-令人脱发的代码个人主页-哔哩哔哩视频 (bilibili.com)

个人gitee库：MycodeSpace: 主要应用的仓库，记录学习coding中的点点滴滴 (gitee.com)

[小Demo]如何通过CSS实现手机充电效果？

前言

代码

一、HTML 文件

二、CSS文件

三、JS代码

最后