gsap+perlin实现彩色噪点波动动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap+perlin实现彩色噪点波动动画效果代码

代码标签: gsap perlin 彩色 噪点 波动 动画

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

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

<head>
 
<meta charset="UTF-8">
 


 
 
<style>
html
, body {
 
margin: 0;
 
padding: 0;
 
width: 100%;
 
height: 100%;
 
background:#090922;
}

#fixed-bg {
 
position: fixed;
 
left:50%;
 
top:50%;
 
transform:translate(-50%, -50%);
 
width:80vw;
 
height:80vh;
}

canvas
{
 
position: absolute;
 
top:50%;
 
left:50%;
 
transform:translate(-50%, -50%);
 
aspect-ratio: 1;
 
width: auto;
 
height: 100%;
}
@media (max-aspect-ratio: 1) {
  canvas
{
   
width: 100%;
   
height: auto;
 
}
}
</style>



 
 
</head>

<body translate="no">
 
<div id="fixed-bg">
 
<canvas id="c"></canvas>
</div>
<script type="text/javascript" src="//repo.bfw..........完整代码请登录后点击上方下载按钮下载查看

网友评论0