学了这么久前端的html、CSS知识，有时觉得编程非常枯燥啊，今天，我们来欣赏一个比较成熟有意思的CSS案例——充电效果。具体代码（非原创）如下：battery.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div class="container"> <div class="battery"> </div></div></body></html>
style.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;} .battery::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); } .battery::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); }}
运行一下效果如下：
一个电池充电的动画就产生了，认真学习吧😄
