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: #383f5a1f; } .hurricane4, .hurricane3, .hurricane2, .hurricane1, .hurricane0 { background: #383f5a1f; } .fog1 { left: -50%; border-radius: 50%; background: rgba(0,0,0,0.65); box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.55); z-index: 6; } .fog2 { width: 130%; height: 130%; left: -50%; border-radius: 50%; background: rgba(255,255,255,0.45); box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.55); z-index: 5; } .circle { border-radius: 53% 47% 100% 0% / 0% 0% 100% 100% ; width: 16%; height: 16%; background: #F5F5F501; position: absolute; bottom: -5.5%; right: 0; } .polygon3 { clip-path: polygon(0 80%, 6% 54%, 9% 35%, 8% 19%, 0 0, 34% 0, 57% 36%, 37% 59%); width: 30%; height: 60%; background: #F5F5F502; background: linear-gradient( to bottom, #F5F5F525, transparent); position: absolute; bottom: -60%; right: -20%; } </style> </head> <body > <div class="spinners"> <div id="wrap" class="spinner"> </div> <div id="wrap2" class="spinner"> </div> <div id="wrap3" class="spinner"> </div> </div> <script > const N = 9; function calcFibArray(n) { if (n === 0) return [0]; if (n === 1) return [1]; let arr = [1, 1]; for (let i = 2; i < n; i++) { arr.push(arr[i-1] + arr[i-2]); } return arr; } function calcSpiralSize(fibArr) { let n = fibArr.length; if (n === 0) return {width: 0, height: 0}; else if (n === 1) return {width: 1, height: 1}; else if (n % 2 === 0) return {width: fibArr[n-1], height: fibArr[n-1] + fibArr[n-2]}; else return {width: fibArr[n-1] + fibArr[n-2], height: fibArr[n-1]}; } function calcPositions(fibArr) { let posArr = []; let cx = fibArr.reduce((accumulator, currentValue, i) => { if (i % 4 === 2) { return accumulator + currentValue; } return accumulator; }, 0); let cy = fibArr.reduce((accumulator, currentValue, i) => { if (i % 4 === 3) return accumulator + currentValue; return accumulator; }, 0); for (let i = 0; i < fibArr.length; i++) { if (i === 0) { posArr.push({x: cx, y: cy}); } else if (i % 4 === 1) { posArr.push({ x: posArr[i-1].x - fibArr[i] + fibArr[i-1], y: posArr[i-1].y + fibArr[i-1] }); } else if (i % 4 === 2) { posArr.push({ x: posArr[i-1].x - fibArr[i], y: posArr[i-1].y - fibArr[i] + fibArr[i-1] }); } else if (i % 4 === 3) { posArr.push({ x: posArr[i-1].x, y: posArr[i-1].y - fibArr[i] }); } else { posArr.push({ x: posArr[i-1].x + fibArr[i-1], y: posArr[i-1].y }); } } return posArr; } function setSpiralSizeAttributes(e, size) { e.style.fontSize ="20x"; e.style.width = "10em"; e.style.height = 10 * (size.height / size.width) +"em"; } f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0