CSS - Hiệu ứng trượt lên xuống trái phải

Thảo luận trong 'Sưu tầm Code Web hay' bắt đầu bởi ntphong, 27/1/15.

CSS - Hiệu ứng trượt lên xuống trái phải

Sưu tầm Code Web hay, 27/1/15. Trả lời: 0, Đọc: 1,034.

ntphong ntphong

Lượt xem: 1,034

Bạn đang xem:

CSS - Hiệu ứng trượt lên xuống trái phải

Coppy cùng chia sẻ nhé bạn!
  1. ntphong

    ntphong Administrator Staff Member

    Tham gia ngày:
    25/12/14
    Bài viết:
    49,745
    Trang chủ:

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Khi lang thang vào những website chuyên giới thiệu các sản phẩm công nghệ, phong cách giao diện metro. Chúng ta thấy đôi khi họ sử dụng hiệu ứng trượt theo chiều ngang hoặc chiều dọc khá đẹp mắt.

    Để làm được hiệu ứng đó, nhiều bạn cứ nghĩ phải đụng đến jquery hay đại loại là cần đến javascript. Và hầu hết các website giải quyết vấn đề theo cách này.
    Với tôi thì nghĩ khác, tại sao chúng ta lại phải dùng js, nếu trinh duyệt tắt js thì sao. Trong khi vấn đề đó có thể được giải quyết đơn giản.

    [​IMG]

    Bài viết này là một demo mẫu viết bằng HTML + CSS, rất dễ tùy biết, nhanh gọn đẹp.
    <style>
    #bendoi{width:500px; height:300px; border:0px solid #ccc; float:left;overflow:hidden;}
    .ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #ccc;display: block;overflow:hidden;box-align:center;text-align:center; min-width:50px; min-height:100px; position: relative;
    display: table-cell;vertical-align: middle;
    }
    /*ngang*/
    .ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
    padding-top:35px}

    .ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s; padding-top:35px}

    .ngang:hover .trai {margin-left: 120px;}
    .ngang:hover .phai {margin-right: 120px;}
    /*doc*/
    .doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s; top:10px}

    .doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
    bottom:10px;}

    .doc:hover .tren {margin-top: 70px;}
    .doc:hover .duoi {margin-bottom: 70px;}

    </style>

    <div id="bendoi">
    <div class="ngang" style="width:150px; ">
    <div class="trai"> trai </div>
    <div class="phai"> phai </div>
    </div>

    <div class="doc" style="width:; height:;">
    <div class="tren"> tren </div>
    <div class="duoi"> duoi </div>
    </div>


    <div class="doc" style="width:; height:;">
    <div class="tren"> tren </div>
    <div class="duoi"> duoi </div>
    </div>

    <div class="ngang" style="width:150px; height:;">
    <div class="trai"> trai </div>
    <div class="phai"> phai </div>
    </div>

    <div class="ngang" style="width:150px; height:;">
    <div class="trai"> trai </div>
    <div class="phai"> phai </div>
    </div>

    <div class="doc" style="width:; height:;">
    <div class="tren"> tren </div>
    <div class="duoi"> duoi </div>
    </div>

    <div class="ngang" style="width:150px; height:;">
    <div class="trai"> trai </div>
    <div class="phai"> phai </div>
    </div>

    <div class="doc" style="width:; height:;">
    <div class="tren"> tren </div>
    <div class="duoi"> duoi </div>
    </div>

    </div> gửi email đến tôi nếu bạn muốn có một thiết kế riêng thật đẹp mắt và không "đụng hàng"
    trai
    phai
    tren
    duoi
    tren
    duoi
    trai
    phai
    trai
    phai
    tren
    duoi
    trai
    phai
    tren
    duoi


    Thao Trinh



    Read more: http://web.bendoi.vn/2013/09/css-hieu-ung-truot-len-xuong-trai-phai.html#.VMdTS9KUffI#ixzz3Q0iVqlf9
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: CSS - Hiệu ứng trượt lên xuống trái phải

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, sim tra sau, giàn phơi thông minh, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, fpt ho chi minh, @@
=