threejs实现三维彩色噪点粉尘粒子线动画效果代码
代码语言:html
所属分类:三维
代码描述:threejs实现三维彩色噪点粉尘粒子线动画效果代码
代码标签: three 三维 彩色 噪点 粉尘 粒子 线 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0px;
width:100%;
height:100%;
background-color: #292629;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #292629;
z-index:0;
}
#container canvas {
position:absolute;
z-index:5
}
#color {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
overflow: hidden;
mix-blend-mode: multiply;
z-index:-2;
opacity:1;
background: linear-gradient(135deg, #fbc3a1 14%,#f6f3a0 27%,#a1ddfb 41%,#b6a0f2 57%,#f39fd6 71%,#fbc3a1 87%);
pointer-events:none;
background-size:400% 400%;
-webkit-animation: movement 10s ease-out infinite;
-moz-animation: movement 10s ease-out infinite;
animation: movement 10s ease-out infinite;
}
@-webkit-keyframes movement {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes movement {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes movement {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#statsCon {
position: absolute;
width: 80px;
height: 46p.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0