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

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 ! 


Bình luận tại đây:

15 nhận xét:

  1. Nó lag Blog lắm e ơi. CN vui vẻ nha em

    Trả lờiXóa
    Trả lời
    1. Em thấy nó cũng không lag gì mấy anh ơi

      Xóa
    2. máy yếu thì nó hơi lag lag tý

      Xóa
    3. Đúng rồi. Em cũng thấy bình thường. Chắc tùy máy mỗi người

      Xóa
  2. Thay url liên kết giúp Bảo lại là
    http://baoshady.blogspot.com/
    Bảo Cảm ơn <3

    Trả lờiXóa
  3. Hê Yô Wa Sa :v Đổi dùm cái tilte thành : Prince Design Blog hộ e nha bác <3

    Trả lờiXóa
    Trả lời
    1. Tui cứ tưởng bác đổi luôn tên miền :v

      Xóa
    2. Hì :v chắc chắn là sẽ đổi bác ạ :v nhưng có thể là đến đầu năm sau hoạt động lại rồi đổi luôn !

      Xóa

Hãy chứng minh bạn là người có văn hóa qua cách nói chuyện của chính mình.