webgl实现燃烧的火圈鼠标悬浮点击交互动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现燃烧的火圈鼠标悬浮点击交互动画效果代码,鼠标悬浮和点击会出现炫酷的动画效果。
代码标签: webgl 燃烧 火圈 鼠标 悬浮 点击 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; } .page { background: radial-gradient(#ACB6E5, #74ebd5); font-family: sans-serif; color: #eeeeee; } canvas#ring_shape-canvas { display: block; z-index: 2; } .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2vh; text-align: center; z-index: 2; } .control { position: absolute; top: 0; right: 0; padding: 10px; display: flex; align-items: center; font-size: .9em; opacity: .8; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="page"> <div class="title"> <div>hover & click</div> </div> <canvas id="ring_shape-canvas"></canvas> <div class="control"> <label for="transparency-switch">shader transparency</label> <input type="checkbox" id="transparency-switch"> </div> </div> <script type="x-shader/x-fragment" id="vertShader"> precision mediump float; varying vec2 vUv; attribute vec2 a_position; void main() { vUv = .5 * (a_position + 1.); gl_Position = vec4(a_position, 0.0, 1.0); } </script> <script type="x-shader/x-fragment" id="fragShader"> precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform float u_click_time; uniform vec2 u_pointer; uniform vec2 u_click; uniform float u_transparency; #define TWO_PI 6.28318530718 #define PI 3.14159265358979323846 // ---------------------------------------------.........完整代码请登录后点击上方下载按钮下载查看
网友评论0