【雪花点】雪花点的显示——（一）

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7         <style type="text/css">
  8             .snow-container {
  9                 position: absolute;
 10                 height: 800px;
 11                 width: 90%;
 12                 max-width: 100%;
 13                 top: 0;
 14                 overflow: hidden;
 15                 z-index: 2;
 16                 pointer-events: none;
 17                 background-color: green;
 18             }
 19             
 20             .snow {
 21                 display: block;
 22                 position: absolute;
 23                 z-index: 2;
 24                 top: 0;
 25                 right: 0;
 26                 bottom: 0;
 27                 left: 0;
 28                 pointer-events: none;
 29                 -webkit-transform: translate3d(0, -100%, 0);
 30                 transform: translate3d(0, -100%, 0);
 31                 -webkit-animation: snow linear infinite;
 32                 animation: snow linear infinite;
 33             }
 34             
 35             .snow.foreground {
 36                 background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
 37                 -webkit-animation-duration: 15s;
 38                 animation-duration: 15s;
 39             }
 40             
 41             .snow.foreground.layered {
 42                 -webkit-animation-delay: 7.5s;
 43                 animation-delay: 7.5s;
 44             }
 45             
 46             .snow.middleground {
 47                 background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
 48                 -webkit-animation-duration: 20s;
 49                 animation-duration: 20s;
 50             }
 51             
 52             .snow.middleground.layered {
 53                 -webkit-animation-delay: 10s;
 54                 animation-delay: 10s;
 55             }
 56             
 57             .snow.background {
 58                 background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
 59                 -webkit-animation-duration: 30s;
 60                 animation-duration: 30s;
 61             }
 62             
 63             .snow.background.layered {
 64                 -webkit-animation-delay: 15s;
 65                 animation-delay: 15s;
 66             }
 67             
 68             @-webkit-keyframes snow {
 69                 0% {
 70                     -webkit-transform: translate3d(0, -100%, 0);
 71                     transform: translate3d(0, -100%, 0);
 72                 }
 73                 100% {
 74                     -webkit-transform: translate3d(15%, 100%, 0);
 75                     transform: translate3d(15%, 100%, 0);
 76                 }
 77             }
 78             
 79             @keyframes snow {
 80                 0% {
 81                     -webkit-transform: translate3d(0, -100%, 0);
 82                     transform: translate3d(0, -100%, 0);
 83                 }
 84                 100% {
 85                     -webkit-transform: translate3d(15%, 100%, 0);
 86                     transform: translate3d(15%, 100%, 0);
 87                 }
 88             }
 89         </style>
 90     </head>
 91 
 92     <body>
 93         <div class="snow-container">
 94             <div class="snow foreground"></div>
 95             <div class="snow foreground layered"></div>
 96             <div class="snow middleground"></div>
 97             <div class="snow middleground layered"></div>
 98             <div class="snow background"></div>
 99             <div class="snow background layered"></div>
100         </div>
101     </body>
102 
103 </html>

效果:

操作简单方便，不用引入其他文件.

如果希望在有滚动条的页面鼠标滚动时也显示页面可以修改上面.snow-container的样式:

将其位置设为fixed，宽度与高度占满全屏。z-index设为负数在内容后面显示。

.snow-container {
                position: fixed;
                height: 100%;
                width: 100%;
                max-width: 100%;
                top: 0;
                overflow: hidden;
                z-index: -2;
                pointer-events: none;
                background-color: green;
            }

效果: