【转载】用css制作充电效果

Author： YH_evIs
发布时间：December 25, 2019
23780views
2 comments
8267字数
Categories： CSS

> 这篇文章是在掘金上看到一篇文稿精简后整理而来的，需要更详细的资料可以阅读<span class="external-link"><a href="https://juejin.im/post/5e00240ee51d45583c1cc9a7" target="_blank">原文<i data-feather='external-link'></i></a></span>
> 完整<span class="external-link"><a href="https://codepen.io/Chokcoco/pen/vYExwvm" target="_blank">Demo<i data-feather='external-link'></i></a></span>

##起步##
先搞个空的css电池
<img src="https://pic1.superbed.cn/item/5e02c64276085c3289dcaec5.jpg" alt="一个空的css电池" />

撸一个最普通的充电动画：
<img src="https://pic3.superbed.cn/item/5e02c7b576085c3289dd4f29.gif" alt="一个普通的充电动画" />

增加阴影及颜色的变化：
<img src="https://pic3.superbed.cn/item/5e02c87276085c3289dd8e54.gif" alt="更改后的动画效果" />

###知识点###

到这里，其实只有一个知识点：

使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画

我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调整，从而实现了渐变色的变换动画。

```html
<div class="container">
<div class="battery"></div>
</div>
```
```css
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #e4e4e4;
}

.container {
position: relative;
width: 140px;
margin: auto;
}

.battery {
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
background: #fff;
z-index: 1;

&::before {
content: "";
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(240, 240, 240, .88);
}

&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 90%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 6s linear infinite;
filter: hue-rotate(90deg);
}
}

@keyframes charging {
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
}

95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
}
}
```
##添加波浪效果##
<img src="https://pic2.superbed.cn/item/5e02cb5f76085c3289ded639.gif" alt="波浪效果" />
##知识点##
这里的一个知识点就是上述说的使用 CSS 实现简易的波浪效果，通过障眼法实现，看看图就明白了：
<img src="https://pic3.superbed.cn/item/5e02cbae76085c3289def35b.gif" alt="波浪效果解析" />
```html
<div class="container">
<div class="header"></div>
<div class="battery">
</div>
<div class="battery-copy">
<div class="g-wave"></div>
<div class="g-wave"></div>
<div class="g-wave"></div>
</div>
</div>
```
```css
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #e4e4e4;
}

.container {
position: relative;
width: 140px;
margin: auto;
}

.header {
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(255, 255, 255, .88);
}

.battery-copy {
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden;
}

.battery {
position: relative;
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
background: #fff;
z-index: 1;

&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 80%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 10s linear infinite;
filter: hue-rotate(90deg);
}
}

.g-wave {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, .8);
border-radius: 45% 47% 44% 42%;
bottom: 25px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
animation: move 10s linear infinite;
}

.g-wave:nth-child(2) {
border-radius: 38% 46% 43% 47%;
transform: translate(-50%, 0) rotate(-135deg);
}

.g-wave:nth-child(3) {
border-radius: 42% 46% 37% 40%;
transform: translate(-50%, 0) rotate(135deg);
}

@keyframes charging {
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
}

@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
```
##使用强大的 CSS 滤镜实现安卓充电动画效果##
<img src="https://pic3.superbed.cn/item/5e02cc8476085c3289df3fcf.gif" alt="css实现的充电动画效果" />
###颜色的变换###
<img src="https://pic3.superbed.cn/item/5e02cd2f76085c3289df914c.gif" alt="实现颜色变换" />

**知识点**
```css
filter: blur();//给图像设置高斯模糊效果。
filter: contrast();//调整图像的对比度。
```
上面两种滤镜结合在一起用会有神奇的融合效果：
<img src="https://pic1.superbed.cn/item/5e02d8a676085c3289e414cc.gif" alt="两种滤镜在一起应用时产生的效果" />
```html
<div class="g-container">
<div class="g-number">98.7%</div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
```
```css
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #000;
overflow: hidden;
}

.g-number {
position: absolute;
width: 300px;
top: 27%;
text-align: center;
font-size: 32px;
z-index: 10;
color: #fff;
}

.g-container {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}

.g-contrast {
filter: contrast(15) 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);

&::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;
}

&::before {
content: "";
position: absolute;
width: 176px;
height: 176px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #000;
z-index: 10;
}
}

.g-bubbles {
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 40px;
transform: translate(-50%, 0);
border-radius: 100px 100px 0 0;
background-color: #00ff6f;
filter: blur(5px);
}

li {
position: absolute;
border-radius: 50%;
background: #00ff6f;
}

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

@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}

@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .1;
transform: translate(-50%, -180px);
}
}

@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
```

Last modification：December 25th, 2019 at 11:35 am

如果觉得我的文章对你有用，请随意赞赏

2 comments

匿名的两仪橙
December 25th, 2019 at 11:17 am

可是我连第一个空电池css也不会怎么办

Reply
1. YH_evIs
  December 25th, 2019 at 11:27 am
  
  @匿名的两仪橙
  
  Reply

比利海灵顿
<script>console.log('test...
比利海灵顿
it's good for you
两仪橙
铁疙瘩山雨欲来风满楼小乔诸葛存心忧二零一二再回首惟愿悬壶任漂泊...
CodeSkyStar
名称：CodeSkyStar网址：https://www.co...
CodeSkyStar
自我学习，自我成长ing

【转载】用css制作充电效果

YH_evIs • 2019 年 12 月 25 日