css实现螺旋数字模糊显示动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现螺旋数字模糊显示动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  
<style>
    body {
  overflow: hidden;
}

.spiral {
  font-size: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 20px);
  text-shadow: 0px 0px 3px black;
}
.spiral:nth-child(1) {
  transform: rotate(14.693877551deg) translate(3px) scale(1);
  -webkit-animation: rotate-1 5s infinite linear -201ms;
          animation: rotate-1 5s infinite linear -201ms;
}
.spiral:nth-child(2) {
  transform: rotate(29.387755102deg) translate(6px) scale(1);
  -webkit-animation: rotate-2 5s infinite linear -451ms;
          animation: rotate-2 5s infinite linear -451ms;
}
.spiral:nth-child(3) {
  transform: rotate(44.0816326531deg) translate(9px) scale(1);
  -webkit-animation: rotate-3 5s infinite linear -701ms;
          animation: rotate-3 5s infinite linear -701ms;
}
.spiral:nth-child(4) {
  transform: rotate(58.7755102041deg) translate(12px) scale(1);
  -webkit-animation: rotate-4 5s infinite linear -951ms;
          animation: rotate-4 5s infinite linear -951ms;
}
.spiral:nth-child(5) {
  transform: rotate(73.4693877551deg) translate(15px) scale(1);
  -webkit-animation: rotate-5 5s infinite linear -1201ms;
          animation: rotate-5 5s infinite linear -1201ms;
}
.spiral:nth-child(6) {
  transform: rotate(88.1632653061deg) translate(18px) scale(1);
  -webkit-animation: rotate-6 5s infinite linear -1451ms;
          animation: rotate-6 5s infinite linear -1451ms;
}
.spiral:nth-child(7) {
  transform: rotate(102.8571428571deg) translate(21px) scale(1);
  -webkit-animation: rotate-7 5s infinite linear -1701ms;
          animation: rotate-7 5s infinite linear -1701ms;
}
.spiral:nth-child(8) {
  transform: rotate(117.5510204082deg) translate(24px) scale(1);
  -webkit-animation: rotate-8 5s infinite linear -1951ms;
          animation: rotate-8 5s infinite linear -1951ms;
}
.spiral:nth-child(9) {
  transform: rotate(132.2448979592deg) translate(27px) scale(1);
  -webkit-animation: rotate-9 5s infinite linear -2201ms;
          animation: rotate-9 5s infinite linear -2201ms;
}
.spiral:nth-child(10) {
  transform: rotate(146.9387755102deg) translate(30px) scale(1);
  -webkit-animation: rotate-10 5s infinite linear -2451ms;
          animation: rotate-10 5s infinite linear -2451ms;
}
.spiral:nth-child(11) {
  transform: rotate(161.6326530612deg) translate(33px) scale(1);
  -webkit-animation: rotate-11 5s infinite linear -2701ms;
          animation: rotate-11 5s infinite linear -2701ms;
}
.spiral:nth-child(12) {
  transform: rotate(176.3265306122deg) translate(36px) scale(1);
  -webkit-animation: rotate-12 5s infinite linear -2951ms;
          animation: rotate-12 5s infinite linear -2951ms;
}
.spiral:nth-child(13) {
  transform: rotate(191.0204081633deg) translate(39px) scale(1);
  -webkit-animation: rotate-13 5s infinite linear -3201ms;
          animation: rotate-13 5s infinite linear -3201ms;
}
.spiral:nth-child(14) {
  transform: rotate(205.7142857143deg) translate(42px) scale(1);
  -webkit-animation: rotate-14 5s infinite linear -3451ms;
          animation: rotate-14 5s infinite linear -3451ms;
}
.spiral:nth-child(15) {
  transform: rotate(220.4081632653deg) translate(45px) scale(1);
  -webkit-animation: rotate-15 5s infinite linear -3701ms;
          animation: rotate-15 5s infinite linear -3701ms;
}
.spiral:nth-child(16) {
  transform: rotate(235.1020408163deg) translate(48px) scale(1);
  -webkit-animation: rotate-16 5s infinite linear -3951ms;
          animation: rotate-16 5s infinite linear -3951ms;
}
.spiral:nth-child(17) {
  transform: rotate(249.7959183673deg) translate(51px) scale(1);
  -webkit-animation: rotate-17 5s infinite linear -4201ms;
          animation: rotate-17 5s infinite linear -4201ms;
}
.spiral:nth-child(18) {
  transform: rotate(264.4897959184deg) translate(54px) scale(1);
  -webkit-animation: rotate-18 5s infinite linear -4451ms;
          animation: rotate-18 5s infinite linear -4451ms;
}
.spiral:.........完整代码请登录后点击上方下载按钮下载查看