【css3实现华为充电】那些你没想到的CSS效果之华为充电效果（附源码下载）

news2024/11/24 7:56:21

【写在前面】今天是高考的第二天，在这里我也祝各位学子能够旗开得胜，进入自己理想的大学，借着今天这个吉日我就和大家介绍一下如何用css实现华为充电效果。
涉及知识点：CSS3特效，华为充电特效实现，CSS属性filter的应用，after，before伪元素的灵活应用。CSS3实现华为充电动态效果，CSS气泡动态特效。

别的不多说，给大家看一下效果吧先（文尾有完整代码）：
在这里插入图片描述

这个实现起来其实不是很难，我们要理清楚下面这核心两步（画圆与气泡动态）。

创作不易，喜欢又想支持博主的可以点击此处上皇榜哟！

一、圆圈动态（为了理解我把dom设置白色背景）
- 1.先搭建一个圆形dom节点
- 2.利用after伪元素设置其周边的动态
- 3.利用CSS3实现filter滤镜实现清晰与模糊混合效果
二、充电动态（气泡实现）
- SCSS实现核心代码：
- CSS实现核心代码：
三、完整代码包分享
- 百度网盘下载地址
- 123云盘下载地址
- 彩蛋皇榜

一、圆圈动态（为了理解我把dom设置白色背景）

1.先搭建一个圆形dom节点

利用before属性设置border-radius:50%来实现圆形效果
在这里插入图片描述

2.利用after伪元素设置其周边的动态

核心在于animation属性的设置，主要是一个动态的效果，我设置了10秒的动画效果展示，设置后如下所示：

.g-circle::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  width: 200px;
  height: 200px;
  background-color: #00ff6f;
  border-radius: 42% 38% 62% 49% / 45%;
  animation: rotate 10s infinite linear;
}

在这里插入图片描述

3.利用CSS3实现filter滤镜实现清晰与模糊混合效果

主要应用下面三个属性的设置
hue-rotate色相旋转属性
contrast调整图像的对比度
blur模糊值设置属性
设置完效果如下所示：

.g-contrast {
  filter: contrast(10) hue-rotate(0);
  width: 300px;
  height: 400px;
  background-color: #000;
  overflow: hidden;
  animation: hueRotate 10s infinite linear;
}

.g-circle {
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  filter: blur(8px);
}

在这里插入图片描述

4.去除背景终极效果
在这里插入图片描述

二、充电动态（气泡实现）

其实这个用scss来实现是最方便的，只要设置遍历循环修改其每个节点的偏移值变化和大小变化，但是CSS也是可以实现，只是要对每一个泡泡节点都要设置属性，很是麻烦。

SCSS实现核心代码：

@for $i from 0 through 15 {
      li:nth-child(#{$i}) {
        $width: 15+random(15)+px;
        left: 15 + random(70) + px;
        top: 50%;
        transform: translate(-50%, -50%);
        width: $width;
        height: $width;
        animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
      }
    }

CSS实现核心代码：

我是对16个节点分别设置的效果：

li:nth-child(0) {
  left: 55px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  animation: moveToTop 8s ease-in-out -0.53s infinite;
}

li:nth-child(1) {
  left: 70px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  animation: moveToTop 6s ease-in-out -4.403s infinite;
}

li:nth-child(2) {
  left: 59px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  animation: moveToTop 5s ease-in-out -3.403s infinite;
}

li:nth-child(3) {
  left: 69px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 27px;
  animation: moveToTop 7s ease-in-out -3.684s infinite;
}

li:nth-child(4) {
  left: 18px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  animation: moveToTop 8s ease-in-out -1.552s infinite;
}

li:nth-child(5) {
  left: 50px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  animation: moveToTop 5s ease-in-out -4.481s infinite;
}

li:nth-child(6) {
  left: 17px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  animation: moveToTop 6s ease-in-out -4.23s infinite;
}

li:nth-child(7) {
  left: 64px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  animation: moveToTop 8s ease-in-out -3.49s infinite;
}

li:nth-child(8) {
  left: 77px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  animation: moveToTop 7s ease-in-out -4.137s infinite;
}

li:nth-child(9) {
  left: 37px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  animation: moveToTop 5s ease-in-out -3.663s infinite;
}

li:nth-child(10) {
  left: 40px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 27px;
  animation: moveToTop 8s ease-in-out -4.285s infinite;
}

li:nth-child(11) {
  left: 46px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  animation: moveToTop 8s ease-in-out -1.328s infinite;
}

li:nth-child(12) {
  left: 79px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  animation: moveToTop 9s ease-in-out -0.785s infinite;
}

li:nth-child(13) {
  left: 47px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  animation: moveToTop 6s ease-in-out -0.821s infinite;
}

li:nth-child(14) {
  left: 43px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 21px;
  height: 21px;
  animation: moveToTop 8s ease-in-out -1.952s infinite;
}

li:nth-child(15) {
  left: 43px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  animation: moveToTop 7s ease-in-out -2.652s infinite;
}