前端日常实践：11#视频演示如何用纯CSS制作荧光脉冲加载器特效
时间：2023-04-05 13:26:05
HTML5
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览全屏显示。https://codepen.io/zhang-ou/pen/erRzzR交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cwrJys7源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/011-ripple-pulse-loader-animation代码解释定义dom，只有一个元素：
居中显示：html,body,.circle{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}在中间画一个实心圆：:root{--innerRadius:2em;}.circle{width:calc(var(--innerRadius)*2);高度：计算（var（--innerRadius）*2）；背景颜色：石灰；border-radius:50%;}画一个圆：.circle{box-shadow:000calc(var(--innerRadius)-0.4em)black,000var(--innerRadius)lime;}用伪元素::beforeCircle用于动画：.circle::before{content:'';位置：绝对；宽度：计算（var（--innerRadius）*2*2）；高度：计算（var（--innerRadius）*2*2）；边框：2px实心石灰；border-radius:50%;}添加动画效果：.circle::beforeanimation:pulse2slinearinfinite;}@keyframespulse{from{transform:scale(1);}到{吨变换：比例（2）；}}优化动画-增加淡入淡出和弹性效果：.circle::beforeanimation:pulse2sease-outinfinite;}@keyframespulse{from{filter:opacity(0.9);}到{过滤器：不透明度（0）;}}最后，使用伪元素::after绘制一个移动的圆圈：.circle::after{content:'';位置：绝对；宽度：calc(var(--innerRadius)*2*2);高度：计算（var（--innerRadius）*2*2）；边框：2px实心石灰；边界半径：50%；animation:pulse2sease-outinfinite;}.circle::after{animation-delay:1s;}你完成了！知识点变量https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variablescalc()https://developer.mozilla.org/en-US/docs/Web/CSS/calcanimation-timing-函数https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-functionfilterhttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functionsbox-阴影https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
