Code Tuyết rơi cho website bằng CSS

Demo hình ảnh:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!– Begin Code Tuyết rơi –>

<style type=’text/css’>
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%}<br />
.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}<br />
.snow.foreground{background-image:url(“https://i.imgur.com/Mc93itw.png”);-webkit-animation-duration:15s;animation-duration:10s}<br />
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}<br />
.snow.middleground{background-image:url(https://i.imgur.com/0lSmBnC.png);-webkit-animation-duration:20s;animation-duration:15s}<br />
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}<br />
.snow.background{background-image:url(https://i.imgur.com/ra8kRtU.png);-webkit-animation-duration:25s;animation-duration:20s}<br />
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}<br />
@-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}<br />
@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}<br />
</style>
<div class="’snow-container’">
<div class="’snow"></div>
<div class="’snow"></div>
<div class="’snow"></div>
<div class="’snow"></div>
<div class="’snow"></div>
<div class="’snow"></div>
</div>
&lt;!– End Code Tuyết rơi –&gt;

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *