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:nth-child(19) {
  transform: rotate(279.1836734694deg) translate(57px) scale(1);
  -webkit-animation: rotate-19 5s infinite linear -4701ms;
          animation: rotate-19 5s infinite linear -4701ms;
}
.spiral:nth-child(20) {
  transform: rotate(293.8775510204deg) translate(60px) scale(1);
  -webkit-animation: rotate-20 5s infinite linear -4951ms;
          animation: rotate-20 5s infinite linear -4951ms;
}
.spiral:nth-child(21) {
  transform: rotate(308.5714285714deg) translate(63px) scale(1);
  -webkit-animation: rotate-21 5s infinite linear -5201ms;
          animation: rotate-21 5s infinite linear -5201ms;
}
.spiral:nth-child(22) {
  transform: rotate(323.2653061224deg) translate(66px) scale(1);
  -webkit-animation: rotate-22 5s infinite linear -5451ms;
          animation: rotate-22 5s infinite linear -5451ms;
}
.spiral:nth-child(23) {
  transform: rotate(337.9591836735deg) translate(69px) scale(1);
  -webkit-animation: rotate-23 5s infinite linear -5701ms;
          animation: rotate-23 5s infinite linear -5701ms;
}
.spiral:nth-child(24) {
  transform: rotate(352.6530612245deg) translate(72px) scale(1);
  -webkit-animation: rotate-24 5s infinite linear -5951ms;
          animation: rotate-24 5s infinite linear -5951ms;
}
.spiral:nth-child(25) {
  transform: rotate(367.3469387755deg) translate(75px) scale(1);
  -webkit-animation: rotate-25 5s infinite linear -6201ms;
          animation: rotate-25 5s infinite linear -6201ms;
}
.spiral:nth-child(26) {
  transform: rotate(382.0408163265deg) translate(78px) scale(1);
  -webkit-animation: rotate-26 5s infinite linear -6451ms;
          animation: rotate-26 5s infinite linear -6451ms;
}
.spiral:nth-child(27) {
  transform: rotate(396.7346938776deg) translate(81px) scale(1);
  -webkit-animation: rotate-27 5s infinite linear -6701ms;
          animation: rotate-27 5s infinite linear -6701ms;
}
.spiral:nth-child(28) {
  transform: rotate(411.4285714286deg) translate(84px) scale(1);
  -webkit-animation: rotate-28 5s infinite linear -6951ms;
          animation: rotate-28 5s infinite linear -6951ms;
}
.spiral:nth-child(29) {
  transform: rotate(426.1224489796deg) translate(87px) scale(1);
  -webkit-animation: rotate-29 5s infinite linear -7201ms;
          animation: rotate-29 5s infinite linear -7201ms;
}
.spiral:nth-child(30) {
  transform: rotate(440.8163265306deg) translate(90px) scale(1);
  -webkit-animation: rotate-30 5s infinite linear -7451ms;
          animation: rotate-30 5s infinite linear -7451ms;
}
.spiral:nth-child(31) {
  transform: rotate(455.5102040816deg) translate(93px) scale(1);
  -webkit-animation: rotate-31 5s infinite linear -7701ms;
          animation: rotate-31 5s infinite linear -7701ms;
}
.spiral:nth-child(32) {
  transform: rotate(470.2040816327deg) translate(96px) scale(1);
  -webkit-animation: rotate-32 5s infinite linear -7951ms;
          animation: rotate-32 5s infinite linear -7951ms;
}
.spiral:nth-child(33) {
  transform: rotate(484.8979591837deg) translate(99px) scale(1);
  -webkit-animation: rotate-33 5s infinite linear -8201ms;
          animation: rotate-33 5s infinite linear -8201ms;
}
.spiral:nth-child(34) {
  transform: rotate(499.5918367347deg) translate(102px) scale(1);
  -webkit-animation: rotate-34 5s infinite linear -8451ms;
          animation: rotate-34 5s infinite linear -8451ms;
}
.spiral:nth-child(35) {
  transform: rotate(514.2857142857deg) translate(105px) scale(1);
  -webkit-animation: rotate-35 5s infinite linear -8701ms;
          animation: rotate-35 5s infinite linear -8701ms;
}
.spiral:nth-child(36) {
  transform: rotate(528.9795918367deg) translate(108px) scale(1);
  -webkit-animation: rotate-36 5s infinite linear -8951ms;
          animation: rotate-36 5s infinite linear -8951ms;
}
.spiral:nth-child(37) {
  transform: rotate(543.6734693878deg) translate(111px) scale(1);
  -webkit-animation: rotate-37 5s infinite linear -9201ms;
          animation: rotate-37 5s infinite linear -9201ms;
}
.spiral:nth-child(38) {
  transform: rotate(558.3673469388deg) translate(114px) scale(1);
  -webkit-animation: rotate-38 5s infinite linear -9451ms;
          animation: rotate-38 5s infinite linear -9451ms;
}
.spiral:nth-child(39) {
  transform: rotate(573.0612244898deg) translate(117px) scale(1);
  -webkit-animation: rotate-39 5s infinite linear -9701ms;
          animation: rotate-39 5s infinite linear -9701ms;
}
.spiral:nth-child(40) {
  transform: rotate(587.7551020408deg) translate(120px) scale(1);
  -webkit-animation: rotate-40 5s infinite linear -9951ms;
          animation: rotate-40 5s infinite linear -9951ms;
}
.spiral:nth-child(41) {
  transform: rotate(602.4489795918deg) translate(123px) scale(1);
  -webkit-animation: rotate-41 5s infinite linear -10201ms;
          animation: rotate-41 5s infinite linear -10201ms;
}
.spiral:nth-child(42) {
  transform: rotate(617.1428571429deg) translate(126px) scale(1);
  -webkit-animation: rotate-42 5s infinite linear -10451ms;
          animation: rotate-42 5s infinite linear -10451ms;
}
.spiral:nth-child(43) {
  transform: rotate(631.8367346939deg) translate(129px) scale(1);
  -webkit-animation: rotate-43 5s infinite linear -10701ms;
          animation: rotate-43 5s infinite linear -10701ms;
}
.spiral:nth-child(44) {
  transform: rotate(646.5306122449deg) translate(132px) scale(1);
  -webkit-animation: rotate-44 5s infinite linear -10951ms;
          animation: rotate-44 5s infinite linear -10951ms;
}
.spiral:nth-child(45) {
  transform: rotate(661.2244897959deg) translate(135px) scale(1);
  -webkit-animation: rotate-45 5s infinite linear -11201ms;
          animation: rotate-45 5s infinite linear -11201ms;
}
.spiral:nth-child(46) {
  transform: rotate(675.9183673469deg) translate(138px) scale(1);
  -webkit-animation: rotate-46 5s infinite linear -11451ms;
          animation: rotate-46 5s infinite linear -11451ms;
}
.spiral:nth-child(47) {
  transform: rotate(690.612244898deg) translate(141px) scale(1);
  -webkit-animation: rotate-47 5s infinite linear -11701ms;
          animation: rotate-47 5s infinite linear -11701ms;
}
.spiral:nth-child(48) {
  transform: rotate(705.306122449deg) translate(144px) scale(1);
  -webkit-animation: rotate-48 5s infinite linear -11951ms;
          animation: rotate-48 5s infinite linear -11951ms;
}
.spiral:nth-child(49) {
  transform: rotate(720deg) translate(147px) scale(1);
  -webkit-animation: rotate-49 5s infinite linear -12201ms;
          animation: rotate-49 5s infinite linear -12201ms;
}

