Chào các bạn, hôm nay chúng ta gặp lại nhau trong seri Một số CSS3 hover effect đẹp. Ở bài trước, mình đã giới thiệu 4 effect khá đẹp tới các bạn. Sang bài này, mình sẽ giới thiệu tiếp một effect hover cũng đẹp không kém.
Nếu bạn nào có nhu cầu muốn tham khảo lại bài trước thì có thể xem tại Bài 13 – Một số CSS3 hover effect đẹp (Phần 1).
Hôm nay, mình tiếp tục nói về effect số 3 và 4. Về phần css chung cho tất cả các effect thì mình đã để ở bài trước. Các bạn có thể click vào link bên trên để xem lại nhé.
1. Effect 3
Css chung cho effect 3 thì như sau
.hovicon.effect-3 {
box-shadow: 0 0 0 4px #fff;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hovicon.effect-3.color-green {
box-shadow: 0 0 0 4px green;
}
.hovicon.effect-3.color-blue {
box-shadow: 0 0 0 4px blue;
}
.hovicon.effect-3.color-orange {
box-shadow: 0 0 0 4px orange;
}
.hovicon.effect-3:after {
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
background: #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
.hovicon.effect-3.color-green:after {
background: green;
}
.hovicon.effect-3.color-blue:after {
background: blue;
}
.hovicon.effect-3.color-orange:after {
background: orange;
}
1.1. Effect 3a
HTML
<div class="row">
<div class="block col-md-2">
<i class="hovicon effect-3 sub-a color-green">3a</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-3 sub-a color-blue">3a</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-3 sub-a color-orange">3a</i>
</div>
</div>
CSS
/* Effect 3a */
.hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
color: #fff;
}
.hovicon.effect-3.sub-a:hover, .hovicon.effect-3.sub-a:hover i {
color: #fff;
}
.hovicon.effect-3.sub-a.color-green:hover, .hovicon.effect-3.sub-a.color-green:hover i {
color: green;
}
.hovicon.effect-3.sub-a.color-blue:hover, .hovicon.effect-3.sub-a.color-blue:hover i {
color: blue;
}
.hovicon.effect-3.sub-a.color-orange:hover, .hovicon.effect-3.sub-a.color-orange:hover i {
color: orange;
}
.hovicon.effect-3.sub-a:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
Result
1.2. Effect 3b
HTML
<div class="row">
<div class="block col-md-2">
<i class="hovicon effect-3 sub-b color-green">3b</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-3 sub-b color-blue">3b</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-3 sub-b color-orange">3b</i>
</div>
</div>
CSS
/* Effect 3b */
.hovicon.effect-3.sub-b, .hovicon.effect-3.sub-b i {
color: #fff;
}
.hovicon.effect-3.sub-b:hover, .hovicon.effect-3.sub-b:hover i {
color: #f06060;
}
.hovicon.effect-3.sub-b:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hovicon.effect-3.sub-b:hover:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
Result
1. Effect 4
CSS chung cho effect 4
.hovicon.effect-4 {
width: 92px;
height: 92px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}
.hovicon.effect-4.color-green {
box-shadow: 0 0 0 4px green;
}
.hovicon.effect-4.color-blue {
box-shadow: 0 0 0 4px blue;
}
.hovicon.effect-4.color-orange {
box-shadow: 0 0 0 4px orange;
}
.hovicon.effect-4:before {
line-height: 92px;
}
.hovicon.effect-4:after {
top: -4px;
left: -4px;
padding: 0;
z-index: 10;
border: 4px dashed #fff;
}
.hovicon.effect-4.color-green:after {
border-color: green;
}
.hovicon.effect-4.color-blue:after {
border-color: blue;
}
.hovicon.effect-4.color-orange:after {
border-color: orange;
}
.hovicon.effect-4.color-green:hover {
box-shadow: none;
color: green;
}
.hovicon.effect-4.color-blue:hover {
box-shadow: none;
color: blue;
}
.hovicon.effect-4.color-orange:hover {
box-shadow: none;
color: orange;
}
.hovicon.effect-4:hover i {
color: #fff;
}
2.1. Effect 4a
HTML
<div class="row">
<div class="block col-md-2">
<i class="hovicon effect-4 sub-a color-green">4a</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-4 sub-a color-blue">4a</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-4 sub-a color-orange">4a</i>
</div>
</div>
CSS
.hovicon.effect-4.sub-a {
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
Result
2.2. Effect 4b
HTML
<div class="row">
<div class="block col-md-2">
<i class="hovicon effect-4 sub-b color-green">4b</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-4 sub-b color-blue">4b</i>
</div>
<div class="block col-md-2">
<i class="hovicon effect-4 sub-b color-orange">4b</i>
</div>
</div>
CSS
Về phần css của effect 4 này khá đặc biệt. Lúc này, chúng ta sẽ dùng @keyframe để tạo effect khi hover. Nếu bạn nào chưa hiểu về @keyframe thì mình sẽ giới thiệu về rule này trong 1 bài viblo sau.
/* Effect 4b */
.hovicon.effect-4.sub-b:hover {
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.hovicon.effect-4.sub-b:hover:after {
-webkit-animation: spinAround 9s linear infinite;
-moz-animation: spinAround 9s linear infinite;
animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spinAround {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}
**Result **
Vậy là với bài này chúng ta lại biết thêm được 4 loại effect thuộc 2 nhóm khác nhau. Ở bài tiếp theo, mình sẽ tiếp tục giới thiệu những effect khác. Hi vọng các bạn sẽ đón nhận những bài viết như thế này.
—–To be continue —–
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Effect 31.1. Effect 3a1.2. Effect 3b1. Effect 42.1....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Effect 31.1. Effect 3a1.2. Effect 3b1. Effect 42.1. Effect 4a2.2. Effect 4b1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Effect 31.1. Effect 3a1.2. Effect 3b1. Effect 42.1. Effect 4a2.2. Effect 4bV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Effect 31.1. Effect 3a1.2. Effect 3b1. Effect 42.1. Effect 4a2.2. Effect 4bV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Effect 31.1. Effect 3a1.2. Effect 3b1. Effect 42.1. Effect 4a2.2. Effect 4bIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các...