css炫光加载器

css炫光加载器

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q0fZxoRC-1580558182915)(演示.gif)]

代码区

html

  <div class="loader">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>

CSS

body{
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  display: flex; /* 弹性盒模型 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  background: #240229; /* 背景颜色 */
  height: 100vh; /* 高度 */
}
.loader{
  position: relative; /* 相对定位，为了不让子元素定位到根而设置 */
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 边框圆角 */
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); /* 背景渐变 */
  animation: animate 0.5s linear infinite; /* 动画：名称 时间 速率曲线 重复 */
}
@keyframes animate{
  0%{
    transform: rotate(0deg); /* 旋转 */
  }
  /* 利用修改旋转角度而实现环绕 */
  100%{
    transform: rotate(360deg);
  }
}
.loader span{
  position: absolute; /* 绝对定位 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
}
.loader span:nth-child(1){ /* 第一个span元素 */
  filter: blur(5px); /* 过滤：模糊 */
}
.loader span:nth-child(2){ /* 第二个span元素 */
  filter: blur(10px);
}
.loader span:nth-child(3){
  filter: blur(25px);
}
.loader span:nth-child(4){
  filter: blur(50px);
}
.loader::after{ /* 之后添加，为中心的黑色 */
  content: ''; /* 内容 */
  position: absolute;
  /* 当设置了2个对立的定位时，元素的大小为对立距离 如此处的高为
  100px - 10px - 10px = 80px
  (父元素 - top - left)
  */
  top: 10px; /* 距上部 */
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #240229;
  border-radius: 50%;
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）