11.纯 CSS 创作一个荧光脉冲 loader 特效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了11.纯 CSS 创作一个荧光脉冲 loader 特效相关的知识，希望对你有一定的参考价值。
原文地址：https://segmentfault.com/a/1190000014700727
html代码：
1 <html> 2 <head> 3 <link rel="stylesheet" href="index.css"> 4 </head> 5 <body> 6 <div class="circle"></div> 7 </body> 8 </html>
CSS代码：
1 html, 2 body , 3 .circle{ 4 margin: 0; 5 padding: 0; 6 height: 100%; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 11 } 12 /* 画出中间的实心圆 */ 13 /* :root是一个CSS伪类，它匹配文档的根元素 – <html>元素。 14 w3 相关地址 http://www.w3school.com.cn/cssref/css_selectors.asp */ 15 :root { 16 --innerRadius: 2em; 17 } 18 .circle { 19 width: calc(var(--innerRadius) * 2); 20 height: calc(var(--innerRadius) * 2); 21 background-color: lime; 22 border-radius: 50%; 23 /* 画出圆环 */ 24 box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) white, 25 0 0 0 var(--innerRadius) lime; 26 position: relative; 27 } 28 /* 用伪元素 ::before 画出动画用到的圆环 ； 用伪元素 ::after 再画出一个动的圆环*/ 29 .circle::before, 30 .circle::after { 31 content: ‘‘; 32 position: absolute; 33 width: calc(var(--innerRadius) * 2 * 2); 34 height: calc(var(--innerRadius) * 2 * 2); 35 border: 2px solid lime; 36 border-radius: 50%; 37 animation: pulse 2s linear infinite; 38 } 39 .circle::after { 40 animation-delay: 1s; 41 } 42 /* 增加动画效果 43 优化动画——增加渐淡和弹性效果 */ 44 @keyframes pulse { 45 from { 46 /* scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。*/ 47 transform: scale(1); 48 filter: opacity(0.9); 49 } 50 51 to { 52 transform: scale(2); 53 filter: opacity(0); 54 } 55 }
以上是关于11.纯 CSS 创作一个荧光脉冲 loader 特效的主要内容，如果未能解决你的问题，请参考以下文章
前端每日实战：2.纯 CSS 创作一个矩形旋转 loader 特效