html5+CSS3 Canvas动画大全

已于 2024-10-04 12:55:22 修改
阅读量1.2k 收藏 27
点赞数 20
分类专栏： 前端设计 文章标签： 前端 css3 html
于 2024-08-16 12:52:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dp6558dfggbhhn_/article/details/141256757
版权

1.赛朋博客赛车动画

98bf79ce59e67ebaaac3956e867f1e82.png

 源码分享：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赛车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden;
            background: #000000;
        }
        .full-screen-3d-example {
            opacity: 0;
            transition: opacity 1s ease-out;
        }
        .full-screen-3d-example.-loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
<div id='root' class='full-screen-3d-example'></div>
<script src='https://unpkg.com/three@0.146.0/build/three.min.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/shaders/CopyShader.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/shaders/LuminosityHighPassShader.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/postprocessing/UnrealBloomPass.js'></script>
<script src='https://unpkg.com/three@0.146.0/examples/js/objects/Reflector.js'></script>
</body>
<script>
    function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classStaticPrivateMethodGet(receiver, classConstructor, method) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}return method;}function _classPrivateMethodGet(receiver, privateSet, fn) {if (!privateSet.has(receiver)) {throw new TypeError("attempted to get private field on non-instance");}return fn;}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const { THREE } = window;
    
    function isMobile() {
        let check = false;
        (function (a) {if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;})(navigator.userAgent || navigator.vendor || window.opera);
        return check;
    }
    const IS_MOBILE_DEVICE = isMobile();
    const FLAGS = Object.freeze({
        ENABLE_SHADOWS: !IS_MOBILE_DEVICE,
        ENABLE_BLOOM: !IS_MOBILE_DEVICE,
        ENABLE_NOISE: !IS_MOBILE_DEVICE });
    const COLOR_PALETTE = Object.freeze({
        black: 0x010101,
        white: 0xEEEEEE,
        color1: 0xF72585,
        color2: 0xB5179E,
        color3: 0x7209B7,
        color4: 0x560BAD,
        color5: 0x480CA8,
        color6: 0x3A0CA3,
        color7: 0x3F37C9,
        color8: 0x4361EE,
        color9: 0x4895EF,
        color10: 0x4CC9F0 });
    const COLOR_PALETTE_GLSL = Object.freeze({
        black: 'vec4(0.04, 0.04, 0.04, 1.0)',
        white: 'vec4(0.933, 0.933, 0.933, 1.0)',
        color1: 'vec4(0.969, 0.145, 0.522, 1.0)',
        color2: 'vec4(0.71, 0.09, 0.62, 1.0)',
        color3: 'vec4(0.447, 0.035, 0.718, 1.0)',
        color4: 'vec4(0.337, 0.043, 0.678, 1.0)',
        color5: 'vec4(0.282, 0.047, 0.659, 1.0)',
        color6: 'vec4(0.227, 0.047, 0.639, 1.0)',
        color7: 'vec4(0.247, 0.216, 0.788, 1.0)',
        color8: 'vec4(0.263, 0.38, 0.933, 1.0)',
        color9: 'vec4(0.282, 0.584, 0.937, 1.0)',
        color10: 'vec4(0.298, 0.788, 0.941, 1.0)' });
    class DefaultMaterial extends THREE.MeshStandardMaterial {
        constructor() {
            super({
                color: COLOR_PALETTE.white });
        }}
    class CarMaterial extends THREE.MeshStandardMaterial {
        constructor() {
            super({
                color: COLOR_PALETTE.black });
        }}
    
    class LightMaterial extends THREE.MeshStandardMaterial {
        constructor() {
            super({
                color: COLOR_PALETTE.color1 });
        }}
    
    class WheelMaterial extends THREE.MeshStandardMaterial {
        constructor() {
            super({
                color: COLOR_PALETTE.black });
        }}
    
    class MountainMaterial extends THREE.MeshBasicMaterial {
        constructor() {
            super({
                color: COLOR_PALETTE.black });
        }}
    
    class CustomMaterial extends THREE.MeshStandardMaterial {
        onBeforeCompile(shader) {
            shader.uniforms.uTime = { value: 0.0 };
            shader.vertexShader = shader.vertexShader.replace(
                '#include <uv_pars_vertex>',
                `varying vec2 vUv;
            uniform float uTime;`);
            shader.vertexShader = shader.vertexShader.replace(
                '#include <uv_vertex>',
                'vUv = uv;');
            shader.fragmentShader = shader.fragmentShader.replace(
                'varying vec3 vViewPosition;',
                `varying vec3 vViewPosition;
            varying vec2 vUv;
            uniform float uTime;`);
            this.userData.shader = shader;
        }}

    class CustomTransparentMaterial extends CustomMaterial {
        constructor() {
            super({
                transparent: true });
        }}
    
    class RoadMaterial extends CustomTransparentMaterial {
        onBeforeCompile(shader) {
            super.onBeforeCompile(shader);
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <map_fragment>',
                `
            diffuseColor = ${COLOR_PALETTE_GLSL.black};
            float width = 0.06;
            bool isInCenter = abs(0.5 - vUv.x) < (0.01 + width / 2.0);
            bool isInRoad = abs(0.5 - vUv.x) < (width / 2.0);
            if (isInCenter) {
                diffuseColor = ${COLOR_PALETTE_GLSL.color9};
            }
            if (isInRoad) {
                diffuseColor = ${COLOR_PALETTE_GLSL.black};
                diffuseColor.a = 0.8;
                bool isInLine = (abs(0.5 - vUv.x + width / 6.0) < 0.0003);
                bool isInDashedLine = (abs(0.5 - vUv.x - width / 6.0) < 0.0003)
                    && (sin(100.0 * vUv.y - 10.0 * uTime) > 0.3);
                if (isInLine || isInDashedLine) {
                    diffuseColor = ${COLOR_PALETTE_GLSL.color10};
                }
            }
            `);
            
            this.userData.shader = shader;
        }}
    
    class SunMaterial extends CustomTransparentMaterial {
        onBeforeCompile(shader) {
            super.onBeforeCompile(shader);
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <map_fragment>',
                `
            diffuseColor = vec4(0.0);
            bool isInSun = distance(vUv.xy, vec2(0.5, 0.5)) < 0.5;
            if (isInSun) {
                diffuseColor = ${COLOR_PALETTE_GLSL.color1};
                float delta = 0.2 * (1.0 - vUv.y);
                diffuseColor += vec4(delta, delta, 0.0, 0.0);
                bool isInLine = sin(100.0 * vUv.y) * vUv.y > 0.3;
                if (isInLine) {
                    diffuseColor = ${COLOR_PALETTE_GLSL.color3};
                }
            }
            `);
            
            this.userData.shader = shader;
        }}

    class BuildingMaterialA extends CustomMaterial {
        onBeforeCompile(shader) {
            super.onBeforeCompile(shader);
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <map_fragment>',
                `
            diffuseColor = ${COLOR_PALETTE_GLSL.black};
            bool isInWindow = vUv.y > 0.09
                && (sin(31.415 * (vUv.x - 0.05)) > 0.5)
                && (sin(100.0 * vUv.y) > 0.5);
            if (isInWindow) {
                diffuseColor = ${COLOR_PALETTE_GLSL.color7};
                if (vUv.x > 0.4 && vUv.x < 0.6) {
                    diffuseColor = ${COLOR_PALETTE_GLSL.color10};
                }
            }
            `);
            
            this.userData.shader = shader;
        }}

    class BuildingMaterialB extends CustomMaterial {
        onBeforeCompile(shader) {
            super.onBeforeCompile(shader);
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <map_fragment>',
                `
            diffuseColor = ${COLOR_PALETTE_GLSL.black};
            bool isInWindow = vUv.y > 0.1
                && vUv.y < 0.5
                && (sin(50.0 * 3.1415 * (vUv.x - 0.05)) > -0.8)
                && (sin(50.0 * vUv.y) > 0.5);
            if (isInWindow) {
                diffuseColor = ${COLOR_PALETTE_GLSL.color1};
                if (vUv.y < 0.3) {
                    diffuseColor = ${COLOR_PALETTE_GLSL.color4};
                }
            }
            `);
            
            this.userData.shader = shader;
        }}

    class BuildingMaterialC extends CustomMaterial {
        onBeforeCompile(shader) {
            super.onBeforeCompile(shader);
         
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <map_fragment>',
                `
            diffuseColor = ${COLOR_PALETTE_GLSL.black};
            bool isInWindow = vUv.y > 0.5
                && vUv.y < 0.8
                && (sin(5.0 * 3.1415 * (vUv.x - 0.05)) > -0.8)
                && (sin(50.0 * vUv.y) > 0.5);
            if (isInWindow) {
                diffuseColor = ${COLOR_PALETTE_GLSL.color9};
            }
            `);
            
            this.userData.shader = shader;
        }}

    class BuildingMaterialD extends CustomMaterial {
        onBeforeCompile(shader) {
            super.onBeforeCompile(shader);
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <map_fragment>',
                `
            diffuseColor = ${COLOR_PALETTE_GLSL.black};
            bool isInWindow = vUv.y > 0.1
                && (sin(50.0 * vUv.y) > -0.8);
            if (isInWindow) {
                diffuseColor = ${COLOR_PALETTE_GLSL.color5};
            }
            `);

            this.userData.shader = shader;
        }}

    class MaterialsLibrary {}_defineProperty(MaterialsLibrary, "default",
        new DefaultMaterial());_defineProperty(MaterialsLibrary, "road",
        new RoadMaterial());_defineProperty(MaterialsLibrary, "sun",
        new SunMaterial());_defineProperty(MaterialsLibrary, "mountain",
        new MountainMaterial());_defineProperty(MaterialsLibrary, "car",
        new CarMaterial());_defineProperty(MaterialsLibrary, "wheel",
        new WheelMaterial());_defineProperty(MaterialsLibrary, "light",
        new LightMaterial());_defineProperty(MaterialsLibrary, "buildingA",
        new BuildingMaterialA());_defineProperty(MaterialsLibrary, "buildingB",
        new BuildingMaterialB());_defineProperty(MaterialsLibrary, "buildingC",
        new BuildingMaterialC());_defineProperty(MaterialsLibrary, "buildingD",
        new BuildingMaterialD());

    class Road extends THREE.Group {
        constructor() {
            super();
            const geometry = new THREE.PlaneGeometry();
            const material = MaterialsLibrary.road;
            const road = new THREE.Mesh(geometry, material);
            road.scale.set(200, 200, 1);
            road.rotation.set(-Math.PI / 2, 0, 0);
            if (FLAGS.ENABLE_SHADOWS) {
                road.receiveShadow = true;
            }
            this.add(road);
            const reflector = new THREE.Reflector(
                new THREE.PlaneGeometry(10, 10),
                {
                    color: new THREE.Color(0x7f7f7f),
                    textureWidth: window.innerWidth * window.devicePixelRatio,
                    textureHeight: window.innerHeight * window.devicePixelRatio });
            reflector.position.set(0, -0.1, 0);
            reflector.scale.set(200, 200, 1);
            reflector.rotation.set(-Math.PI / 2, 0, 0);
            this.add(reflector);
        }}

    class Sun extends THREE.Group {
        constructor() {
            super();
            const geometry = new THREE.PlaneGeometry();
            const material = MaterialsLibrary.sun;
            const sun = new THREE.Mesh(geometry, material);
            sun.scale.set(50, 50, 1);
            this.add(sun);
        }}

    class Mountain extends THREE.Group {
        constructor() {
            super();
            const material = MaterialsLibrary.mountain;
            const shape = new THREE.Shape();
            shape.moveTo(0, 0);
            shape.lineTo(100, 0);
            shape.lineTo(100, 50);
            shape.lineTo(50, 10);
            shape.lineTo(20, 15);
            shape.lineTo(15, 5);
            shape.lineTo(10, 10);
            shape.lineTo(0, 0);
            shape.lineTo(-5, 3);
            shape.lineTo(-10, 10);
            shape.lineTo(-12, 8);
            shape.lineTo(-100, 50);
            shape.lineTo(-100, 0);
            shape.lineTo(0, 0);
            const geometry = new THREE.ExtrudeGeometry(shape);
            const mountain = new THREE.Mesh(geometry, material);
            this.add(mountain);
        }}

    class Car extends THREE.Group {
        constructor() {
            super();
            {
                const material = MaterialsLibrary.car;
                const shape = new THREE.Shape();
                shape.moveTo(0, 0);
                shape.lineTo(4, 0);
                shape.lineTo(3.8, 0.3);
                shape.lineTo(-0.1, 0.7);
                shape.lineTo(0, 0);
                const geometry = new THREE.ExtrudeGeometry(shape, {
                    depth: 1.5,
                    bevelThickness: 0.2 });

                const body = new THREE.Mesh(geometry, material);
                body.position.set(0, 0.3, 0);
                this.add(body);
            }
            {
                const material = MaterialsLibrary.car;
                const geometry = new THREE.CylinderGeometry(0.6, 1.2, 0.5, 4);
                const roof = new THREE.Mesh(geometry, material);
                roof.position.set(1.5, 1, 0.8);
                roof.rotation.set(0, Math.PI / 4, 0);
                this.add(roof);
            }
            {
                const material = MaterialsLibrary.light;
                const geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.1, 12);
                const light1 = new THREE.Mesh(geometry, material);
                light1.position.set(-0.2, 0.9, 0);
                light1.rotation.set(0, 0, Math.PI / 2);
                this.add(light1);
                const light2 = new THREE.Mesh(geometry, material);
                light2.position.set(-0.2, 0.9, 0.3);
                light2.rotation.set(0, 0, Math.PI / 2);
                this.add(light2);
                const light3 = new THREE.Mesh(geometry, material);
                light3.position.set(-0.2, 0.9, 1.2);
                light3.rotation.set(0, 0, Math.PI / 2);
                this.add(light3);
                const light4 = new THREE.Mesh(geometry, material);
                light4.position.set(-0.2, 0.9, 1.5);
                light4.rotation.set(0, 0, Math.PI / 2);
                this.add(light4);
            }
            {
                const material = MaterialsLibrary.wheel;
                const geometry = new THREE.CylinderGeometry(1, 1, 1, 12);
                const wheel1 = new THREE.Mesh(geometry, material);
                wheel1.scale.set(0.33, 2, 0.33);
                wheel1.position.set(3, 0.33, 0.75);
                wheel1.rotation.set(Math.PI / 2, 0, 0);
                this.add(wheel1);
                const wheel2 = new THREE.Mesh(geometry, material);
                wheel2.scale.set(0.33, 2, 0.33);
                wheel2.position.set(0.7, 0.33, 0.75);
                wheel2.rotation.set(Math.PI / 2, 0, 0);
                this.add(wheel2);
            }
        }}

    class BuildingA extends THREE.Group {
        constructor() {
            super();
            const material = MaterialsLibrary.buildingA;
            const geometry = new THREE.BoxGeometry();
            const building = new THREE.Mesh(geometry, material);
            building.scale.set(10, 15, 10);
            building.position.set(0, -3, 0);
            if (FLAGS.ENABLE_SHADOWS) {
                building.castShadow = true;
            }
            this.add(building);
            const roofGeometry = new THREE.ConeGeometry(5, 15, 7);
            const roof = new THREE.Mesh(roofGeometry, material);
            roof.position.set(0, 5, 0);
            this.add(roof);
        }}

    class BuildingB extends THREE.Group {
        constructor() {
            super();
            const material = MaterialsLibrary.buildingB;
            const geometry = new THREE.CylinderGeometry();
            const building = new THREE.Mesh(geometry, material);
            building.scale.set(5, 15, 5);
            building.position.set(0, -3, 0);
            if (FLAGS.ENABLE_SHADOWS) {
                building.castShadow = true;
            }
            this.add(building);
            const roofGeometry = new THREE.SphereGeometry(7);
            const roof = new THREE.Mesh(roofGeometry, material);
            roof.position.set(0, 2, 0);
            roof.rotation.set(0, 0.3, 0);
            this.add(roof);
        }}

    class BuildingC extends THREE.Group {
        constructor() {
            super();
            const material = MaterialsLibrary.buildingC;
            const geometry = new THREE.BoxGeometry();
            const building = new THREE.Mesh(geometry, material);
            building.scale.set(5, 5, 5);
            building.position.set(0, -8, 0);
            if (FLAGS.ENABLE_SHADOWS) {
                building.castShadow = true;
            }
            this.add(building);
        }}

    class BuildingD extends THREE.Group {
        constructor() {
            super();
            const material = MaterialsLibrary.buildingD;
            const geometry = new THREE.ConeGeometry(1, 1, 3);
            const building = new THREE.Mesh(geometry, material);
            building.scale.set(5, 20, 5);
            building.rotation.set(0, 1, 0);
            if (FLAGS.ENABLE_SHADOWS) {
                building.castShadow = true;
            }
            this.add(building);
        }}var _initBuilding = new WeakSet();

    class City extends THREE.Group {
        constructor() {
            super();_initBuilding.add(this);
            for (let z = 0; z < 200; z += 20) {
                for (let x = 70; x >= 10; x -= 20) {
                    _classPrivateMethodGet(this, _initBuilding, _initBuilding2).call(this, x, z);
                }
                for (let x = 120; x <= 180; x += 20) {
                    _classPrivateMethodGet(this, _initBuilding, _initBuilding2).call(this, x, z);
                }
            }
        }
  update() {
            this.children.forEach(building => {
                const { x, z } = building.position;
                let newZ = z - 0.5;
                if (newZ < 0) {
                    newZ = 200;
                }
                const y = newZ <= 150 ? 10 : 10 + 20 * ((150 - newZ) / 50);
                building.position.set(x, y, newZ);
            });
        }}var _getRandomBuilding = function _getRandomBuilding() {const choice = Math.random();if (choice < 0.2) {return new BuildingA();}if (choice < 0.3) {return new BuildingB();}if (choice < 0.9) {return new BuildingC();}return new BuildingD();};var _initBuilding2 = function _initBuilding2(x, z) {const building = _classStaticPrivateMethodGet(City, City, _getRandomBuilding).call(City);building.position.set(x, 20 / 2, z);this.add(building);};

    class Stars extends THREE.Group {
        constructor() {
            super();
            const geometry = new THREE.SphereGeometry();
            const material = MaterialsLibrary.light;
            for (let x = -300; x < 300; x += 30) {
                for (let y = 0; y < 300; y += 30) {
                    const star = new THREE.Mesh(geometry, material);
                    const dx = 25 * Math.random();
                    const dy = 25 * Math.random();
                    const s = Math.random();
                    star.scale.set(s, s, s);
                    star.position.set(x + dx, y + dy, 0);
                    this.add(star);
                }
            }
        }}

    class ObjectsLibrary {}_defineProperty(ObjectsLibrary, "road",
        new Road());_defineProperty(ObjectsLibrary, "sun",
        new Sun());_defineProperty(ObjectsLibrary, "mountain",
        new Mountain());_defineProperty(ObjectsLibrary, "car",
        new Car());_defineProperty(ObjectsLibrary, "city",
        new City());_defineProperty(ObjectsLibrary, "stars",
        new Stars());var _savedObjects = new WeakMap();var _initObjects = new WeakSet();var _initLights = new WeakSet();

    class SandboxWorld extends THREE.Group {

        constructor() {
            super();_initLights.add(this);_initObjects.add(this);_savedObjects.set(this, { writable: true, value: void 0 });
            _classPrivateMethodGet(this, _initObjects, _initObjects2).call(this);
            _classPrivateMethodGet(this, _initLights, _initLights2).call(this);
        }
        update() {
            const t = performance.now() / 1000;
            _classPrivateFieldGet(this, _savedObjects).car.position.set(0.7 + 0.2 * Math.sin(t), 0, 10);
            _classPrivateFieldGet(this, _savedObjects).city.update();
        }}var _initObjects2 = function _initObjects2() {const { road, car, sun, city, mountain, stars } = ObjectsLibrary;road.position.set(0, 0, 100);sun.position.set(0, 10, 200);sun.rotation.set(-Math.PI, 0, 0);city.position.set(-100, 0, 0);mountain.position.set(0, 0, 200);car.position.set(0.7, 0, 10);car.rotation.set(0, -Math.PI / 2, 0);stars.position.set(0, 0, 250);this.add(road);this.add(sun);this.add(car);this.add(city);this.add(mountain);this.add(stars);_classPrivateFieldSet(this, _savedObjects, { car, city });};var _initLights2 = function _initLights2() {const ambient = new THREE.AmbientLight({ color: COLOR_PALETTE.color3, intensity: 0.1 });this.add(ambient);const point = new THREE.PointLight({ color: COLOR_PALETTE.color1, intensity: 5, decay: 0.5, distance: 300 });point.position.set(0, 30, 180);if (FLAGS.ENABLE_SHADOWS) {point.castShadow = true;}this.add(point);};var _root = new WeakMap();var _frameRequestId = new WeakMap();var _scene = new WeakMap();var _world = new WeakMap();var _camera = new WeakMap();var _cameraData = new WeakMap();var _renderer = new WeakMap();var _composer = new WeakMap();var _initScene = new WeakSet();var _initObjects3 = new WeakSet();var _initCamera = new WeakSet();var _initRenderer = new WeakSet();var _initComposer = new WeakSet();var _initRenderPass = new WeakSet();var _initBloomPass = new WeakSet();var _initShaderPass = new WeakSet();var _initEventListeners = new WeakSet();var _onWindowResize = new WeakSet();var _onMouseMove = new WeakSet();var _updateEverything = new WeakSet();var _render = new WeakSet();

    class FullScreen3DExample {
        constructor(root) {_render.add(this);_updateEverything.add(this);_onMouseMove.add(this);_onWindowResize.add(this);_initEventListeners.add(this);_initShaderPass.add(this);_initBloomPass.add(this);_initRenderPass.add(this);_initComposer.add(this);_initRenderer.add(this);_initCamera.add(this);_initObjects3.add(this);_initScene.add(this);_root.set(this, { writable: true, value: void 0 });_frameRequestId.set(this, { writable: true, value: void 0 });_scene.set(this, { writable: true, value: void 0 });_world.set(this, { writable: true, value: void 0 });_camera.set(this, { writable: true, value: void 0 });_cameraData.set(this, { writable: true, value: void 0 });_renderer.set(this, { writable: true, value: void 0 });_composer.set(this, { writable: true, value: void 0 });
            _classPrivateFieldSet(this, _root, root);
            _classPrivateFieldGet(this, _root).classList.add(FullScreen3DExample.CSS_ROOT);
            _classPrivateMethodGet(this, _initScene, _initScene2).call(this);
            _classPrivateMethodGet(this, _initObjects3, _initObjects4).call(this);
            _classPrivateMethodGet(this, _initCamera, _initCamera2).call(this);
            _classPrivateMethodGet(this, _initRenderer, _initRenderer2).call(this);
            _classPrivateMethodGet(this, _initComposer, _initComposer2).call(this);
            _classPrivateMethodGet(this, _initEventListeners, _initEventListeners2).call(this);
            _classPrivateMethodGet(this, _onWindowResize, _onWindowResize2).call(this);
            _classPrivateFieldGet(this, _root).classList.add(FullScreen3DExample.CSS_ROOT_LOADED_VARIANT);
            _classPrivateMethodGet(this, _render, _render2).call(this);
        }
      start() {
            _classPrivateMethodGet(this, _render, _render2).call(this);
            _classPrivateFieldSet(this, _frameRequestId, requestAnimationFrame(this.start.bind(this)));
        }
        stop() {
            cancelAnimationFrame(_classPrivateFieldGet(this, _frameRequestId));
        }}_defineProperty(FullScreen3DExample, "CSS_ROOT", 'full-screen-3d-example');_defineProperty(FullScreen3DExample, "CSS_ROOT_LOADED_VARIANT", '-loaded');var _initScene2 = function _initScene2() {_classPrivateFieldSet(this, _scene, new THREE.Scene());};var _initObjects4 = function _initObjects4() {_classPrivateFieldSet(this, _world, new SandboxWorld());_classPrivateFieldGet(this, _scene).add(_classPrivateFieldGet(this, _world));};var _initCamera2 = function _initCamera2() {const fov = 45;const aspect = window.innerWidth / window.innerHeight;const near = 1;const far = 1000;_classPrivateFieldSet(this, _camera, new THREE.PerspectiveCamera(fov, aspect, near, far));_classPrivateFieldGet(this, _camera).position.set(0, 2, 1);_classPrivateFieldGet(this, _camera).lookAt(0, 0, 200);_classPrivateFieldGet(this, _camera).updateProjectionMatrix();_classPrivateFieldSet(this, _cameraData, { positionX: 0, positionY: 2 });};var _initRenderer2 = function _initRenderer2() {const clearColor = COLOR_PALETTE.black;const clearColorAlpha = 1;_classPrivateFieldSet(this, _renderer, new THREE.WebGLRenderer({ alpha: true, logarithmicDepthBuffer: true }));_classPrivateFieldGet(this, _renderer).setClearColor(clearColor, clearColorAlpha);_classPrivateFieldGet(this, _renderer).setPixelRatio(window.devicePixelRatio);if (FLAGS.ENABLE_SHADOWS) {_classPrivateFieldGet(this, _renderer).shadowMap.enabled = true;_classPrivateFieldGet(this, _renderer).shadowMap.type = THREE.PCFSoftShadowMap;}_classPrivateFieldGet(this, _root).appendChild(_classPrivateFieldGet(this, _renderer).domElement);};var _initComposer2 = function _initComposer2() {const width = window.innerWidth;const height = window.innerHeight;_classPrivateFieldSet(this, _composer, new THREE.EffectComposer(_classPrivateFieldGet(this, _renderer)));_classPrivateFieldGet(this, _composer).setSize(width, height);_classPrivateMethodGet(this, _initRenderPass, _initRenderPass2).call(this);if (FLAGS.ENABLE_BLOOM) {_classPrivateMethodGet(this, _initBloomPass, _initBloomPass2).call(this);}if (FLAGS.ENABLE_NOISE) {_classPrivateMethodGet(this, _initShaderPass, _initShaderPass2).call(this);}};var _initRenderPass2 = function _initRenderPass2() {const renderPass = new THREE.RenderPass(_classPrivateFieldGet(this, _scene), _classPrivateFieldGet(this, _camera));_classPrivateFieldGet(this, _composer).addPass(renderPass);};var _initBloomPass2 = function _initBloomPass2() {const width = window.innerWidth;const height = window.innerHeight;const resolution = new THREE.Vector2(width, height);const strength = 0.8;const radius = 0.5;const threshold = 0.1;const bloomPass = new THREE.UnrealBloomPass(resolution, strength, radius, threshold);_classPrivateFieldGet(this, _composer).addPass(bloomPass);};var _initShaderPass2 = function _initShaderPass2() {const pass = new THREE.ShaderPass({ uniforms: { tDiffuse: { type: 't', value: null }, uTime: { value: 1 } }, vertexShader: `
                varying vec2 vUv;
                void main() {
                    vUv = uv;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }`, fragmentShader: `
                uniform float uTime;
                uniform sampler2D tDiffuse;
                varying vec2 vUv;
                float rand(vec2 seed);
                float noise(vec2 position);
                void main() {
                    vec4 color = texture2D(tDiffuse, vUv);
                    float d = 0.05 * noise(50.0 * (100.0 * uTime + vec2(vUv.x, 20.0 * vUv.y)));
                    color = vec4(color.r - d, color.g - d, color.b - d, 1.0);
                    gl_FragColor = color;
                }
                float rand(vec2 seed) {
                    return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123);
                }
                float noise(vec2 position) {
                    vec2 blockPosition = floor(position);
                    float topLeftValue     = rand(blockPosition);
                    float topRightValue    = rand(blockPosition + vec2(1.0, 0.0));
                    float bottomLeftValue  = rand(blockPosition + vec2(0.0, 1.0));
                    float bottomRightValue = rand(blockPosition + vec2(1.0, 1.0));
                    vec2 computedValue = smoothstep(0.0, 1.0, fract(position));
                    return mix(topLeftValue, topRightValue, computedValue.x)
                        + (bottomLeftValue  - topLeftValue)  * computedValue.y * (1.0 - computedValue.x)
                        + (bottomRightValue - topRightValue) * computedValue.x * computedValue.y;
                }
            ` });pass.renderToScreen = true;_classPrivateFieldGet(this, _composer).addPass(pass);};var _initEventListeners2 = function _initEventListeners2() {window.addEventListener('resize', _classPrivateMethodGet(this, _onWindowResize, _onWindowResize2).bind(this));document.addEventListener('mousemove', _classPrivateMethodGet(this, _onMouseMove, _onMouseMove2).bind(this));};var _onWindowResize2 = function _onWindowResize2() {const width = window.innerWidth;const height = window.innerHeight;_classPrivateFieldGet(this, _camera).aspect = width / height;_classPrivateFieldGet(this, _camera).updateProjectionMatrix();_classPrivateFieldGet(this, _renderer).setSize(width, height);_classPrivateFieldGet(this, _composer).setSize(width, height);};var _onMouseMove2 = function _onMouseMove2(e) {_classPrivateFieldGet(this, _cameraData).positionX = 5 * (window.innerWidth / 2 - e.clientX) / window.innerWidth;_classPrivateFieldGet(this, _cameraData).positionY = 2 + 0.5 * (window.innerHeight / 2 - e.clientY) / window.innerHeight;};var _updateEverything2 = function _updateEverything2() {const t = performance.now() / 1000;_classPrivateFieldGet(this, _world).update();_classPrivateFieldGet(this, _scene).traverse(child => {if (child.isMesh) {const { shader } = child.material.userData;if (shader) {shader.uniforms.uTime.value = t;}}});_classPrivateFieldGet(this, _composer).passes.forEach(pass => {if (pass instanceof THREE.ShaderPass) {
        pass.uniforms.uTime.value = t % 10;}});{const x = _classPrivateFieldGet(this, _cameraData).positionX + 0.3 * (Math.sin(0.1 * t) + Math.sin(0.05 * t));const y = _classPrivateFieldGet(this, _cameraData).positionY + 0.3 * Math.cos(0.3 * t);_classPrivateFieldGet(this, _camera).position.set(x, y, 1);_classPrivateFieldGet(this, _camera).updateProjectionMatrix();}};var _render2 = function _render2() {_classPrivateMethodGet(this, _updateEverything, _updateEverything2).call(this);_classPrivateFieldGet(this, _composer).render(_classPrivateFieldGet(this, _scene), _classPrivateFieldGet(this, _camera));};function main() {const root = document.getElementById('root');const example = new FullScreen3DExample(root);example.start();}document.addEventListener('DOMContentLoaded', main);
