以前的看到有的网站有下雪的效果,觉得很神奇,研究之后,发现原来还是很神奇,我还是不会,写不出来,先存着吧,还是搞机械设计,网页编辑先放一边;

该部分仅登录用户可见

      <!--
<table id="hp_table" role="none">                 
    <tbody>
        <tr>
            <td id="hp_cellCenter" class="hp_hd">
                <div id="hp_container">
                    <div id="snow_ctnr" class="fader" data-bm="54" style="opacity: 1;">
                        <div class="snow_dom_slice snow_fall snow_01">
                            <div class="snow_drifter drift_01">
                            </div>
                        </div>
                        <div class="snow_dom_slice snow_fall snow_02">
                            <div class="snow_drifter drift_02">
                            </div>
                        </div>
                        <div class="snow_dom_slice snow_fall snow_03">
                            <div class="snow_drifter drift_03">
                            </div>
                        </div>
                        <div class="snow_dom_slice snow_fall snow_04">
                            <div class="snow_drifter drift_04">
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
-->
<!--春天来了,不用下雪了201903  -->#snow_ctnr{height:100%;width:100%;top:0;left:0;position:absolute;overflow:hidden;opacity:0}#hp_container #snow_ctnr{z-index:1}
.fader{-webkit-transition:opacity 1s ease-out;transition:opacity 1s ease-out;opacity:0}
.snow_dom_slice{position:absolute;left:0;top:0;width:100%;height:600px}


.snow_fall{-webkit-transform-origin:0% 0%;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;transform-origin:0% 0%;animation-timing-function:linear;animation-iteration-count:infinite}
.snow_01{-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-duration:50s;animation-duration:50s;height:100%;-webkit-animation-name:snow_falling_fore;animation-name:snow_falling_fore;top:-100%}.snow_02{-webkit-animation-delay:25s;animation-delay:25s;-webkit-animation-duration:50s;animation-duration:50s;-webkit-animation-name:snow_falling_fore;animation-name:snow_falling_fore;top:-100%;height:100%}.snow_03{-webkit-animation-delay:0s;-webkit-animation-duration:70s;animation-delay:0s;animation-duration:70s;opacity:.5;-webkit-animation-name:snow_falling_mid;animation-name:snow_falling_mid;top:-100%;height:100%}.snow_04{-webkit-animation-delay:35s;-webkit-animation-duration:70s;animation-delay:35s;animation-duration:70s;opacity:.5;-webkit-animation-name:snow_falling_mid;animation-name:snow_falling_mid;top:-100%;height:100%}
.snow_drifter{width:100%;height:100%;background-repeat:repeat}.drift_01{background-position:10% 20%}.drift_02{background-position:40% 60%}.drift_03{background-position:90% 10%}.drift_04{background-position:50% 15%}
@-webkit-keyframes snow_falling_fore{0%{top:-100%;opacity:0}1%{top:-100%;opacity:1}99.8%{top:100%;opacity:1}99.9%{opacity:0}100%{top:-100%;opacity:0}}
@keyframes snow_falling_fore{0%{top:-100%;opacity:0}1%{top:-100%;opacity:1}99.8%{top:100%;opacity:1}99.9%{opacity:0}100%{top:-100%;opacity:0}}@-webkit-keyframes snow_falling_mid{0%{top:-100%;opacity:0}1%{top:-100%;opacity:1}99.8%{top:100%;opacity:1}99.9%{opacity:0}100%{top:-100%;opacity:0}}@keyframes snow_falling_mid{0%{top:-100%;opacity:0}1%{top:-100%;opacity:1}99.8%{top:100%;opacity:1}99.9%{opacity:0}100%{top:-100%;opacity:0}}
.snow_drifter{background-image:url(https://i.wstary.com/files/images/2019/08/01/4RwM4khEoR/xuehua.png)}

[/login]

Last modification:May 11th, 2020 at 10:34 pm
如果觉得我的文章对你有用,请随意赞赏