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