风火轮旋转动画特效-html代码-BFW代码库

风火轮旋转动画特效

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Radiation Vibe</title>
    <style>
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

</head>
<body translate="no">
    <body>
        <canvas id="canvas"></canvas>
    </body>

    <script id=>
        var canvas = document.getElementById("canvas");
        canvas.width = Math.min(window.innerWidth, window.innerHeight);
        canvas.height = canvas.width;
        var gl = canvas.getContext("webgl");

        //Time
        var dt = 0.004;
        var time = 3.0;

        //************** Shader sources **************
        var vertexSource = `
        attribute vec2 position;
        void main() {
        gl_Position = vec4(position, 0.0, 1.0);
        }
        `;

        var fragmentSource = `
        #define PI 3.14159265358979323846
        precision highp float;

        uniform float width;
        uniform float height;
        vec2 resolution = vec2(width, height);
        uniform float time;

        vec2 rotate(vec2 _st, float _angle) {
        _st -= 0.5;
        _st =  mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st;
        _st.y += 0.5;
        _st.x += .5;
        return _st;
        }

        void main(){

        //set up positions and time
        vec2 uv = gl_FragCoord.xy/resolution.xy;
        float t = mod(time, 4.0*PI);
        t = t * sin(PI/5.0);
        vec2 pos = uv;
        pos = vec2(0.5, 0.5)-pos;

        //calculate distances and angles
        float d = length(pos);/*distance from center*/
        float id = 1.0 - d;/*inverse d, greater near the center*/
        float theta = -(atan(pos.y, pos.x));
        float rot = (2.0*PI*(id+1.0))*(t)+(6.0*theta);

        //rotate both positions
        pos = rotate(pos, -rot);
        uv = rotate(uv, -rot);

        //motion
        for(float i = 1.0; i < 12.0; i+=1.0){.........完整代码请登录后点击上方下载按钮下载查看