纯css实现粒子波动视觉效果-html代码-BFW代码库

纯css实现粒子波动视觉效果

代码语言：html

所属分类：粒子

代码描述：纯css实现粒子波动视觉效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.master:nth-child(1) {
  -webkit-transform: scale(-1, -1) translate(-150px);
          transform: scale(-1, -1) translate(-150px);
}
.master:nth-child(2) {
  -webkit-transform: scale(1, -1) translate(-150px);
          transform: scale(1, -1) translate(-150px);
}
.master:nth-child(3) {
  -webkit-transform: scale(-1, 1) translate(-150px);
          transform: scale(-1, 1) translate(-150px);
}
.master:nth-child(4) {
  -webkit-transform: scale(1, 1) translate(-150px);
          transform: scale(1, 1) translate(-150px);
}

.magic {
  width: 150px;
  height: 20px;
  border-left: 10px solid orangered;
  border-right: 1px solid darkorange;
  -webkit-animation: 3s ENERGY ease-in-out infinite;
          animation: 3s ENERGY ease-in-out infinite;
}
.magic:nth-child(1) {
  -webkit-animation-delay: -0.04s;
          animation-delay: -0.04s;
  -webkit-transform: rotate(7.2deg) translate(200px) scale(-1.02);
          transform: rotate(7.2deg) translate(200px) scale(-1.02);
}
.magic:nth-child(2) {
  -webkit-animation-delay: -0.08s;
          animation-delay: -0.08s;
  -webkit-transform: rotate(14.4deg) translate(200px) scale(-1.04);
          transform: rotate(14.4deg) translate(200px) scale(-1.04);
}
.magic:nth-child(3) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
  -webkit-transform: rotate(21.6deg) translate(200px) scale(-1.06);
          transform: rotate(21.6deg) translate(200px) scale(-1.06);
}
.magic:nth-child(4) {
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
  -webkit-transform: rotate(28.8deg) translate(200px) scale(-1.08);
          transform: rotate(28.8deg) translate(200px) scale(-1.08);
}
.magic:nth-child(5) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  -webkit-transform: rotate(36deg) translate(200px) scale(-1.1);
          transform: rotate(36deg) translate(200px) scale(-1.1);
}
.magic:nth-child(6) {
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
  -webkit-transform: rotate(43.2deg) translate(200px) scale(-1.12);
          transform: rotate(43.2deg) translate(200px) scale(-1.12);
}
.magic:nth-child(7) {
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
  -webkit-transform: rotate(50.4deg) translate(200px) scale(-1.14);
          transform: rotate(50.4deg) translate(200px) scale(-1.14);
}
.magic:nth-child(8) {
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
  -webkit-transform: rotate(57.6deg) translate(200px) scale(-1.16);
          transform: rotate(57.6deg) translate(200px) scale(-1.16);
}
.magic:nth-child(9) {
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
  -webkit-transform: rotate(64.8deg) translate(200px) scale(-1.18);
          transform: rotate(64.8deg) translate(200px) scale(-1.18);
}
.magic:nth-child(10) {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-transform: rotate(72deg) translate(200px) scale(-1.2);
          transform: rotate(72deg) translate(200px) scale(-1.2);
}
.magic:nth-child(11) {
  -webkit-animation-delay: -0.44s;
          animation-delay: -0.44s;
  -webkit-transform: rotate(79.2deg) translate(200px) scale(-1.22);
          transform: rotate(79.2deg) translate(200px) scale(-1.22);
}
.magic:nth-child(12) {
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
  -webkit-transform: rotate(86.4deg) translate(200px) scale(-1.24);
          transform: rotate(86.4deg) tr.........完整代码请登录后点击上方下载按钮下载查看