Chủ Nhật, 12 tháng 1, 2014
» » Một số hiệu ứng hover sử dụng CSS3 (phần 3)

on
1 nhận xét
Xin chào các bạn!
Hôm nay, tôi sẽ tiếp tục giới thiệu với các bạn những hiệu ứng hover đẹp mắt, sử dụng CSS3.

HIỆU ỨNG 4:
  
Code HTML:
        <div id="effect4" class="image">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUOtqO4vBPT5YzW9p-hAW5xr2D_Uju50oepXin8mMjAAqC5o__bsFGtOLG01rTBB33TVf_yF-6cfIiFOkkWV-eES1ckQl0MCvBwkE4kVerp8uc0vuAy4dys4JJTK0zLEIUMZn1FWfIK8/s1600/effect-4.jpg" />
        <div class="detail">
            <h1 class="title">Hiệu ứng 4</h1>
            <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>
            <a href="#">Xem tiếp</a>
        </div>
        </div> 

Code CSS 

   #effect4 .detail{
        background: rgba(0,0,0,0.8);
        transform:scale(0) rotate(360deg); //thu nhỏ phần detail về giá trị bằng 0 và quay nó một góc 360 độ
        //Sử dụng cho trình duyệt Chrome và Safari
        -webkit-transform:scale(0) rotate(360deg);
        // Đặt thời gian thực hiện hiệu ứng là 0.5s với hiệu ứng ease-in-out và time delay là 0.3s
        transition: all 0.5s ease-in-out 0.3s;
        -webkit-transition: all 0.5s ease-in-out 0.3s;
        -moz-transition: all 0.5s ease-in-out 0.3s;
    }
    #effect4 .title{
        color: #fff;
        margin: 0 10px;
        padding: 20px 10px;
        border-bottom: 1px solid #444;
    }
    #effect4 a{
        color:#fff;
        background: rgba(0,0,0,1);
    }
    #effect4 img{
        transition: all 0.5s ease-in-out 0.2s;
        -webkit-transition: all 0.5s ease-in-out 0.2s;
        -moz-transition: all 0.5s ease-in-out 0.2s;
    }
    #effect4:hover img{
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
    }
    #effect4:hover .detail{
        transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -moz-transform: scale(1) rotate(0deg);
    }
Xem demo

HIỆU ỨNG 5:

Code HTML:
    <div id="effect5" class="image">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1kfb6z5wU4LHWWh1_aAwAOfpuyakC6th1GXJAdTC3fjczt0MLJzfkFuPFB9jONcy_BpUMez2vfd6Ql9y87vuXB8jn_UqSoQeknwv5iYlOH507CxHSkXuE6b0dPH1rse3kcTJTtn6xE8/s1600/effect-5.jpg" />
        <div class="detail">
            <h1 class="title">Hiệu ứng 5</h1>
            <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>
            <a href="#">Xem tiếp</a>
        </div>
    </div> 

CODE CSS 
   #effect5 .detail{
        background: rgba(146,96,91,0.3);
        transform:translateX(-100%);// Đẩy phần detail sang trái ra khỏi #effect5
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        transition:all 0.4s ease-in-out 0s;
        -moz-transition:all 0.4s ease-in-out 0s;
        -webkit-transition:all 0.4s ease-in-out 0s;
    }
    #effect5 .title{
        background: rgba(255,255,255,0.5);
        box-shadow: 0 1px 3px #999;
        color:#111;
    }
    #effect5 p{
        color:#111;
        opacity: 0;
        transition:all 0.4s linear 0.5s;
        -webkit-transition:all 0.4s linear 0.5s;
        -moz-transition:all 0.4s linear 0.5s;
        font-weight: bold;
    }
    #effect5 img{
        transition:all 0.4s ease-in-out 0s;
        -moz-transition:all 0.4s ease-in-out 0s;
        -webkit-transition:all 0.4s ease-in-out 0s;
    }
    #effect5 a{
        background: #111;
        border-radius: 0;
        color:#fff;
    }
    #effect5:hover .detail{
        transform:translateX(0);
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
    }
    #effect5:hover img{
        transform:translateX(100%);
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);        
    }
    #effect5:hover p{
        opacity: 1;
    }

 Xem demo

HIỆU ỨNG 6

Code HTML:

    <div id="effect6" class="image">
        <img src="effect-6.jpg" />
        <div class="detail">
            <h1 class="title">Hiệu ứng 6</h1>
            <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>
            <a href="#">Xem tiếp</a>
        </div>
    </div>

Code CSS:

   #effect6 .detail{
        background: rgba(146,96,91,0.5);
        opacity: 0;
        transition: all 0.3s ease-in 0.2s;
        -webkit-transition: all 0.3s ease-in 0.2s;
        -moz-transition: all 0.3s ease-in 0.2s;
    }
    #effect6 .title{
        color:#fff;
        margin: 0 10px;
        padding: 20px;
        border-bottom: 1px solid #444;
        opacity: 0;
        transition:all 0.5s ease-in-out 0.3s;
        -webkit-transition:all 0.5s ease-in-out 0.3s;
        -moz-transition:all 0.5s ease-in-out 0.3s;
        transform: scale(10);
        -moz-transform: scale(10);
        -webkit-transform: scale(10);
        position: relative;
    }
    #effect6 p{
        opacity: 0;
        transition:all 0.5s ease-in-out 0.3s;
        -webkit-transition:all 0.5s ease-in-out 0.3s;
        -moz-transition:all 0.5s ease-in-out 0.3s;
        transform: scale(10);
        -moz-transform: scale(10);
        -webkit-transform: scale(10);
        position: relative;
    }
    #effect6 a{
        opacity: 0;
        transition:all 0.6s ease-in-out 0.3s;
        -webkit-transition:all 0.6s ease-in-out 0.3s;
        -moz-transition:all 0.6s ease-in-out 0.3s;
        background: #111;
        color:#fff;
        border-radius: 0;
        transform:translateY(100px);
        -moz-transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    #effect6:hover .detail{
        opacity: 1;
    }
    #effect6:hover .title, #effect6:hover p{
        opacity: 1;
        transform:scale(1);
        -moz-transform:scale(1);
        -webkit-transform:scale(1);
    }
    #effect6:hover a{
        opacity: 1;
        transform:translateY(0px);
        -moz-transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }

