js实现斐波那契序列动画效果代码-html代码-BFW代码库

js实现斐波那契序列动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现斐波那契序列动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100em;
  background: #000;
}

.spinners {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 100vh;
  row-gap: 3%;
  justify-items: center;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 1000px) {
  .spinners {
    grid-template-columns: 100%;
    grid-template-rows: 20em 20em 20em;
  }
}

.spinner {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%); 
/*   transform-origin: 27.2% 70.5%; */
  transform-origin: 23% 65%;
  animation: spiral-rotate 6s linear infinite;
}

@keyframes spiral-rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}

.spiral {
  margin: 0px auto;
  position: absolute;
  top: 0%;
  left: 0%;
  transform-origin: 27.2% 70.5%;
}

.top-layer {
  position: absolute;
  top: 0;
  left: 0;
}

.full-size {
  width: 100%;
  height: 100%;
}

.hurricane8 {
  border-radius: 0% 100% 42% 58% / 63% 63% 37% 37% ;
  background: #383f5a1f; 
  width: 80%;
  height: 80%;
}

.hurricane7 {
  border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
  background: #383f5a1f;
}

.hurricane6 {
  border-radius: 0% 100% 0% 100% / 0% 0% 100% 100%;
  background: #383f5a1f;
}

.hurricane5 {
  border-radius: 0% 100% 100% 0% / 0% 0% 100% 100%;
  background: #383f5a.........完整代码请登录后点击上方下载按钮下载查看