原文地址：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 特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10164056.html