前端日常实战：8#视频演示如何用纯CSS制作充电加载器效果
时间：2023-03-30 14:49:25
CSS
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/zhang-ou/pen/deNqdV互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cvrwJAK源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/008-charging-loader-animation代码解释定义了dom，只有一个容器元素：
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(tobottom,teal,aqua);}绘制电池主体轮廓：.battery{width:6em;高度：3em；颜色：午夜蓝；border:0.5emsolidcurrentColor;边界半径：0.2em；font-size:2em;}绘制电池的突出部分：.battery{position:relative;}.battery::after{内容：'';位置：绝对；宽度：0.5em；高度：2em；背景颜色：currentColor；顶部：0.5em；右：-1em；0;}绘制电量：.battery{background-image:linear-gradient(toright,whitesmoke,whitesmoke);背景重复：不重复；背景大小：30%80%；background-position:0.3em50%;}定义和应用动画效果：@keyframescharge{from{background-size:10%80%；}到{背景大小：95%80%；}}.battery{animation:charge5slinearinfinite;}最后，将动画的时间函数由线性变化改为阶跃变化：.battery{animation:charge5ssteps(8)infinite;}大功告成！知识点linear-gradient()https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradientbackground-sizehttps://developer.mozilla.org/en-US/docs/Web/CSS/背景大小背景位置https://developer.mozilla.org/en-US/docs/Web/CSS/background-positionsteps()https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#Timing_functionscurrentColorhttps://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Valuesborder-radiushttps://developer.mozilla.org/en-US/文档/Web/CSS/边框半径
