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

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

HTML代码：

 <html>

     <head>

         <link rel="stylesheet" href="index.css">

     </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);

     }

 }

巴特西

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

最新文章

热门文章