雪花飄落的效果，純css3實現

本文轉載自查看原文 2019-12-20 11:30 689 Html5+CSS3/ 常用插件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        body{}
        #page_end_html{}
        .box{width: 100%; height: 1500px; background: #000; background: url(img/22.jpg);}
           .snow-container {
                position: fixed;
                height: 100%;
                width: 100%;
                max-width: 100%;
                top: 0;
                overflow: hidden;
                z-index: 2;
                pointer-events: none;
                -webkit-backface-visibility: hidden;
backface-visibility: hidden;
            }
            
            .snow {
                display: block;
                position: absolute;
                z-index: 2;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                pointer-events: none;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
                -webkit-animation: snow linear infinite;
                animation: snow linear infinite;
                -webkit-backface-visibility: hidden;
backface-visibility: hidden;
            }
            
            .snow.foreground {
                background-image: url("img/snow-large.png");
                -webkit-animation-duration: 15s;
                animation-duration: 15s;
            }
            
            .snow.foreground.layered {
                -webkit-animation-delay: 7.5s;
                animation-delay: 7.5s;
            }
            
            .snow.middleground {
                background-image: url(img/snow-medium.png);
                -webkit-animation-duration: 20s;
                animation-duration: 20s;
            }
            
            .snow.middleground.layered {
                -webkit-animation-delay: 10s;
                animation-delay: 10s;
            }
            
            .snow.background {
                background-image: url(img/snow-small.png);
                -webkit-animation-duration: 30s;
                animation-duration: 30s;
            }
            
            .snow.background.layered {
                -webkit-animation-delay: 15s;
                animation-delay: 15s;
            }
            
            @-webkit-keyframes snow {
                0% {
                    -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
                }
                100% {
                    -webkit-transform: translate3d(15%, 100%, 0);
                    transform: translate3d(15%, 100%, 0);
                }
            }
            
            @keyframes snow {
                0% {
                    -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
                }
                100% {
                    -webkit-transform: translate3d(15%, 100%, 0);
                    transform: translate3d(15%, 100%, 0);
                }
            }

        </style>
        
    </head>

    <body class="test">
        <div class="box"></div>
            <div id="page_end_html">
            <div class="snow-container">
                <div class="snow foreground"></div>
                <div class="snow foreground layered"></div>
                <div class="snow middleground"></div>
                <div class="snow middleground layered"></div>
                <div class="snow background"></div>
                <div class="snow background layered"></div>
            </div>
        </div>
        
    </body>
    

</html>

所涉及的圖片如下

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 web前端學習筆記---實現雪花飄落的效果用css3實現閃爍效果 CSS3實現跑馬效果純代碼為網站站點添加雪花飄落效果 CSS3效果：實現氣泡效果 css3實現流星墜落效果 CSS3實現邊框鋸齒效果純CSS3實現蠟燭（冒煙）效果 CSS3實現翻轉(Flip)效果用CSS3動畫特效實現彈窗效果