</script>
</html>

 

2、粒子风暴动画

281e0edfb41d81392864eb1c62a945e1.jpg

 源码分享：

<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>炫酷多彩龙卷风风暴粒子canvas特效动画</title>
<meta name="keywords" content="炫酷,多彩,龙卷风,风暴粒子,canvas特效,特效动画" />
<meta name="description" content="炫酷多彩龙卷风风暴粒子canvas特效动画代码下载。js代码(www.jsdaima.com)" /> 
<style>
html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; }
#canvas { position: absolute; width: 100%; height: 100%; }
</style>
<style type="text/css">
:root .fdad
{ display: none !important; }
</style>
</head>
<body>
<canvas id="canvas" width="1449" height="404"></canvas>
<script>
function project3D(x,y,z,vars){var p,d;x-=vars.camX;y-=vars.camY-8;z-=vars.camZ;p=Math.atan2(x,z);d=Math.sqrt(x*x+z*z);x=Math.sin(p-vars.yaw)*d;z=Math.cos(p-vars.yaw)*d;p=Math.atan2(y,z);d=Math.sqrt(y*y+z*z);y=Math.sin(p-vars.pitch)*d;z=Math.cos(p-vars.pitch)*d;var rx1=-1000;var ry1=1;var rx2=1000;var ry2=1;var rx3=0;var ry3=0;var rx4=x;var ry4=z;var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=0.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return{x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,y:vars.cy+y/z*vars.scale,d:(x*x+y*y+z*z)}}else{return{d:-1}}}function elevation(x,y,z){var dist=Math.sqrt(x*x+y*y+z*z);if(dist&&z/dist>=-1&&z/dist<=1)return Math.acos(z/dist);return 0.00000001}function rgb(col){col+=0.000001;var r=parseInt((0.5+Math.sin(col)*0.5)*16);var g=parseInt((0.5+Math.cos(col)*0.5)*16);var b=parseInt((0.5-Math.sin(col)*0.5)*16);return"#"+r.toString(16)+g.toString(16)+b.toString(16)}function interpolateColors(RGB1,RGB2,degree){var w2=degree;var w1=1-w2;return[w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]]}function rgbArray(col){col+=0.000001;var r=parseInt((0.5+Math.sin(col)*0.5)*256);var g=parseInt((0.5+Math.cos(col)*0.5)*256);var b=parseInt((0.5-Math.sin(col)*0.5)*256);return[r,g,b]}function colorString(arr){var r=parseInt(arr[0]);var g=parseInt(arr[1]);var b=parseInt(arr[2]);return"#"+("0"+r.toString(16)).slice(-2)+("0"+g.toString(16)).slice(-2)+("0"+b.toString(16)).slice(-2)}function process(vars){if(vars.points.length<vars.initParticles)for(var i=0;i<5;++i)spawnParticle(vars);var p,d,t;p=Math.atan2(vars.camX,vars.camZ);d=Math.sqrt(vars.camX*vars.camX+vars.camZ*vars.camZ);d-=Math.sin(vars.frameNo/80)/25;t=Math.cos(vars.frameNo/300)/165;vars.camX=Math.sin(p+t)*d;vars.camZ=Math.cos(p+t)*d;vars.camY=-Math.sin(vars.frameNo/220)*15;vars.yaw=Math.PI+p+t;vars.pitch=elevation(vars.camX,vars.camZ,vars.camY)-Math.PI/2;var t;for(var i=0;i<vars.points.length;++i){x=vars.points[i].x;y=vars.points[i].y;z=vars.points[i].z;d=Math.sqrt(x*x+z*z)/1.0075;t=.1/(1+d*d/5);p=Math.atan2(x,z)+t;vars.points[i].x=Math.sin(p)*d;vars.points[i].z=Math.cos(p)*d;vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);if(vars.points[i].y>vars.vortexHeight/2||d<.25){vars.points.splice(i,1);spawnParticle(vars)}}}function drawFloor(vars){var x,y,z,d,point,a;for(var i=-25;i<=25;i+=1){for(var j=-25;j<=25;j+=1){x=i*2;z=j*2;y=vars.floor;d=Math.sqrt(x*x+z*z);point=project3D(x,y-d*d/85,z,vars);if(point.d!=-1){size=1+15000/(1+point.d);a=0.15-Math.pow(d/50,4)*0.15;if(a>0){vars.ctx.fillStyle=colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));vars.ctx.globalAlpha=a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)}}}}vars.ctx.fillStyle="#82f";for(var i=-25;i<=25;i+=1){for(var j=-25;j<=25;j+=1){x=i*2;z=j*2;y=-vars.floor;d=Math.sqrt(x*x+z*z);point=project3D(x,y+d*d/85,z,vars);if(point.d!=-1){size=1+15000/(1+point.d);a=0.15-Math.pow(d/50,4)*0.15;if(a>0){vars.ctx.fillStyle=colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));vars.ctx.globalAlpha=a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)}}}}}function sortFunction(a,b){return b.dist-a.dist}function draw(vars){vars.ctx.globalAlpha=.15;vars.ctx.fillStyle="#000";vars.ctx.fillRect(0,0,canvas.width,canvas.height);drawFloor(vars);var point,x,y,z,a;for(var i=0;i<vars.points.length;++i){x=vars.points[i].x;y=vars.points[i].y;z=vars.points[i].z;point=project3D(x,y,z,vars);if(point.d!=-1){vars.points[i].dist=point.d;size=1+vars.points[i].radius/(1+point.d);d=Math.abs(vars.points[i].y);a=.8-Math.pow(d/(vars.vortexHeight/2),1000)*.8;vars.ctx.globalAlpha=a>=0&&a<=1?a:0;vars.ctx.fillStyle=rgb(vars.points[i].color);if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)}}vars.points.sort(sortFunction)}function spawnParticle(vars){var p,ls;pt={};p=Math.PI*2*Math.random();ls=Math.sqrt(Math.random()*vars.distributionRadius);pt.x=Math.sin(p)*ls;pt.y=-vars.vortexHeight/2;pt.vy=vars.initV/20+Math.random()*vars.initV;pt.z=Math.cos(p)*ls;pt.radius=200+800*Math.random();pt.color=pt.radius/1000+vars.frameNo/250;vars.points.push(pt)}function frame(vars){if(vars===undefined){var vars={};vars.canvas=document.querySelector("canvas");vars.ctx=vars.canvas.getContext("2d");vars.canvas.width=document.body.clientWidth;vars.canvas.height=document.body.clientHeight;window.addEventListener("resize",function(){vars.canvas.width=document.body.clientWidth;vars.canvas.height=document.body.clientHeight;vars.cx=vars.canvas.width/2;vars.cy=vars.canvas.height/2},true);vars.frameNo=0;vars.camX=0;vars.camY=0;vars.camZ=-14;vars.pitch=elevation(vars.camX,vars.camZ,vars.camY)-Math.PI/2;vars.yaw=0;vars.cx=vars.canvas.width/2;vars.cy=vars.canvas.height/2;vars.bounding=10;vars.scale=500;vars.floor=26.5;vars.points=[];vars.initParticles=1000;vars.initV=.01;vars.distributionRadius=800;vars.vortexHeight=25}vars.frameNo++;requestAnimationFrame(function(){frame(vars)});process(vars);draw(vars)}frame();
</script>
 
 
</body></html>

