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: 943.

ntphong ntphong

Lượt xem: 943

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:
    48,763
    Trang chủ:
    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


    Liên hệ quảng cáo 2
Similar Threads: Hiệu ứng
Diễn đàn Tiêu đề Ngày
RAO VẶT TOÀN QUỐC Giường lưới cho trẻ sơ sinh và những điều cần hiểu rõ Hôm nay lúc 16:36
Diễn đàn xe máy Z1000 độ nhiều option với chủ đề chúc mừng năm mới Hôm nay lúc 14:32
Diễn đàn xe máy Yamaha r1 đầy cứng cáp trong bản độ hàng hiệu cực chất Hôm nay lúc 13:48
Diễn đàn xe máy Loạt ảnh bmw r100 rt mang dáng vóc "võ sĩ" cùng nhiều vũ khí hạng nặng Hôm nay lúc 13:47
Diễn đàn xe máy Siêu phẩm yaz 125 độ khủng với loạt đồ chơi hàng hiệu Hôm nay lúc 12:49
Diễn đàn xe máy Bạn đã chạy winner 150 đúng cách và hiểu về dohc? Hôm nay lúc 12:10
Diễn đàn xe máy Ducati monster 821 vô cùng hấp dẫn trong bản độ đầy đồ hiệu Hôm qua, lúc 21:49
Diễn đàn xe máy Bmw s1000rr đầy cứng cáp với loạt option đồ chơi hàng hiệu Hôm qua, lúc 21:17

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, thùng rác, sim tra sau, giàn phơi thông minh, can ho river city, Toyota camry, can ho novaland @@

Diễn đàn xe máy

Đang tải...