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

Author： YH_evIs
发布时间：December 25, 2019
26455views
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

超卓网
名称：超卓网网址：https://chaozhuowang.c...
codeskystar
博主nb！
玉明
随机找的，用fofa网络空间测绘引擎，专门找typecho的站...
玉明
好兄弟，能再分享一下吗
CodeSkyStar
博客链接:https://blog.codeskystar.cn/

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

YH_evIs • 2019 年 12 月 25 日