Loading... > 这篇文章是在掘金上看到一篇文稿精简后整理而来的,需要更详细的资料可以阅读<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); } 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); } } @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 © 允许规范转载 Support 如果觉得我的文章对你有用,请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
可是我连第一个空电池css也不会怎么办