canvas电闪雷鸣下雨动画效果-html代码-BFW代码库

canvas电闪雷鸣下雨动画效果

代码语言：html

所属分类：动画

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

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

    <style>
        /********************
  Common
********************/

        html, body {
            height: 100%;
            width: 100%;
            font-family: Helvetica, verdana, monospace;
            color: #FFFFFF;
            font-size: 100%;
            padding: 0;
            margin: 0;
            letter-spacing: 0.2rem;
            overflow: hidden;
            background: #131041;
        }

        a {
            color: #FFF;
            text-decoration: none;
        }

        h1 {
            font-size: 1.6rem;
        }

        h2 {
            padding: 0.8rem 0 0 0;
        }

        p {
            padding: 0.8rem 0;
            font-size: 0.8rem;
        }

        div#main {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1.6rem;
            z-index: 4;
        }

        /********************
  Contents
********************/

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        canvas#canvasThunder {
            z-index: 1;
            background: #131041;
        }

        canvas#canvasCloud {
            z-index: 2;
        }

        canvas#canvasRain {
            z-index: 3;
        }
    </style>

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

  

    <div id="contents">
        <canvas id="canvasThunder">This browser cannot use a canvas.</canvas>
        <canvas id="canvasCloud">This browser cannot use a canvas.</canvas>
        <canvas id="canvasRain">This browser cannot use a canvas.</canvas>
    </div>

    <script>
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                var canvasThunder = document.getElementById('canvasThunder');
                var canvasCloud = document.getElementById('canvasCloud');
                var canvasRain = d.........完整代码请登录后点击上方下载按钮下载查看