Tạo hiệu ứng tuyết rơi trang trí Noel tuyệt đẹp cho Blogspot

Cộng tác viên 01:15 #thủ thuật blogger

Tết Tây gần đến, Noel càng gần hơn, chỉ còn hơn 20 ngày nữa thôi là đến Noel rồi, vì vây nếu bạn muốn trang trí cho blog của bạn có thêm không khí noel thì hãy đọc và thực hiện theo bài viết này.

Bài viết này mình sẽ giới thiệu đến các bạn đoạn CSS và HTML tạo hiệu ứng tuyết rơi tuyệt đẹp cho Blogspot. Đây là hiệu ứng được tạo hoàn toàn từ CSS3, vì vậy sẽ không ảnh hưởng đến tốc độ trang web mà còn làm cho nó rất đẹp nữa!

Các bước thực hiện

Bước 1. Truy cập vào trang chỉnh sửa HTML của Blogspot.
Bước 2. Dán đoạn code này phía trên 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/AVvXsEiH9L1R8CNSR-Me0bIXzm98xYtNTDFQlvl5UcCMpdPuSi-k-dirYyVh0iq0sqXT60b2Yef3LoaEPkzlHQu5gQU8Yt9YQtqLOxuHv_P0tfG-3q1cN_NzrfvEVCIVegNvXe_hRryETAiaLpi8/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/AVvXsEiFnzUWHIIW5A4i3KZ8Rr_4sqiovi-Ot5lOcYFl0jJ8RnFJuWS-HrGVEIL7E2LcDOLeXh1tcuObsTp4Df6mIF-A3e2dUZ8uocYL5cSbe2jwvo1-0u2fudSwx2oqt20EvZraf0aGNDQepcKx/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>

Bước 3. Lưu mẫu.

Tổng kết

Với một đoạn ngắn CSS và HTML, bạn đã có cho mình một hiệu ứng tuyết rơi vĩnh cửu, làm cho trang blog của bạn thêm đẹp hơn trong những ngày Noel sắp tới!
Code được lấy từ blog cũ vì vậy mình không rõ code gốc nằm ở đâu, mình sẽ bổ sung sau.
Chúc các bạn thành công!

0 bình luận

Chia sẻ