3.爱心循环

b1f18cc91790b577ed5e24a369ffefab.jpg

 源码分享：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
              width: 100%;
              margin: 0;
              overflow: hidden;
            }
            canvas{
              display:block;
            }
        </style>
    </head>
    <body>
        <canvas id='canv'></canvas>
        <script>
            var c = document.getElementById('canv');//获取canvas的Id
            var $ = c.getContext('2d');/*设置绘制方式*/
            var u = 0;

            var go = function() {
              var sc, g, g1, i, j, p, x, y, z, w, a, cur,
                d = new Date() / 1000,
                rnd = shift(),
                rnd1 = d,
                rnd2 = 2.4,
                rnd3 = d * 0.2,
                rnd1c = Math.cos(rnd1),
                rnd1s = Math.sin(rnd1),
                rnd2c = Math.cos(rnd2),
                rnd2s = Math.sin(rnd2);
              c.width = window.innerWidth;
              c.height = window.innerHeight;
              sc = Math.max(c.width, c.height);
              $.translate(c.width * 0.5, c.height * 0.5);//从中心开始绘制
              $.scale(sc, sc);//放大最大数值
              /*线性渐变*/
              g = $.createLinearGradient(-1, -2, 1, 2);
              g.addColorStop(0.0, 'hsla(338, 95%, 25%, 1)');
              g.addColorStop(0.5, 'hsla(260, 95%, 5%, 1)');
              g.addColorStop(1.0, 'hsla(338, 95%, 30%, 1)');
              $.fillStyle = g;//颜色
              $.fillRect(-0.5, -0.5, 1, 1);
              $.globalCompositeOperation = 'lighter';
              $.rotate(rnd3 % Math.PI * 2);/*旋转*/
              for (i = 0; i < 300; i += 1) {
                p = rnd();
                x = (p & 0xff) / 128 - 1;
                y = (p >>> 8 & 0xff) / 128 - 1;
                z = (p >>> 16 & 0xff) / 128 - 1;
                w = (p >>> 24 & 0xff) / 256;
                z += d * 0.5;
                z = (z + 1) % 2 - 1;
                a = (z + 1) * 0.5;
                if (a < 0.9) {
                  $.globalAlpha = a / 0.7;
                }else {
                  a -= 0.9;
                  $.globalAlpha = 1 - a / 0.1;
                }
                cur = x * rnd1c + y * rnd1s;
                y = x * rnd1s - y * rnd1c;
                x = cur;
                cur = y * rnd2c + z * rnd2s;
                z = y * rnd2s - z * rnd2c;
                y = cur;
                z -= 0.65;
                if (z >= 0) {
                  continue;
                }
                sc = 0.1 / z;
                x *= sc;
                y *= sc;
                $.save();
                g1 = $.createRadialGradient(1, 1, 2, 1, 1, 1);
                g1.addColorStop(0.0, 'hsla('+i+', 70%, 40%,.8)');
                g1.addColorStop(0.5, 'hsla('+i+', 75%, 50%, 1)');
                g1.addColorStop(1.0, 'hsla('+i+', 80%, 60%, .8)');
                $.fillStyle = g1;
                $.translate(x, y);
                $.scale(sc * 0.017, sc * 0.017);
                $.beginPath();
                $.moveTo(2, 0);
                for (j = 0; j < 10; j += 1) {
                  $.rotate(Math.PI*2 * 0.1);
                  $.lineTo(j % 2 + 1, 0);
                }
                $.arc(10, 10, 1, 0, Math.PI * 2);    
                $.rotate(Math.PI * 2 * 0.1);
                $.closePath();
                $.fill();
                $.restore();
              }
            };
            /*
            Marsaglia's Xorshift128 PRG: http://en.wikipedia.org/wiki/Xorshift
            */
            var shift = function(x, y, z, w) {
              x = x || 1234567;
              y = y || 362436069;
              z = z || 521288629;
              w = w || 88675123;

              return function() {
                var s = x ^ (x << 11);
                x = y;
                y = z;
                z = w;
                w = (w ^ (w >>> 19)) ^ (s ^ (s >>> 8));
                return w;
              };
            }
            window.addEventListener('resize', function() {
              c.width = window.innerWidth;
              c.height = window.innerHeight;
            }, false);
            window.requestAnimationFrame = window.requestAnimationFrame||
            window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;
            var run = function() {
              window.requestAnimationFrame(run);
              go();
            }
            run();
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>情人节心跳动动画</title>
    <style type="text/css">
       html, body{
          width: 100%;
          height: 100%;
          min-width: 500px;
          min-height: 500px;
          overflow: hidden;
        }
        .heart {
position: absolute;
          width: 100px;
          height: 90px;
          top: 50%;
          left: 50%;
          margin-top: -45px;
          margin-left: -50px;
        }
        .heart:before,
        .heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: #fc2e5a;
          border-radius: 50px 50px 0 0;
          transform: rotate(-45deg);
          transform-origin: 0 100%;
        }
        .heart:after {
          left: 0;
          transform: rotate(45deg);
          transform-origin :100% 100%;
        }
        .heart1{
           animation: heart-anim 1s linear .4s infinite;
        }
        .heart2{
           animation: pounding .5s linear infinite alternate;
        }
        .heart1:after, .heart1:before{
          background-color: #ff7693;
        }

        @keyframes pounding{
          0%{ transform: scale(1.5); }
          100%{ transform: scale(1); }
        }
        @keyframes heart-anim {
          46% {

            transform: scale(1);
          }
          50% {
            transform: scale(1.3);
          }
          52% {
            transform: scale(1.5);
          }
          55% {
            transform: scale(3);
          }
          100% {
            opacity: 0;
            transform: scale(50);
          }
        }

    </style>
