Tạo hiệu ứng Hover Icon đơn giản bằng CSS3

Trong bài hướng dẫn này, tôi sẽ hướng dẫn các bạn sử dụng CSS3 để tạo ra hiệu ứng hover.

Tạo hiệu ứng Hover Icon đơn giản bằng CSS3
Chúng tôi chia sẻ một số biểu tượng và hiệu ứng chuyển động với bạn. Để tạo ra hiệu ứng tinh tế, chúng ta sử dụng CSS transitions và animations. Các biểu tượng ta sử dụng phông chữ icon (Eco Ico Matthew Skiles), chúng sử dụng bằng cách: chèn vào trước pseudo-class

Tạo đoạn html để sử dụng hiệu ứng:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">

     <a class="hi-icon hi-icon-mobile" href="#">Mobile</a>
     <a class="hi-icon hi-icon-screen" href="#">Desktop</a>
     <a class="hi-icon hi-icon-earth" href="#">Partners</a>
     <a class="hi-icon hi-icon-support" href="#">Support</a>
     <a class="hi-icon hi-icon-locked" href="#">Security</a>

</div>

Và sử dụng đoạn css3 sau để tạo hiệu ứng đơn giản:

.hi-icon-effect-6 .hi-icon {
box-shadow: 0 0 0 4px rgba(255,255,255,1);
transition: background 0.2s, color 0.2s;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
background: rgba(255,255,255,1);
color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}

Demo |

Chúc các bạn thành công!