首页下雪效果
程序员文章站
2022-05-06 14:21:07
下雪效果,转自网络,快去试试吧 :) 原理 通过多张雪花图片,不同速度的移动,达到下雪的效果。 清晰度: 清晰 模糊 远近: 近 远 HTML CSS ......
下雪效果,转自网络,快去试试吧 :)
原理
通过多张雪花图片,不同速度的移动,达到下雪的效果。
清晰度: 清晰 ----> 模糊
远近: 近 ----> 远
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>
css
.snow-container { position: fixed; top:0; left:0; right: 0; bottom:0; overflow: hidden; z-index: 2; pointer-events: none; background-color: 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); } }
上一篇: 张颌和张辽都投降于曹操 两人的待遇问题为何完全不同
下一篇: 模仿迈克尔杰克逊