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