• 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
  • 0 nhận xét:

    Đăng nhận xét

    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

    Lưu trữ Blog

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

    Cát Tiên - Lâm Đồng

    EMAIL

    contact-support@mail.com
    vanquymmo@mail.com

    TELEPHONE

    +84969519760
    +501 478 9800

    MOBILE

    0969519760,
    017 775362 13