css实现天女散花运动效果-html代码-BFW代码库

css实现天女散花运动效果

代码语言：html

所属分类：动画

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

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

<style>
body {
  background: #000;
}

div {
  position: absolute;
}

.a {
  top: 50%;
  left: 50%;
  animation: r 2s linear infinite;
}

@keyframes r {
  to {
    transform: rotate(1turn);
  }
}
.dir {
  transform: rotate(calc(var(--i)*1turn/var(--n)));
}

.spark {
  overflow: hidden;
  position: absolute;
  margin: -0.25em;
  width: 10em;
  height: 0.5em;
  border-radius: 0.25em;
  animation: mov-out 1s ease-out calc((var(--i)*var(--j))*-1s/(var(--n)*var(--m))) infinite alternate;
  mix-blend-mode: color-burn;
}
.spark:before {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.25em;
  background: var(--c);
  animation: inherit;
  animation-name: mov-in;
  animation-duration: 0.5s;
  content: "";
}

@keyframes mov-out {
  0%, 10% {
    transform: translate(-9.5em);
  }
  90%, 100% {
    transform: none;
  }
}
@keyframes mov-in {
  0%, 20% {
    transform: translate(9.5em);
  }
  80%, 100% {
    transform: translate(8.55em);
  }
}
</style>

</head>

<body style="--n: 12; --m: 5;">
<style>.spark:nth-child(1) { --j: 0; --c: #85A29E }.spark:nth-child(2) { --j: 1; --c: #FFEBBF }.spark:nth-child(3) { --j: 2; --c: #F0D442 }.spark:nth-child(4) { --j: 3; --c: #F59330 }.spark:nth-child(5) { --j: 4; --c: #B22148 }
  </style>
<div class="a">
<div class="dir" style="--i: 11;">
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
</div>
<div class="dir" style="--i: 10;">
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
</div>
<div class="dir" style="--i: 9;">
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
</div>
<div class="dir" style="--i: 8;">
<div class="spark"></div>
<div class="spark"></div>
<div class="spark"></div>
<div c.........完整代码请登录后点击上方下载按钮下载查看