html全屏烟花特效代码

在网页上添加烟花特效会使网页更加有趣和生动。下面将介绍一个html全屏烟花特效代码。

!DOCTYPE HTML>
    html>
     head>
        meta charset="utf-8">
        title>
    全屏烟花特效/title>
        style>
        #firework{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10000;
        }
        .fireworks{
                 width: 20px;
                height: 20px;
                position: absolute;
                z-index: 10000;
                -webkit-animation: colors 0.5s infinite alternate;
                width:25px;
                height:25px;
        }
        .firework-one{
                background-color: #fc0;
        }
        .firework-two{
                background-color: #f90;
        }
        .firework-three{
                background-color: #f60;
        }
        .firework-four{
                background-color: #f30;
        }
        .firework-five{
                background-color: #f00;
        }
        @-webkit-keyframes colors {
            0% {
                    background-color:#f00;
            }
            25% {
                    background-color:#f90;
            }
            50% {
                    background-color:#fc0;
            }
            75% {
                    background-color:#f60;
            }
            100% {
                    background-color:#f30;
            }
        }
        /style>
    /head>
    body>
        div id="firework">
            div class="fireworks firework-one" style="left:5%;
    top:5%;
    ">
    /div>
            div class="fireworks firework-two" style="left:20%;
    top:20%;
    ">
    /div>
            div class="fireworks firework-three" style="left:80%;
    top:50%;
    ">
    /div>
            div class="fireworks firework-four" style="left:50%;
    top:30%;
    ">
    /div>
            div class="fireworks firework-five" style="left:70%;
    top:70%;
    ">
    /div>
        /div>
    /body>
     /html>
    

代码中，首先定义了一个id为"firework"的div，设置其宽高为100%，用于局部全屏，z-index为10000，使其置于页面最前端。接着定义了五个类名为"fireworks"的div，作为烟花元素。通过子类来定义五种颜色，使用webkit-animation属性来实现颜色的渐变，并设置了其位置。最后在"firework"中添加了五个子元素。这个特效可以通过增加或删除元素来实现更多烟花效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！