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,012.

ntphong ntphong

Lượt xem: 1,012

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,740
    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é!

Similar Threads: Hiệu ứng
Diễn đàn Tiêu đề Ngày
RAO VẶT TOÀN QUỐC Tuyệt đối không sử dụng quá nhiều rau mùng tơi Thứ năm lúc 16:41
RAO VẶT TOÀN QUỐC Mách bạn 3 cách dùng hành tây trị tàn nhang hiệu quả nhất 2017 Thứ năm lúc 11:07
RAO VẶT MIỀN NAM Đặc sản khô gà lá chanh - món ăn được săn lùng nhiếu nhất trong mùa tết 2017 Thứ tư lúc 18:24
RAO VẶT MIỀN NAM Những mẹo giúp bạn sủa tủ lạnh tại chỗ hiệu quả Thứ tư lúc 13:46
RAO VẶT TOÀN QUỐC Tinh bột nghệ và tác dụng trị nám tàn nhang vô cùng hiệu quả Thứ ba lúc 16:45
RAO VẶT TOÀN QUỐC Cách sử dụng fucoidan hiệu quả Thứ ba lúc 14:36
RAO VẶT TOÀN QUỐC Từ vựng cần học khi giới thiệu bản thân bằng tiếng nhật Thứ ba lúc 14:00
RAO VẶT TOÀN QUỐC Diệt côn trùng hiệu quả nhất Thứ hai lúc 23:49

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, Toyota camry 2017, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, @@
=