@-webkit-keyframes rotate-1 {
  90% {
    transform: rotate(14.693877551deg) translate(3px) scale(0.1);
  }
}

@keyframes rotate-1 {
  90% {
    transform: rotate(14.693877551deg) translate(3px) scale(0.1);
  }
}
@-webkit-keyframes rotate-2 {
  90% {
    transform: rotate(29.387755102deg) translate(6px) scale(0.2);
  }
}
@keyframes rotate-2 {
  90% {
    transform: rotate(29.387755102deg) translate(6px) scale(0.2);
  }
}
@-webkit-keyframes rotate-3 {
  90% {
    transform: rotate(44.0816326531deg) translate(9px) scale(0.3);
  }
}
@keyframes rotate-3 {
  90% {
    transform: rotate(44.0816326531deg) translate(9px) scale(0.3);
  }
}
@-webkit-keyframes rotate-4 {
  90% {
    transform: rotate(58.7755102041deg) translate(12px) scale(0.4);
  }
}
@keyframes rotate-4 {
  90% {
    transform: rotate(58.7755102041deg) translate(12px) scale(0.4);
  }
}
@-webkit-keyframes rotate-5 {
  90% {
    transform: rotate(73.4693877551deg) translate(15px) scale(0.5);
  }
}
@keyframes rotate-5 {
  90% {
    transform: rotate(73.4693877551deg) translate(15px) scale(0.5);
  }
}
@-webkit-keyframes rotate-6 {
  90% {
    transform: rotate(88.1632653061deg) translate(18px) scale(0.6);
  }
}
@keyframes rotate-6 {
  90% {
    transform: rotate(88.1632653061deg) translate(18px) scale(0.6);
  }
}
@-webkit-keyframes rotate-7 {
  90% {
    transform: rotate(102.8571428571deg) translate(21px) scale(0.7);
  }
}
@keyframes rotate-7 {
  90% {
    transform: rotate(102.8571428571deg) translate(21px) scale(0.7);
  }
}
@-webkit-keyframes rotate-8 {
  90% {
    transform: .........完整代码请登录后点击上方下载按钮下载查看