</head>
<body>
    <!--外圈大心-->
   <div class="heart heart1"></div>
  <!--里面小心-->
   <div class="heart heart2"></div>
   
</body>
<script type="text/javascript">

</script>
</html>

          4.Windows12开机新概念动画

91fa15f6bc4ce62e17f251d2ce4bd569.jpg

 源码分享：

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="Shortcut Icon" href="favicon.ico">
<title>Windows 12 Desktop</title>

<link rel="stylesheet" href="./desktop.css" />
<!-- Apps style -->
<link rel="stylesheet" href="apps/style/setting.css">
<link rel="stylesheet" href="apps/style/explorer.css">
<link rel="stylesheet" href="apps/style/calc.css">
<link rel="stylesheet" href="apps/style/about.css">
<link rel="stylesheet" href="apps/style/information.css">
</head>

<body onload="$('#loadback').addClass('hide');setTimeout(() => {$('#loadback').css('display','none')}, 200);">
<div id="loadback" style="background-color:#000;width:100%;height:100%;z-index:105;position:absolute;opacity:1;transition:200ms;">
<style>#loadback.hide{opacity:0;}
loading>svg>circle:first-child{stroke:#fff;fill:none;stroke-width:2px;stroke-linecap:round;
animation:spin-infinite 1.8s linear 0s infinite normal none running;transform-origin:50% 50%;
transition: all .2s ease-in-out 0s;}
loading>svg>circle:last-child{fill:#00000000;}
loading>svg{background-color: #00000000;border-radius: 50%;}
@keyframes spin-infinite {0%{stroke-dasharray:.01px,43.97px;transform:rotate(0deg)}
50%{stroke-dasharray:21.99px,21.99px;transform:rotate(450deg)}
to{stroke-dasharray:.01px,43.97px;transform:rotate(3turn)}}</style>
<svg id="loadbacksvg" viewbox="0,0,306,305" style="transition: 1s;opacity: 0;position: absolute;left: calc(50% - 125px);top:20%;"
width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="clip0"><rect x="897" y="208" width="306" height="305"/></clipPath><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="317.629" y1="13.8595" x2="-11.6295" y2="290.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill2"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill3"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="-11.6295" y1="290.141" x2="317.629" y2="13.8595" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill4"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-897 -208)"><path d="M936.813 208 1035.2 208 1035.2 208 1036 340.407C1011.65 331.352 986.507 325.493 963.762 325.226 941.508 325.759 919.254 339.075 897 346L897 247.755C897 225.799 914.825 208 936.813 208Z" fill="url(#fill1)" fill-rule="evenodd"/><path d="M40.0431 0 139 0 139 0 139 140.549C115.82 150.681 92.6407 159.212 69.4611 158.946 45.5026 160.012 23.1537 145.082 0 138.15L0 39.7981C0 17.8182 17.9278 0 40.0431 0Z" fill="url(#fill2)" fill-rule="evenodd" transform="matrix(-1 0 0 1 1203 208)"/><path d="M1163.19 512 1064.8 512 1064.8 512 1064 379.593C1088.35 388.648 1113.49 394.507 1136.24 394.774 1158.49 394.241 1180.75 380.925 1203 374L1203 472.245C1203 494.201 1185.18 512 1163.19 512Z" fill="url(#fill3)" fill-rule="evenodd"/><path d="M39.755 0 138 0 138 0 138 140.549C114.987 150.681 91.9742 159.212 68.9614 158.946 45.1752 160.012 22.9872 145.082 0 138.15L0 39.7981C0 17.8182 17.7989 0 39.755 0Z" fill="url(#fill4)" fill-rule="evenodd" transform="matrix(1 -1.22465e-16 -1.22465e-16 -1 897 512)"/></g></svg>
<loading id="loadbackloading" style="transition:1s;opacity: 0;">
<svg style="position: absolute;left: calc(50% - 25px);top: 80%;" width="50px" height="50px" viewBox="0 0 16 16">
<circle cx="8px" cy="8px" r="7px"></circle><circle cx="8px" cy="8px" r="6px"></circle></svg>
</loading><script>setTimeout(() => {document.getElementById('loadbacksvg').style.opacity=1;
document.getElementById('loadbackloading').style.opacity=1;}, 100);</script>
</div>
<script src="./jq.min.js"></script>
<!-- 预加载设置图标 -->
<p style="font-family: SettingsIcons;display: n;">&nbsp;</p>
<div id="start-menu">
<!-- 开始菜单 -->
<div id="s-m-l">
<div id="s-m-user">
<svg viewBox="0,0,257,344" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="user-clip0"><rect x="382" y="195" width="257" height="344"/></clipPath><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill2"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#user-clip0)" transform="translate(-382 -195)"><path d="M637.755 433.872C642.215 515.221 579.577 537.983 508.011 537.983 436.444 537.983 376.676 507.833 383.513 437.11 383.109 425.234 389.59 414.133 398.634 409.891 413.82 402.768 444.753 402.936 507.484 402.997 570.214 403.058 609.164 402.279 621.521 407.947 633.878 413.614 638.011 424.609 637.755 433.872Z" fill="url(#user-fill1)" fill-rule="evenodd"/><path d="M422 285C422 235.847 461.623 196 510.5 196 559.377 196 599 235.847 599 285 599 334.153 559.377 374 510.5 374 461.623 374 422 334.153 422 285Z" fill="url(#user-fill2)" fill-rule="evenodd"/></g></svg>
</div>
<p style="width: 100%;text-align: center;margin: -50px 0 20px 0;font-size: 30px;">Administartor</p>
<input type="text" class="input" alt="hi" placeholder="在这里输入你要搜索的内容" onclick="hide_startmenu();
$('#search-win').addClass('show-begin');
setTimeout(() => {
$('#search-win').addClass('show');
}, 0);
$('#search-input').focus();">
<input-before class="bi bi-search"></input-before>
<list>
<p class="text">可用</p>
<a onclick="showwin('setting');hide_startmenu();">
<img src="icon/setting.png"><p>设置</p></a>
<a onclick="showwin('explorer');hide_startmenu();">
<img src="icon/explorer.png"><p>文件资源管理器</p></a>
<a onclick="showwin('calc');hide_startmenu();">
<img src="icon/calc.png"><p>计算器</p></a>
<a onclick="showwin('about');hide_startmenu();">
<img src="icon/about.png"><p>系统终端</p></a>
<p class="text">其它</p>
<a><img src="icon/camera.png"><p>相机</p></a>
<p class="text">推广</p>
<a onclick="showwin('about');hide_startmenu();href="https://www.microsoft.com/zh-cn/Store" target="_blank">
<img src="icon/store.png"><p>Microsoft Store</p></a>
<a onclick="showwin('about');hide_startmenu();href="https://www.microsoft.com/zh-cn/Store" target="_blank">
<img src="icon/terminal.png"><p>PowerShell</p></a>
</list>
</div>
<div id="s-m-r">
<div class="row1">
<div class="folder">
<a class="a sm-app"><img src="icon/folder/docs.png"><p>文档</p></a>
<a class="a sm-app"><img src="icon/folder/pics.png"><p>图片</p></a>
<a class="a sm-app"><img src="icon/folder/music.png"><p>音乐</p></a></div>
<div class="tool">
<p style="font-size: 40px;margin-bottom: -10px;">9:00 a.m</p>
<p>星期五, 2024年12月20日</p>
<a class="a btn btn-icon power" onclick="$(this).addClass('show')">
<span class="bi bi-power"></span>
<i class="bi bi-power" onclick="$('#start-menu').removeClass('show');
setTimeout(() => {window.location='shutdown.html';},200);"></i>
<i class="bi bi-arrow-counterclockwise" onclick="$('#start-menu').removeClass('show');
setTimeout(() => {window.location='reload.html';},200);"></i>
</a>
<a class="a btn btn-icon big" onclick="
if($('#start-menu').hasClass('max')){
$('#start-menu>#s-m-r>.row1>.tool>.btn-icon.big').html('<i class=\'bi bi-arrows-angle-expand\'></i>');
$('#start-menu').removeClass('max');
}else{
$('#start-menu>#s-m-r>.row1>.tool>.btn-icon.big').html('<i class=\'bi bi-arrows-angle-contract\'></i>');
$('#start-menu').addClass('max');
}
">
<i class="bi bi-arrows-angle-expand"></i>
</a>
</div>
</div>
<div class="pinned">
<!-- 已固定 卡片 -->
<div class="title">
<p>已固定</p>
<div>
<a class="a more-btn">所有应用 <i class="bi bi-chevron-right"></i></a>
<!-- 这个好像没什么必要 -->
</div>
</div>
<div class="apps">
<a class="a sm-app enable" onclick="showwin('calc');hide_startmenu();">
<img src="icon/calc.png"><p>计算器</p></a>
<a class="a sm-app"><img src="icon/camera.png"><p>相机</p></a>
<a class="a sm-app enable jump" href="https://support.qq.com/product/454733" target="_blank">
<img src="icon/feedback.png"><p>反馈中心</p></a>
<a class="a sm-app"><img src="icon/defender.png"><p>Windows 安全中心</p></a>
<a class="a sm-app enable" onclick="showwin('about');hide_startmenu();"><img src="icon/about.png"><p>系统终端</p></a>
<a class="a sm-app enable" onclick="showwin('explorer');hide_startmenu();">
<img src="icon/explorer.png"><p>文件资源管理器</p></a>
<a class="a sm-app enable" onclick="showwin('setting');hide_startmenu();">
<img src="icon/setting.png"><p>设置 </p></a>
<a class="a sm-app enable jump" href="https://www.microsoft.com/zh-cn/Store" target="_blank">
<img src="icon/store.png"><p>Microsoft Store</p></a>
<a class="a sm-app"><img src="icon/taskmanager.png"><p>任务管理器</p></a>
<a class="a sm-app"><img src="icon/teams.png"><p>Teams</p></a>
<a class="a sm-app enable jump" href="https://learn.microsoft.com/zh-cn/powershell/" target="_blank">
<img src="icon/terminal.png"><p>PowerShell</p></a>
<a class="a sm-app enable jump" href="https://afdian.net/a/spark_kinght_team" target="_blank">
<img src="icon/充电.png"><p>给我们充电</p></a>
</div>
</div>
<div class="tuijian">
<!-- 推荐的项目 卡片 -->
<div class="title">
<p>推荐的项目</p>
<div>
<a class="a more-btn">更多 <i class="bi bi-chevron-right"></i></a>
</div>
</div>
<div class="apps">
<a class="a tj-obj"><img src="icon/files/ppt.png"><div><p>科学地使用瓶盖.pptx</p><p>5 分钟前</p></div></a>
<a class="a tj-obj"><img src="icon/files/img.png"><div><p>可口可乐瓶盖.jpg</p><p>7 分钟前</p></div></a>
<a class="a tj-obj"><img src="icon/files/img.png"><div><p>瓶盖构造图.jpg</p><p>16 分钟前</p></div></a>
<a class="a tj-obj"><img src="icon/files/word.png"><div><p>瓶盖的构造及作用.docx</p><p>24 分钟前</p></div></a>
<a class="a tj-obj"><img src="icon/files/excel.png"><div><p>可口可乐瓶盖厚度.xlsx</p><p>35 分钟前</p></div></a>
</div>
</div>
</div>
</div>
<div id="search-win">
<!-- 搜索框 -->
<input type="text" class="input" placeholder="在这里输入你要搜索的内容" id="search-input" oninput="
if(this.value.length>0){
let rand=['农夫山泉瓶盖简介.txt','瓶盖构造图.png','瓶盖结构说明.docx','可口可乐瓶盖.jpg','可口可乐瓶盖历史.pptx','瓶盖质量统计分析.xlsx','农夫山泉瓶盖.svg','瓶盖介绍.doc'];
$('#search-win>.ans>.list>list').html('<a href=\'#\'>'+rand[this.value.length%8]+'</a>'+'<a href=\'#\'>'+rand[(this.value.length+3)%8]+'</a>');
}else
$('#search-win>.ans>.list>list').html('什么也没有')
$('#search-span').text(this.value);
">
<input-before class="bi bi-search"></input-before>
<div class="tab">
<a class="now">全部</a><a>应用</a><a>文档</a><a>网页</a>
<a>电子邮件</a><a>人员</a><a>设置</a><a>视频</a>
<a>文件夹</a><a>音乐</a><a>照片</a>
</div>
<div class="ans">
<div class="list">
<list>
什么也没有
</list>
</div>
<div class="view">
<p class="bi bi-search" style="text-align: center;font-size: 50px;"></p>
<p style="text-align: center;font-size: 25px;">搜索 "<span id="search-span"></span>"</p>
</div>
</div>
</div>
<div id="dock-box">
<!-- Dock(任务)栏 -->
<div class="dock">
<a class="dock-btn" id="start-btn" onclick="
if($('#start-menu').hasClass('show')){
hide_startmenu();
}
else{
$('#start-btn').addClass('show');
if($('#search-win').hasClass('show')){
$('#search-btn').removeClass('show');
$('#search-win').removeClass('show');
setTimeout(() => {
$('#search-win').removeClass('show-begin');
}, 200);
}
$('#start-menu').addClass('show-begin');
setTimeout(() => {
$('#start-menu').addClass('show');
}, 0);//非常神奇,我也不知道为什么去掉就不行
}">
<!-- 开始按钮 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0,0,306,305">
<defs><clipPath id="clip0"><rect x="897" y="208" width="306" height="305"></rect>
</clipPath><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf1">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient><linearGradient x1="317.629" y1="13.8595" x2="-11.6295" y2="290.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf2">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf3">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient><linearGradient x1="-11.6295" y1="290.141" x2="317.629" y2="13.8595" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf4">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-897 -208)">
<path d="M936.813 208 1035.2 208 1035.2 208 1036 340.407C1011.65 331.352 986.507 325.493 963.762 325.226 941.508 325.759 919.254 339.075 897 346L897 247.755C897 225.799 914.825 208 936.813 208Z" fill="url(#sf1)" fill-rule="evenodd"></path>
<path d="M40.0431 0 139 0 139 0 139 140.549C115.82 150.681 92.6407 159.212 69.4611 158.946 45.5026 160.012 23.1537 145.082 0 138.15L0 39.7981C0 17.8182 17.9278 0 40.0431 0Z" fill="url(#sf2)" fill-rule="evenodd" transform="matrix(-1 0 0 1 1203 208)"></path>
<path d="M1163.19 512 1064.8 512 1064.8 512 1064 379.593C1088.35 388.648 1113.49 394.507 1136.24 394.774 1158.49 394.241 1180.75 380.925 1203 374L1203 472.245C1203 494.201 1185.18 512 1163.19 512Z" fill="url(#sf3)" fill-rule="evenodd"></path>
<path d="M39.755 0 138 0 138 0 138 140.549C114.987 150.681 91.9742 159.212 68
.9614 158.946 45.1752 160.012 22.9872 145.082 0 138.15L0 39.7981C0 17.8182 17.7989 0 39.755 0Z" fill="url(#sf4)" fill-rule="evenodd" transform="matrix(1 -1.22465e-16 -1.22465e-16 -1 897 512)"></path>
</g></svg>
</a>
<a class="dock-btn" id="search-btn" onclick="
if($('#search-win').hasClass('show')){
$('#search-btn').removeClass('show');
$('#search-win').removeClass('show');
setTimeout(() => {
$('#search-win').removeClass('show-begin');
}, 200);
}
else{
$('#search-btn').addClass('show');
hide_startmenu();
$('#search-win').addClass('show-begin');
setTimeout(() => {
$('#search-win').addClass('show');
}, 0);
$('#search-input').focus();
}">
<svg width="26" height="26" viewBox="0,0,313,313" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="search-clip1"><rect x="288" y="257" width="313" height="313"/></clipPath><linearGradient x1="338.45" y1="228.45" x2="551.55" y2="597.55" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="search-fill1"><stop offset="0" stop-color="#2983CC"/><stop offset="0.09" stop-color="#2983CC"/><stop offset="0.34" stop-color="#A964C8"/><stop offset="0.77"/><stop offset="1"/></linearGradient></defs><g clip-path="url(#search-clip1)" transform="translate(-288 -257)"><path d="M517.98 458.696C559.356 402.228 547.127 322.905 490.667 281.524 434.207 240.143 354.896 252.373 313.521 308.841 272.145 365.309 284.374 444.631 340.833 486.012 385.458 518.719 446.139 518.698 490.74 485.959L490.721 485.959C491.306 486.739 491.93 487.48 492.632 488.201L567.702 563.282C575.316 570.902 587.664 570.907 595.283 563.292 602.902 555.677 602.906 543.327 595.293 535.707L520.223 460.626C519.526 459.921 518.776 459.269 517.98 458.676ZM523.011 383.732C523.011 442.969 474.997 490.99 415.768 490.99 356.539 490.99 308.525 442.969 308.525 383.732 308.525 324.495 356.539 276.474 415.768 276.474 474.997 276.474 523.011 324.495 523.011 383.732Z" fill="url(#search-fill1)" fill-rule="evenodd"/></g></svg>
</a>
</div>
<div class="dock" id="taskbar" style="display: none;" count="0">
</div>
<div class="dock about"
onclick="if($(this).hasClass('show')){$(this).removeClass('show')}else{$(this).addClass('show')}">
     Windows 12 Online-22H1-“SFZT”
<p>欢迎使用Windows 12 Online，Administrator.<br>
我们希望能让各位在网络中提前一步体验到Windows 12的各种改动<br>
由于此内容仅为自制内容，可能与 Windows 12 正式版本不一致。<br>
使用标准网络技术,例如 Html,CSS 和 JS<br>
此项目绝不附属于微软,且不应与微软操作系统或产品混淆,<br>
本项目中微软、Windows和其他示范产品采用微软公司的商标<br>
                                        Microsoft<sup>®</sup>具有Windows 12及其衍生作品的最终解释权</p>
</div>
</div>
<div class="window setting">
<div class="titbar">
<img src="icon/setting.png" class="icon"><p>设置</p>
<div>
<a class="a wbtg red" onclick="hidewin('setting')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('setting')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('setting')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="content" id="win-setting">
<div class="menu">
<a class="a user">
<svg viewBox="0,0,257,344" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="user-clip1"><rect x="382" y="195" width="257" height="344"/></clipPath><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill3"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill4"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#user-clip1)" transform="translate(-382 -195)"><path d="M637.755 433.872C642.215 515.221 579.577 537.983 508.011 537.983 436.444 537.983 376.676 507.833 383.513 437.11 383.109 425.234 389.59 414.133 398.634 409.891 413.82 402.768 444.753 402.936 507.484 402.997 570.214 403.058 609.164 402.279 621.521 407.947 633.878 413.614 638.011 424.609 637.755 433.872Z" fill="url(#user-fill3)" fill-rule="evenodd"/><path d="M422 285C422 235.847 461.623 196 510.5 196 559.377 196 599 235.847 599 285 599 334.153 559.377 374 510.5 374 461.623 374 422 334.153 422 285Z" fill="url(#user-fill4)" fill-rule="evenodd"/></g></svg>
<div>
<p>Administrator</p>
<p>spark_knight_cn@163.com</p>
</div>
</a>
<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
<input-before class="bi bi-search"></input-before>
<list>
<a style="background-color: #ffffff70"><span
style="background-image: linear-gradient(180deg, #ad6eca, #3b91d8);border-radius: 10px;position: relative;left: -10px;top:1px;height: 20px;margin-right: -4px;">
&nbsp;</span><img src="apps/icons/setting/system.png">系统</a>
<a><img src="apps/icons/setting/blueteeth.png">蓝牙和其他设备</a>
<a><img src="apps/icons/setting/network.png">网络和 Internet</a>
<a><img src="apps/icons/setting/personal.png">个性化</a>
<a><img src="apps/icons/setting/apps.png">应用</a>
<a><img src="apps/icons/setting/user.png">账户</a>
<a><img src="apps/icons/setting/time.png">时间和语言</a>
<a><img src="apps/icons/setting/game.png">游戏</a>
<a><img src="apps/icons/setting/help.png">辅助功能</a>
<a><img src="apps/icons/setting/safe.png">隐私和安全性</a>
<a><img src="apps/icons/setting/update.png">Windows 更新</a>
</list>
</div>
<div class="page" style="overflow: auto;">
<p class="title">系统</p>
<div style="display: flex;">
<p class="s-icon" style="font-size: 70px;margin: -8px 10px 0px 20px;"></p>
<div>
<p style="font-size: 28px;text-overflow: ellipsis;white-space: nowrap;">Desktop-Administrator</p>
<p style="color: #7f7f7f;margin:-8px 0 -5px 0;">Administrator</p>
<a style="color: #2983cc;text-decoration: underline;">重命名</a>
</div>
</div>
<div class="setting-list">
<a><icon></icon><div><p>显示</p><p>显示器、亮度、夜间模式、显示描述</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>声音</p><p>声音级别、输入、输出、声音设备</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>通知</p><p>来自系统和应用的警报</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>专注助手</p><p>通知、自动规则</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon class="b">&#xF186;</icon><div><p>电源</p><p>睡眠、电池使用情况、节电模式</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>存储</p><p>存储空间、驱动器、配置规则</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>多任务处理</p><p>贴靠窗口、桌面、任务切换</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>激活</p><p>激活状态、订阅、产品密钥</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>疑难解答</p><p>建议的疑难解答、首选项和历史记录</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>恢复</p><p>重置、高级启动、返回</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>投影到此电脑</p><p>权限、配对 PIN、可发现性</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>远程桌面</p><p>远程桌面用户、连接权限</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>剪贴板</p><p>剪贴和复制历史记录、同步、清除</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>关于</p><p>设备规格、重命名电脑、Windows 规格</p></div><i class="bi bi-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<div class="window explorer">
<div class="titbar">
<img src="icon/explorer.png" class="icon">
<p>文件资源管理器</p>
<div>
<a class="a wbtg red" onclick="hidewin('explorer')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('explorer')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('explorer')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="content" id="win-explorer">
<div class="menu">
<div class="card pinned">
<p class="title"><span style="font: 15px;">📌</span> 已固定</p>
<list>
<a><img src="apps/icons/explorer/qa.png">快速访问</a>
<a><img src="apps/icons/explorer/od.png">OneDrive</a>
<a class="check"><span
style="background-image:linear-gradient(180deg, #ad6eca, #3b91d8);width:4px;height: 19px;border-radius: 10px;margin-left: -12px;margin-right: 8px;margin-top: 1px;"></span>
<img src="apps/icons/explorer/thispc.png">此电脑</a>
<a><img src="apps/icons/explorer/rb.png">回收站</a>
</list>
</div>
<div class="card tags">
<p class="title"><span style="font: 15px;">🏷</span> 标签</p>
<list>
<a><span style="background-color: red;"></span>红色</a>
<a><span style="background-color: #3981d9;"></span>蓝色</a>
<a><span style="background-color: yellow;"></span>黄色</a>
<a><span style="background-color: green;"></span>绿色</a>
<a><span style="background-color: #fc9816;"></span>橙色</a>
<a><span style="background-color: purple;"></span>紫色</a>
<a><span style="background-color: #ffcad4;"></span>粉色</a>
</list>
</div>
</div>
<div class="main">
<div class="tool">
<a class="a b t"><img src="apps/icons/explorer/tool-new.png">新建</a><div class="hr"></div>
<a class="a b"><img src="apps/icons/explorer/tool-cut.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-copy.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-paste.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-rename.png"></a><div class="hr"></div>
<a class="a b t"><img src="apps/icons/explorer/tool-sort.png">排序方式</a>
<a class="a b t"><img src="apps/icons/explorer/tool-view.png">布局</a>
</div>
<div class="content">
<div class="tool">
<a class="a btn btn-icon"><i class="bi bi-arrow-left"></i></a>
<a class="a btn btn-icon"><i class="bi bi-arrow-right"></i></a>
<a class="a btn btn-icon"><i class="bi bi-arrow-up"></i></a>
<p class="tit"><img src="apps/icons/explorer/thispc.png">此电脑</p>
<div class="search">
<input type="text" class="input" placeholder="在这里输入你要搜索的内容">
<input-before class="bi bi-search"></input-before>
</div>
</div>
<p class="title">此电脑</p>
<p class="class"><img src="apps/icons/explorer/disk.png"> 设备和驱动器</p>
<div class="group">
<a class="a item">
<img src="apps/icons/explorer/diskwin.png">
<div>
<p class="name">本地磁盘 (C:)</p>
<div class="bar">
<div class="content" style="width: 88%;"></div>
</div>
<p class="info">32.6 GB 可用, 共 143 GB</p>
</div>
</a>
<a class="a item">
<img src="apps/icons/explorer/disk.png">
<div>
<p class="name">本地磁盘 (D:)</p>
<div class="bar">
<div class="content" style="width: 15%;"></div>
</div>
<p class="info">185.3 GB 可用, 共 216 GB</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="window calc">
<div class="titbar">
<img src="icon/calc.png" class="icon">
<p>计算器</p>
<div>
<a class="a wbtg red" onclick="hidewin('calc')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" style="pointer-events: none;color: #aaa;"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('calc')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="content" id="win-calc">
<input id="calc-input" value="">
<div class="keyb">
<a class="a b" onClick="document.getElementById('calc-input').value*=document.getElementById('calc-input').value">𝑥²</a>
<a class="a b" onClick="document.getElementById('calc-input').value=Math.sqrt(document.getElementById('calc-input').value)">√𝑥</a>
<a class="a b" onClick="document.getElementById('calc-input').value=''">C</a>
<a class="a b u" onClick="document.getElementById('calc-input').value+='+'">+</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='7'">7</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='8'">8</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='9'">9</a>
<a class="a b u" onClick="document.getElementById('calc-input').value+='-'">-</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='4'">4</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='5'">5</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='6'">6</a>
<a class="a b u" onClick="document.getElementById('calc-input').value+='*'">×</a>

<a class="a b" onClick="document.getElementById('calc-input').value+='1'">1</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='2'">2</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='3'">3</a>
<a class="a b u" onClick="document.getElementById('calc-input').value+='/'">÷</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='.'">.</a>
<a class="a b" onClick="document.getElementById('calc-input').value+='0'">0</a>
<a class="a b" onClick="document.getElementById('calc-input').value=document.getElementById('calc-input').value.substring(0,document.getElementById('calc-input').value.length-1);"><i class="bi bi-backspace"></i></a>
<a class="a b ans u" onClick="document.getElementById('calc-input').value=eval(document.getElementById('calc-input').value)"> =</a>
</div>
</div>
</div>
<div class="window about">
<div class="titbar">
<img src="icon/about.png" class="icon">
<p>系统终端</p>
<div>
<a class="a wbtg red" onclick="hidewin('about')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('about')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('about')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="content" id="win-about">
<div class="menu">
<list>
<a onclick="$('#win-about>.about').show(200);$('#win-about>.update').hide();"><img src="apps/icons/about/info.svg" height="17px" width="19px">关于本项目</a>
<a onclick="$('#win-about>.update').show(200);$('#win-about>.about').hide();"><img src="apps/icons/about/update.svg" height="20px" width="18px">更新记录</a>
          <a onclick="$('#win-about>.information').show(200);$('#win-about>.about').hide();"><img src="icon/消息.png" height="20px" width="18px">消息（呼出）</a>
</list>
</div>
<div class="cnt about">
<h1 class="tit"><span></span>Windows 12 Online</h1>
<div style="margin-left: 20px;">
<h2 class="tit"><span></span>关于Windows 12 Online</h2>
<p>&emsp;&emsp;Windows 12 Online 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验 Windows 12。</p>
<p>&emsp;&emsp;因为这只是概念版，且为用户自创的项目，与Microsoft<sup>®</sup>无关，所以内容可能与 Windows 12 正式版本不一致。</p>
<p>&emsp;&emsp;此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC</p>
<p>&emsp;&emsp;本项目中微软、Windows和其他示范产品是微软公司的商标</p>
<p>&emsp;&emsp;Microsoft<sup>®</sup>具有Windows 12及其衍生作品的最终解释权</p>
</div>
<div style="margin-left: 20px;">
<h2 class="tit"><span></span>版权信息</h2>
<p>&emsp;&emsp;作品由郭恩赫原创，并将该作品开源发布，本作为通过GitHub合法手续取得源码。</p>
                    <p>&emsp;&emsp;本作作者郭恩赫</p>
</div>
</div>
<div class="cnt update" style="display: none;">
<h1 class="tit"><span></span>更新记录</h1>
<div style="margin-left: 20px;">
<details><summary><span>22H1</span> “SFZT”更新</summary>
<p>&emsp;&emsp;-将用户名统一为“Administrator”<br>
&emsp;&emsp;-深入汉化，将部分（非必须）专业术语汉化为中文<br>
&emsp;&emsp;-加入分段底栏元素<br>
&emsp;&emsp;-优化窗口动画，减少了对物理机的RAM、CPU的损耗和占用<br>
&emsp;&emsp;-更换了默认背景图<br>
&emsp;&emsp;-增加了“消息”功能<br>
&emsp;&emsp;-在“开始”菜单中增加了“推广”分区（Tip：此分区内容皆无法直接双击运行，如需运行，请在其他可交互分区进行交互。）<br>
</details>
<details><summary><span>v1.1.2</span> 外观优化</summary>
<p>&emsp;&emsp;-透明效果改善<br>
&emsp;&emsp;-在所有应用中使用主题色(蓝紫渐变)<br>
&emsp;&emsp;-Dock(任务)栏圆角优化<br>
&emsp;&emsp;-在设置中使用新的头像<br>
&emsp;&emsp;-加速窗口动画，更加贴近原生<br>
</details>
<details><summary><span>v1.1.1</span> 外观优化，修复了一些 Bug</summary>
<p>&emsp;&emsp;-外观优化，阴影增加<br>
&emsp;&emsp;-修复了开始、搜索菜单关闭时高度会闪一下的问题<br>
&emsp;&emsp;-开始菜单用户头像美化<br>
&emsp;&emsp;-修复了"关于"应用切换标签时文字改变导致动画流畅的问题<br>
&emsp;&emsp;-使页面不能滚动，更加逼真<br>
</details>
<details><summary><span>v1.1.0</span> 增加最小化功能,图标美化</summary>
<p>&emsp;&emsp;-新增最小化窗口功能<br>
&emsp;&emsp;-图标部分美化<br>
&emsp;&emsp;-开始、搜索按钮点击动画美化<br>
&emsp;&emsp;-修复计算器 "𝑥²" 键无效的问题<br>
&emsp;&emsp;-修复窗口打开并最大化后最小化不正常的问题<br>
&emsp;&emsp;-修复多次打开应用任务栏显示错误的问题<br>
&emsp;&emsp;-简化js关于拖动窗口的代码</p>
</details>
<details><summary><span>v1.0.1</span> Bug和一些错别字</summary>
<p>&emsp;&emsp;上传了才发现有 Bug 😅</p>
</details>
<details><summary><span>v1.0.0</span> 计算器功能增加，优化体验与开始菜单，新增关于应用</summary>
<p>&emsp;&emsp;-使开始菜单和搜索窗口在高度不足的页面中更好地显示，页面高度过小也可能显示不全，还是建议使用电脑<br>
&emsp;&emsp;-计算器增加平方与开方功能<br>
&emsp;&emsp;-开始菜单中不可用应用用灰色显示，更加简洁方便<br>
&emsp;&emsp;-新增 "迅航企业" 应用，包含关于本项目的说明和历史更新记录<br>
&emsp;&emsp;-优化开始菜单和搜索窗口的显示动画<br>
&emsp;&emsp;-优化电脑端按钮的体验</p>
</details>
</div>
</div>
<div class="cnt information" style="display: none;">
<h1 class="tit"><span></span>消息</h1>
<div style="margin-left: 20px;">
<details><summary><span>（系统）2022.11.12 21：59：45</span><br> 🖥️System</summary>
<p>&emsp;&emsp;您在待机时我们完成了Windows 12 开始菜单的22H1配套更新（587/587）<br>                              
          </details>
<details><summary><span>（系统）2022.11.10 14：56：43</span><br> 🔢Windows 12 计算器</summary>
<p>&emsp;&emsp;您在待机时我们完成了Windows 12 计算器的22H1配套更新（1496/1496）<br>
                                                                     <a onclick="showwin('calc');hide_startmenu();">
                                                            <img src="icon/calc.png"><p>点击打开“计算器”</p></a>                              
          </details><details><summary><span>（邮箱）2022.11.9 22：43：17</span><br> 📨邮件递送</summary>
<p>&emsp;&emsp;发件人：spark_knight_cn@163.com<br>&emsp;&emsp;收件人：Windows 12 Online目标用户<br>
       &emsp;&emsp;感谢您对Windows 12 Online的信任，以及对我们工作的尊重，接下来，我们会继续为您带来更加美妙、优质、安全的在线体验。
</details>
<details><summary><span>（系统）2022.11.9 22：24：55</span><br> 🛡️Windows 安全中心</summary>
<p>&emsp;&emsp;由于排除或网络扫描设置，Microsoft Defender跳过了项目。（103/380912）（<0.1%）<br>
</details>
<details><summary><span>（系统）2022.11.9 22：24：36</span><br> 🛡️Windows 安全中心</summary>
<p>&emsp;&emsp;Microsoft Defender 防病毒扫描了你的设备，未发现风险。<br>
</details>
</div>
</div>
</div>
</div>
<script src="desktop.js"></script>
</body>
</html>


 

学会了吗？学会了记得点个赞

 

郭wes代码
关注
专栏目录
HTML5 Canvas酷炫科技背景动画特效
06-12
一款酷炫的动态网页背景动画，HTML5 Canvas科技背景动画特效代码。
HTML5 Canvas科技背景动画特效.zip
07-05
HTML5 Canvas科技背景动画特效是一款酷炫的动态背景动画下载。
HTML5 Canvas动画效果演示
jishublog
07-11 366
HTML5 Canvas动画效果演示 主要思想： 首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧，这样看起来就像动画在播放。 关键技术点： JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法， 另外一个参数代表间隔时间，单位为毫秒数。代码示例： setTimeout...
HTML5 Canvas动画模板
心中的利剑：HTML5 Canvas游戏动画（JavaScript）
05-21 608
创建HTML5的画布动画，我们可以使用requestAnimFrame()方法使浏览器以确定最佳的FPS为我们更新动画。对于每一个动画帧，我们可以更新在画布上的元素，清除画布，重新绘制的画布，然后请求另一个动画帧。 下面是一个简单的框架，备用。 body { margin: 0px; padding: 0px; }...
canvas绘图（动画）案例
最新发布
zhaojiuyi的博客
03-18 819
小白记录几次自己的canvas绘图案例
数字网络科技canvas背景动画
墨鱼部落格
03-16 442
数字网络科技canvas背景动画 一款canvas蓝色酷炫的科技感十足，数字科技，网络科技网页动态背景特效。 演示地址 下载地址
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
06-17
课程包含HTML5新标签新规范，DIV+CSS设计、Canvas绘画；CSS样式设计，其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等；JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端...
HTML5+CSS3网页设计模板(30例)zip
03-15
这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和参考。 HTML5是超文本标记语言（HTML）的最新版本，它在原有的基础上引入了新的元素、属性和API，旨在...
HTML5+CSS3卡片抽出动画特效代码
03-20
在"HTML5+CSS3卡片抽出动画特效代码"这个项目中，开发者巧妙地利用了这两种技术来实现一个引人注目的视觉效果：卡片从信封中抽入抽出，并带有淡入淡出的过渡动画。 首先，HTML5提供了新的标签和API，使得结构化内容...
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
这个"HTML5+CSS3网站设计基础教程 源代码.7z"压缩包包含了学习这两项技术的全套源代码，对于初学者来说是一份极其宝贵的资源。 HTML5是超文本标记语言的第五个版本，它在HTML4的基础上做了大量改进和扩展，以适应...
HTML5 Canvas科技背景动画特效
06-24
HTML5 Canvas科技背景动画特效是一款酷炫的动态背景动画下载。
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
html5基于canvas制作酷炫,应用HTML5 Canvas制作酷炫科技背景动画特效
weixin_39713763的博客
06-10 658
更多特效代码请添加HTML5前端交流群111645711看这性感的线条，激情的律动！废话不多说，上代码！源代码需要文档版本源码，可以加我的HTML5前端交流群111645711* {margin:0;padding:0;}body {font-size:16px;font:400 16px/1.62 Georgia,"Xin Gothic","Hiragino Sans GB","Droid Sa...
canvas动画科技园_7个惊艳的HTML5 Canvas动画效果及源码
weixin_39685836的博客
12-22 437
HTML5非常强大，尤其是现在大部分浏览器都支持HTML5和CSS3，用HTML5制作的动画也多了起来。另外，Canvas上绘制图形非常简单，本文就分享了一些强大的HTML5 Cnavas动画，一起来看看。1、HTML5 Canvas瀑布动画 超逼真这是一个很逼真的HTML5瀑布动画，基于Canvas实现的，效果相当酷。2、HTML5 Canvas彩色像素进度条动画这也是一款基于HTML5 Can...
如何使用Canvas及动画实现
swpu715095938的博客
07-16 852
如何使用Canvas及其动画实现 什么是Canvas? Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 Canvas 对象表示一个 HTML 画布元素–。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 定义和用法 首先，在HTML元素中定义一个c...
canvas动画:自由落体运动
weixin_30384217的博客
03-07 425
经过前面的文章，我们已经能够在canvas画布上画出各种炫酷的图形和画面，但是这些画面都是禁止的，怎么样才能让他们动起来呢？ 如何绘制基本图形可以参考：canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考：canvas图形变换 如何设置基本图形颜色和样式可以参考：canvas样式和颜色 如何使用外部图片以及图形组合可以参考：canvas使用图片，图形组合以及裁剪 canvas如何保存和加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值