css实现无限斐波那契效应动画效果代码-html代码-BFW代码库

css实现无限斐波那契效应动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现无限斐波那契效应动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
	--s: 0.75vmin;
    --b: 0.5vmin;
	--c: #fff0 calc(100% - var(--b)), #239effc7 calc(100% - var(--b) + 1px) 100%,#fff0;
}

body {
	margin: 0;
	background: radial-gradient(#003763, #000);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.container {
	display: block;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	left: 0;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.container > div {
	position: absolute;
	width: 200vmax;
	height: 200vmax;
}

.spiral {
    width: 100%;
    height: 100%;
	position: absolute;
	/*** background spiral by Temani Afif ***/
    background:  
		radial-gradient(farthest-side at 100% 0   ,var(--c)),
		radial-gradient(farthest-side at 100% 100%,var(--c)),
		radial-gradient(farthest-side at 0    100%,var(--c)),
		radial-gradient(farthest-side at 0    0   ,var(--c)),
		radial-gradient(farthest-side at 100% 0   ,var(--c)),
		radial-gradient(farthest-side at 100% 100%,var(--c)),
		radial-gradient(farthest-side at 0    100%,var(--c)),
		radial-gradient(farthest-side at 0    0   ,var(--c)),
		radial-gradient(farthest-side at 100% 0   ,var(--c)),
		radial-gradient(farthest-side at 100% 100%,var(--c)),
		radial-gradient(farthest-side at 0    100%,var(--c)),
		radial-gradient(farthest-side at 0    0   ,var(--c));
	background-size:
		calc(1*var(--s)) calc(1*var(--s)),
		calc(1*var(--s)) calc(1*var(--s)),
		calc(2*var(--s)) calc(2*var(--s)),
		calc(3*var(--s)) calc(3*var(--s)),
		calc(5*var(--s)) calc(5*var(--s)),
		calc(8*var(--s)) calc(8*var(--s)),
		calc(13*var(--s)) calc(13*var(--s)),
		calc(21*var(--s)) calc(21*var(--s)),
		calc(34*var(--s)) calc(34*var(--s)),
		calc(55*var(--s)) calc(55*var(--s)),
		calc(89*var(--s)) calc(89*var(--s)),
		calc(144*var(--s)) calc(144*var(--s));
	background-position:
		calc(100vmax + 0*var(--s)) calc(100vmax + 0*var(--s)),
		calc(100vmax + 0*var(--s)) calc(100vmax - 1*var(--s)),
		calc(100vmax + 1*var(--s)) calc(100vmax - 1*var(--s)),
		calc(100vmax + 0*var(--s)) calc(100vmax + 1*var(--s)),
		calc(100vmax - 5*var(--s)) calc(100vmax - 1*var(--s)),
		calc(100vmax - 5*var(--s)) calc(100vmax - 9*var(--s)),
		calc(100vmax + 3*var(--s)) calc(100vmax - 9*var(--s)),
		calc(100vmax - 5*var(-.........完整代码请登录后点击上方下载按钮下载查看