zoukankan html css js c++ java

雪花特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .snow-container {
            position: fixed;
            height: 100%;
            width: 100%;
            max-width: 100%;
            top: 0;
            overflow: hidden;
            z-index: -2;
            pointer-events: none;

        }
        .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;
        }

        .snow.foreground {
            background-image: url(" https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.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( https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
            -webkit-animation-duration: 20s;
            animation-duration: 20s;
        }

        .snow.middleground.layered {
            -webkit-animation-delay: 10s;
            animation-delay: 10s;
        }

        .snow.background {
            background-image: url( https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.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);
            }
        }
        body {
            background: #000 url( https://files.cnblogs.com/files/qlqwjy/22.bmp) repeat scroll center top;
            color: #000;
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 17px;
            min-height: 101%;
        }
    </style>
</head>

<body>

<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>
</body>

</html>

查看全文

相关阅读:
android 访问SD卡的方法
 android 用Achartengine 作图
 hello
IIS 7.0 "确认文件是否存在"功能
 test
收藏:如何在Web页面上直接打开、编辑、创建Office文档
 JavaScript面向对象技术
 正则表达式30分钟入门教程
 JWT有状态登陆与无状态登陆
 20条JavaScript代码简洁的写法

原文地址：https://www.cnblogs.com/fly-book/p/12015569.html