css实现光晕背景动画效果代码-html代码-BFW代码库

css实现光晕背景动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现光晕背景动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  margin: 0;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #3E1E68;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #E45A84;
  top: 38%;
  left: 90%;
  animation-duration: 14.4s;
  animation-delay: -7.3s;
  transform-origin: 8vw -20vh;
  box-shadow: 40vmin 0 7.5825118355vmin currentColor;
}
.background span:nth-child(2) {
  color: #E45A84;
  top: 85%;
  left: 44%;
  animation-duration: 13.9s;
  animation-delay: -15.3s;
  transform-origin: -23vw 19vh;
  box-shadow: -40vmin 0 7.0535658472vmin currentColor;
}
.background span:nth-child(3) {
  color: #E45A84;
  top: 31%;
  left: 94%;
  animation-duration: 14.4s;
  animation-delay: -14s;
  transform-origin: -10vw -19vh;
  box-shadow: -40vmin 0 6.3282530813vmin currentColor;
}
.background span:nth-child(4) {
  color: #583C87;
  top: 32%;
  left: 72%;
  animation-duration: 11.1s;
  animation-delay: -11s;
  transform-origin: 22vw 3vh;
  box-shadow: 40vmin 0 9.0598358039vmin currentColor;
}
.background span:nth-child(5) {
  color: #E45A84;
  top: 60%;
  left: 8%;
  animation-duration: 15s;
  animation-delay: -10.5s;
  transform-origin: 5vw -1vh;
  box-shadow: -40vmin 0 13.3208706669vmin currentColor;
}
.background span:nth-child(6) {
  color: #583C87;
  top: 90%;
  left: 48%;
  animation-duration: 13.6s;
  animation-delay: -5.2s;
  transform-origin: 24vw 15vh;
  box-shadow: 40vmin 0 11.7532629644vmin currentColor;
}
.background span:nth-child(7) {
  color: #583C87;
  top: 59%;
  left: 28%;
  an.........完整代码请登录后点击上方下载按钮下载查看