3d飘雪效果

朴灿烈づ我的快乐病毒、 2022-05-30 02:39 224阅读 0赞

演示需要：4张雪花图（snow.1 - 4.png）和1张背景图

image.src = './images/' + 'snow' + randomInteger(1, 5) + '.png

效果图：

![这里写代码片][70]  
html代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="effect.css">
    </head>
    
    <body>
        <div id="leafContainer">
        </div>
        <script src="snow.js"></script>
    </body>
    
    </html>

css代码

body { background: url('images/bg.jpg') }
    
    #leafContainer { /*position: fixed;*/ z-index: -2; width: 100%; height: 1000px; top: 0; /*overflow:hidden;*/ }
    
    #leafContainer>div { position: absolute; max-width: 100px; max-height: 100px; -webkit-animation-iteration-count: infinite, infinite; -webkit-animation-direction: normal, normal; -webkit-animation-timing-function: linear, ease-in; }
    
    #leafContainer>div>img { /* position: absolute;*/ width: 100%; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -webkit-transform-origin: 50% -100%; }
    
    @-webkit-keyframes fade {
        0% { opacity: 1; }
        95% { opacity: 1; }
        100% { opacity: 0; }
    }
    
    @-webkit-keyframes drop {
        0% { -webkit-transform: translate(0px, -50px); }
        100% { -webkit-transform: translate(0px, 650px); }
    }
    
    @-webkit-keyframes clockwiseSpin {
        0% { -webkit-transform: rotate(-50deg); }
        100% { -webkit-transform: rotate(50deg); }
    }
    
    @-webkit-keyframes counterclockwiseSpinAndFlip {
        0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
        100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
    }

js代码

[70]: /images/20220530/7f3b3d69991e40f994358b6d50a47922.png