11.纯 CSS 创作一个荧光脉冲 loader 特效

程序员艳君技术 2022年11月7日

0 收藏 537 点赞 1,065 浏览 1060 个字

原文地址：https://segmentfault.com/a/1190000014700727

HTML代码：

 <html>
     <head>
         <link rel="stylesheet" href="index.css" rel="external nofollow" >
     </head>
     <body>
         <div class="circle"></div>
     </body>
 </html>

CSS代码：

 html,
 body ,
 .circle{
     margin:;
     padding:;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center; }
 /* 画出中间的实心圆 */
 /* :root是一个CSS伪类，它匹配文档的根元素 – <html>元素。
     w3 相关地址 http://www.w3school.com.cn/cssref/css_selectors.asp */
 :root {
     --innerRadius: 2em;
 }
 .circle {
     width: calc(var(--innerRadius) * 2);
     height: calc(var(--innerRadius) * 2);
     background-color: lime;
     border-radius: 50%;
     /* 画出圆环 */
     box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) white,
                 0 0 0 var(--innerRadius) lime;
     position: relative;
 }
 /* 用伪元素 ::before 画出动画用到的圆环 ； 用伪元素 ::after 再画出一个动的圆环*/
 .circle::before,
 .circle::after {
     content: '';
     position: absolute;
     width: calc(var(--innerRadius) * 2 * 2);
     height: calc(var(--innerRadius) * 2 * 2);
     border: 2px solid lime;
     border-radius: 50%;
     animation: pulse 2s linear infinite;
 }
 .circle::after {
     animation-delay: 1s;
 }
 /* 增加动画效果
 优化动画——增加渐淡和弹性效果 */
 @keyframes pulse {
     from {
         /* scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。*/
         transform: scale(1);
         filter: opacity(0.9);
     }     to {
         transform: scale(2);
         filter: opacity(0);
     }
 }