js实现三重圆形棋盘格图案变换动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现三重圆形棋盘格图案变换动画效果代码

代码标签: 圆形 棋盘格 图案 变换 动画 效果

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  display: flex;
  margin:0;
  height: 100vh;
}

shader-art {
  display: block;
  width: 100%;
  height: 100%;
}

shader-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>



</head>

<body >
  <shader-art autoplay dpr="auto">
  <uniform type="float" name="zoom" value="3." min="1." max="30." step=".1" />
  <uniform type="color" name="color" value="#cc66ff" />
  <uniform type="color" name="background" value="#663399" />
  <script type="buffer" name="position" data-size="2">
    [-1, 1, -1,-1, 1,1, 1, 1, -1,-1, 1,-1]
  </script>
  <script type="buffer" name="uv" data-size="2">
    [ 0, 0,  0, 1, 1,0, 1, 0,  0, 1, 1, 1]
  </script>
  <script type="vert">
    precision highp float;
    attribute vec4 position;
    attribute vec2 uv;
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = position;
    }
  </scr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0