xin chào các bạn, hôm nay ở bài viết này mình chia sẻ code tuyết rơi cho blog, cực đẹp nha các bạn muốn xem demo thì tại blog mình luôn nha. Code nhẹ mượt sẽ không làm lag blog của bạn, các bạn yên tâm nha
CÁCh THỰC HIỆN
Bước 1 : chèn đoạn code bên dưới trước thẻ<body><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%}
.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9L9xnVmV0OUThOHWcYRYFdH8bjna81ik8cRMkYEs3j3bXqUWZVZAj9JMALep5stGsKyTPjxpQF0d1UUc7dOOEh99sdzDtJXHUdQee50CPa0Wp1_YHSDPu288WjAku8m3GR-7bZ5vmkvjs/s1600/snow-effect-_---------BacSiWindows-Com.png ");-webkit-animation-duration:15s;animation-duration:10s}
.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:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAdduYrWu88Xyr1ZIA-SQtiCRjT_kIMe0MGjPXP4co3R26rKXmP8h19S65LTMk-uqS5Hh_XpiEGfkwNC_JZdFfP5dBUacGRJM3kHFwR9FFzI1egeYtsTzl7sxO2oT1uENMv_6u5FvPYRUY/s1600/snow-effect_-_--------------BacSiWindows-Com.png);-webkit-animation-duration:25s;animation-duration:20s}
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}
@-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)}}
@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)}}
</style>
<div class='snow-container'><div class='snow foreground'/>
<div class='snow foreground layered'/><div class='snow middleground'/><div class='snow middleground layered'/><div class='snow background'/><div class='snow background layered'/></div>
Xem Video Chi Tiết : tại đây
Lời kết :
Chỉ đơn giản vậy thôi, bạn đã có 1 blog đẹp tuyệt vời rồi.Nhớ ủng hộ blog Nguyễn Ngọc Quí nha.
Chúc các bạn thành công!Nguồn Bacsiwindows
