Thủ Thuật Blogspot | Share CSS3 Animation Hiệu Ứng Tuyết Rơi Cho Blog Đẹp Mắt

Tác giả : admin | 13:39 03/12/2017 | 208 Lượt xem

Vừa rồi cũng viết 1 bài hướng dẫn cách thêm hiệu ứng tuyết rơi rồi, nhưng mới đây tôi lướt cũng gặp 1 bài hướng dẫn cách thêm hiệu ứng này. Trông cũng khá đẹp mắt nên hôm nay tôi sẽ viết thêm bài chia sẻ cho các bạn cùng nhau trang trí blog nhân dịp giáng sinh sắp tới.

 

  • Cách thực hiện hết sức đơn giản :))
  • Đầu tiên bạn Đăng nhập vào Blogger rồi sau đó đến Chủ đề và nhấn vào chỉnh sửa HTML
  • Tiếo theo thì bạn Ctrl F và tìm thẻ </body> rồi copy đoạn mã bên dưới và dán lên bên trên thẻ </body> vừa tìm được

<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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.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>

<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>

  • Thế là xong. Chúc các bạn thành công !