Bài 16 - Một số CSS3 hover effect đẹp (Phần 4)

Chào các bạn! Sau kỳ nghỉ tết Nguyên Đán vui vẻ, tích lũy tràn đầy năng lượng, chúng ta tiếp tục quay trở lại với seri vui mắt này. Hôm nay mình sẽ giới thiệu tới các bạn thêm một số effect mới.

1. Effect 8

Để bắt đầu với effect này, chúng ta cùng đi từ phần HTML nhé. Cũng giống như các effect trước đó, phần HTML chỉ đơn giản là gọi các class tương ứng với effect mà thôi, không có gì đặc biệt cả.

HTML

<div id="main">
  <div class="container">
    <div class="row">
      <div class="block col-md-2">
        <i class="hovicon effect-8 color-green">8</i>
      </div>

      <div class="block col-md-2">
        <i class="hovicon effect-8 color-blue">8</i>
      </div>

      <div class="block col-md-2">
        <i class="hovicon effect-8 color-orange">8</i>
      </div>
    </div>
  </div>
</div>

CSS

/* Effect 8 */
 .hovicon.effect-8 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.hovicon.effect-8:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.hovicon.effect-8:hover {
    background: rgba(255, 255, 255, 0.05);
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
    color: #fff;
}

.hovicon.effect-8.color-green:hover{
    color: green;
}

.hovicon.effect-8.color-blue:hover{
    color: blue;
}

.hovicon.effect-8.color-orange:hover{
    color: orange;
}

.hovicon.effect-8:hover i {
    color: #fff;
}
.hovicon.effect-8.color-green:hover:after {
    animation: sonarEffectGreen 1.3s ease-out 75ms;
}

.hovicon.effect-8.color-blue:hover:after {
    animation: sonarEffectBlue 1.3s ease-out 75ms;
}

.hovicon.effect-8.color-orange:hover:after {
    animation: sonarEffectOrange 1.3s ease-out 75ms;
}

Do đoạn css cho effect này khá dài nên mình sẽ cắt thành 2 phần. Phần code bên trên là các css cơ bản cho effect 8. Còn phần code thứ 2 mà mình sẽ post ngay bên dưới sẽ là phần quan trọng nhất, quyết định cái animation của effect này.

@keyframes sonarEffectGreen {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px green, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px green, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes sonarEffectBlue {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px blue, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px blue, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes sonarEffectOrange {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px orange, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px orange, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

Như các bạn đã thấy, phần này mình sử dụng thuộc tính @keyframes để định nghĩa cho animation. Nếu các bạn theo dõi seri này từ đầu của mình, các bạn sẽ thấy mình đã từng sử dụng thuộc tính @keyframes này cho Effect 4b trong Bài 14 - Một số CSS3 hover effect đẹp (Phần 2).

Result

Kết hợp giữa HTML và CSS bên trên, chúng ta có được demo như sau:

2. Effect 9

HTML

<div id="main">
  <div class="container">
    <div class="row">
      <div class="block col-md-2">
        <i class="hovicon effect-9 color-green">9</i>
      </div>

      <div class="block col-md-2">
        <i class="hovicon effect-9 color-blue">9</i>
      </div>

      <div class="block col-md-2">
        <i class="hovicon effect-9 color-orange">9</i>
      </div>
    </div>
  </div>
</div>

CSS

/* Effect 9 */
.hovicon.effect-9 {
    -webkit-transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
}

.hovicon.effect-9:after {
    top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    -moz-transition: -moz-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}
/* Effect 9a */
 .hovicon.effect-9:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.5;
}
.hovicon.effect-9.color-green:hover {
    box-shadow: 0 0 0 10px rgba(0, 128, 0, 0.8);;
    color: green;
}

.hovicon.effect-9.color-blue:hover {
    box-shadow: 0 0 0 10px rgba(0, 0, 255, 0.8);
     color: blue;
}

.hovicon.effect-9.color-orange:hover {
    box-shadow: 0 0 0 10px rgba(255, 165, 0, 0.8);
    color: orange;
}

Result

3. Effect 10

Thực chất, effect này là effect 1a, chỉ khác là mình sẽ sử dùng icon font trong effect này. Các bạn hãy xem lại phần CSS của effect 1 tại đây nhé: Bài 13 - Một số CSS3 hover effect đẹp (Phần 1)

HTML

<div id="main">
  <div class="container">
    <div class="row">
      <div class="block col-md-2">
        <i class="hovicon effect-1 sub-a color-green">
          <b class="fa fa-camera-retro" aria-hidden="true"></b>
        </i>
      </div>

      <div class="block col-md-2">
        <i class="hovicon effect-1 sub-a color-blue">
          <b class="fa fa-camera-retro" aria-hidden="true"></b>
        </i>
      </div>

      <div class="block col-md-2">
        <i class="hovicon effect-1 sub-a color-orange">
          <b class="fa fa-camera-retro" aria-hidden="true"></b>
        </i>
      </div>
    </div>
  </div>
</div>

CSS

Về phần css, tất cả những css của effect 1a mình vẫn giữ nguyên, chỉ bổ sung css cho ** thẻ b** mà thôi. Vì vậy nó cũng khá là đơn giản.

.hovicon.effect-1 b {
    display: block;
    line-height: 90px;
    transition: color 0.5s;
}

.hovicon.effect-1.color-green b {
    color: green;
}

.hovicon.effect-1.color-blue b {
    color: blue;
}

.hovicon.effect-1.color-orange b {
    color: orange;
}

.hovicon.effect-1.sub-a:hover b {
    color: #fff;
}

Result

4. Lời kết

Như vậy, qua 4 bài trong seri này các bạn đã học được kha khá hiệu ứng hover rồi đó. Bài sau nếu có thể, mình sẽ tiếp tục post tiếp về seri này. Còn không thì là 1 chủ đề nào đó. Hi vọng các bài viết của mình vẫn được các bạn tiếp tục ủng hộ. Chúc mừng năm mới!