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充电特效动画 - 小黑鸟资源网–资源技术免费分享平台</title>
<style>
.phoneBox{
margin: 20px auto;
width: 375px;
height: 765px ;
background-size: cover;
box-sizing: border-box;
padding-top: 16px;
}
.screenPhone{
width: 330px;
height: 657px;
margin: 0 auto;
background: #000;
border-radius: 45px 45px 0 0;
position: relative;
}
.screenPhone .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;
}
/* 电量充电动画的大盒子 */
.screenPhone .ascending{
width: 100%;
height: 100%;
background: #050807;
border-radius: 45px 45px 0 0;
position: relative;
}
/* 框选电脑显示区域 */
.screenPhone .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 .water{
width: 20px;
height: 20px;
background-color: #4dff03;
border-radius: 100%;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 2;
}
/* 设置冒泡底座的基本样式 */
.water-home{
width: 100px;
height: 40px;
background-color: #4dff03;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -50px;
border-radius: 100px 100px 0 0;
}
/* 调试滤镜 */
.screenPhone .ascending{
/* 设置动画容器的对比度 */
filter: contrast(15);
}
.screenPhone .circle{
/* 设置电量周围颜色的模糊度 */
filter: blur(8px);
}
.screenPhone .water{
filter: blur(5px);
}
/* 设置旗袍底座的模糊度 */
.screenPhone .water-home{
filter: blur(8px);
}
/* 添加动画 */
.screenPhone .ascending{
animation: animation1 5s linear infinite;
}
/* 动画整体设置色相差 */
@keyframes animation1{
0%{
filter: contrast(15) hue-rotate(0);
}
100%{
filter: contrast(15) hue-rotate(360deg);
}
}
.screenPhone .circle{
animation: animation2 5s linear infinite;
}
/* 设置电量周围的旋转 */
@keyframes animation2{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
.screenPhone .water{
animation: animation3 5s ease-in-out infinite;
}
/* 设置小气泡上升的动画 */
@keyframes animation3{
0%{
bottom: 0;
}
100%{
bottom: calc(80% - 170px);
}
}
/* 设置小气泡（位置 大小 动画时长 动画延迟） */
.water:nth-child(1){
width: 20px;
height: 20px;
left: 50%;
animation-duration: 5s;
animation-delay: 1s;
}
.water:nth-child(2){
width: 20px;
height: 20px;
left: 49%;
animation-duration: 4s;
animation-delay: 2s;
}.water:nth-child(3){
width: 20px;
height: 20px;
left: 48%;
animation-duration: 3s;
animation-delay: 2s;
}.water:nth-child(4){
width: 20px;
height: 20px;
left: 52%;
animation-duration: 2s;
animation-delay: 3s;
}.water:nth-child(5){
width: 20px;
height: 20px;
left: 51%;
animation-duration: 1s;
animation-delay: 5s;
}.water:nth-child(6){
width: 20px;
height: 20px;
left: 53%;
animation-duration: 3s;
animation-delay: 3s;
}
</style>
</head>
<body>
<div class="phoneBox">
<div class="screenPhone">
<div class="number">78.6%</div>
<div class="ascending">
<div class="water"></div>
<div class="water"></div>
<div class="water"></div>
<div class="water"></div>
<div class="water"></div>
<div class="water-home"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
