• Share CSS3 Animation Hiệu Ứng Tuyết Rơi Đẹp Mắt

    Như những code truyền thống chúng ta phải sử dụng javascript khá lằng nhằng và phức tạp để tạo nên hiệu ứng tuyết rơi cho web. Nhược điểm là khi chạy sẽ làm nặng trang và web đơ đơ rất khó chịu. Với sự phát triển của css3 thì việc tạo nên hiệu ứng tuyết rơi trở nên đơn giản hơn bằng animation

    Code này có thể áp dụng cho mọi web không riêng gì cho blogspot. Các bạn cứ post bên trên thẻ body là được
    Tạo hiệu ứng bông tuyết rơi cho trang Blopspot CSS3 Snow Animation , Bạn sẽ có một website lung linh .đón giáng sinh .
    DEMO: Demo Chu Bằng AiTi  :v

    Share CSS3 Animation Hiệu Ứng Tuyết Rơi cho Web/Wap/Blog Đẹp Mắt


    Bước 1 : Đăng nhập vào Blogger Dashboard,  rồi chọn Template -> Edit Html .
    Bước 2 : Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa sau : </body>  rất đơn giản, chỉ cần copy paste đoạn mã dưới đây vào trên thẻ </body> là đượ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>

    Phần bên trên tức là css để tạo nên hiệu ứng
    Phần thứ 2 là mã html để thực hiện những gì mà css tạo nên
  • GET A FREE QUOTE NOW

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Tìm kiếm Blog này

    Được tạo bởi Blogger.

    Lưu trữ Blog

    ADDRESS

    4759, NY 10011 Abia Martin Drive, Huston

    EMAIL

    contact-support@mail.com
    another@mail.com

    TELEPHONE

    +201 478 9800
    +501 478 9800

    MOBILE

    0177 7536213 44,
    017 775362 13