css3发光线条旋转加载特效

线条旋转加载特效"/>

css3发光线条旋转加载特效

css3发光线条旋转加载特效

css3属性制作两个发光线条相反旋转加载动画特效。

html部分

	<div class="loader"><div class="face"><div class="circle"></div></div><div class="face"><div class="circle"></div></div></div>

css部分

	body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black;}.loader {width: 30em;height: 30em;font-size: 10px;position: relative;display: flex;align-items: center;justify-content: center;}.loader .face {position: absolute;border-radius: 50%;border-style: solid;animation: animate 3s linear infinite;}.loader .face:nth-child(1) {width: 100%;height: 100%;color: gold;border-color: currentColor transparent transparent currentColor;border-width: 0.2em 0.2em 0em 0em;--deg: -45deg;animation-direction: normal;}.loader .face:nth-child(2) {width: 70%;height: 70%;color: lime;border-color: currentColor currentColor transparent transparent;border-width: 0.2em 0em 0em 0.2em;--deg: -135deg;animation-direction: reverse;}.loader .face .circle {position: absolute;width: 50%;height: 0.1em;top: 50%;left: 50%;background-color: transparent;transform: rotate(var(--deg));transform-origin: left;}.loader .face .circle::before {position: absolute;top: -0.5em;right: -0.5em;content:'';width: 1em;height: 1em;background-color: currentColor;border-radius: 50%;box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);}@keyframes animate {to {transform: rotate(1turn);}}