Xem demo

HIỆU ỨNG 7:

Code HTML:

    <div id="effect7" class="image">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiax4sCc25YVIEMSjD3epWV0AmQrmzHJ7-96rq_zpZKd-vUU0Fr6j-1gquGt_myyYv25oRMnaGqweWvcBbfGiMaK9kOMEOLu_gMjpx6IB_jGTjVOyQJebJqG9akLVKzSvF9hGNTJ37OXi8/s1600/effect-7.jpg" />
        <div class="detail">
            <h1 class="title">Hiệu ứng 7</h1>
            <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>
            <a href="#">Xem tiếp</a>
        </div>
    </div>  

Code CSS:

    #effect7 img{
        transition: all 0.8s;
        -moz-transition: all 0.8s;
        -webkit-transition: all 0.8s;
    }
    #effect7 .detail{
        background:rgba(238,220,130,0.7);
        transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transition: all 0.4s;
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition-delay: 0.6s;
        -moz-transition-delay: 0.6s;
        -webkit-transition-delay: 0.6s;
    }
    #effect7 .title{
        background:rgba(255,255,255,0.7);
        position: relative;
        transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -webkit-transform:translateX(-100%);
        transition: all 0.6s;
        -moz-transition: all 0.6s;
        -webkit-transition: all 0.6s;
        transition-delay:1s;
        -moz-transition-delay:1s;
        -webkit-transition-delay:1s;
    }
    #effect7 p{
        color:#111;
        transform:translateX(100%);
        -moz-transform:translateX(100%);
        -webkit-transform:translateX(100%);
        transition: all 0.6s;
        -moz-transition: all 0.6s;
        -webkit-transition: all 0.6s;
        transition-delay:1s;
        -moz-transition-delay:1s;
        -webkit-transition-delay:1s;
    }
    #effect7 a{
        background: rgba(0,0,0,0.7);
        color:#fff;
        transform: scale(0);
        -moz-transform: scale(0);
        -webkit-transform: scale(0);
        transition: all 0.8s;
        -moz-transition: all 0.8s;
        -webkit-transition: all 0.8s;
        transition-delay:1s;
        -moz-transition-delay:1s;
        -webkit-transition-delay:1s;
    }
    #effect7:hover img{
        transform: scale(0) rotateX(360deg);
        -moz-transform: scale(0) rotateX(360deg);
        -webkit-transform: scale(0) rotateX(360deg);
    }
    #effect7:hover .detail{
        transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    #effect7:hover .title,#effect7:hover p{
        transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    #effect7:hover a{
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
    }

Xem demo

HIỆU ỨNG 8:
Code HTML:
   <div id="effect8" class="image">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByYXjUfTtesPm4cEwZbyFzj8aOc5C8CxOmKKxhnsAhoMzbe5ahwrSyuXK2Kr1h1quqtrELAJuP7kAXSshdwWF89AlrrZ2TcbvpEiRNJHFvxYRmWl5rum_NWubuuYQhg9snf1Q6Xy7v54/s1600/effect-8.jpg" />
        <div class="detail">
            <h1 class="title">Hiệu ứng 8</h1>
            <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>
            <a href="#">Xem tiếp</a>
        </div>
    </div>    

Code CSS:

    #effect8 .detail{
        background: rgba(0,0,0,0.9);
        transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        z-index: -10;
        transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }
    #effect8 .title{
        background: rgba(255,255,255,0.9);
        box-shadow: 0px 1px 3px #f1f1f1;
    }
    #effect8 a{
        background:rgba(255,255,255,0.9);
        color: rgba(0,0,0,1);
        transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        border: none;
    }
    #effect8 img{
        transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }
    #effect8:hover img{
        transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }
    #effect8:hover .detail{
        transform: rotateY(0);
        -moz-transform: rotateY(0);
        -webkit-transform: rotateY(0);
        z-index: 10;
    }
    #effect8 a:hover{
        border-radius: 50%;
    }

Xem demo

Tôi sẽ kết thúc phần hiệu ứng hover sử dụng CSS3 ở đây. CSS3 thật thú vị phải không?
Hy vọng từ những hiệu ứng tôi đã giới thiệu, các bạn sẽ sáng tạo được thêm nhiều hiệu ứng tuyệt vời hơn nữa.
Người đăng: vào lúc 06:19
Share:

1 nhận xét:

  1. Unknownlúc 02:11 7 tháng 6, 2014

    Nhìn nhức cả đầu, mình đang tìm hiểu về cái này, cám ơn bạn nhé :)
    loa hội trường

    Trả lờiXóa

Đăng ký: Đăng Nhận xét (Atom)