Hiệu ứng animation xoay vòng khi hover
Hiệu ứng animation xoay vòng khi hover

Đã lâu rồi chưa có viết bài, tính sơ sơ cũng được hơn chục hôm gì đó rồi. Nay mình come back với 1 hiệu ứng animation khá thú vị và cực kì đơn giản chắc chắn sẽ làm website bạn trông sinh động hơn xíu. Đó chính là hiệu ứng xoay vòng tròn khi hover (rê chuột) vào phần tử.

Hiệu ứng animation xoay vòng khi hover

Để hiểu hết về code, mình cần các bạn đọc qua kiến thức về:

Nào giờ thì bắt đầu nhé. Các dòng CSS quan trọng mình vẫn sẽ ghi chú để các bạn hiểu nhé.

Khởi tạo HTML

<div class="circle">
    <i class="fa fa-tint"></i>
    <i class="fa fa-heart"></i>
    <i class="fa fa-pagelines"></i>
</div>

Viết CSS tạo hiệu hứng

@keyframes pcrotate { /* Tạo animation với pcrotate là tên animation */
  from { /* Giá trị ban đầu sẽ là rotate(0deg) tức là k quay 1 góc nào cả */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to { /* Giá trị đích là rotate(360deg) tức là quay 1 góc 360 độ */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes pcrotate { /* CSS Animation trên trình duyệt Chrome + Safari, các trình duyệt khác tương tự như Firefox -moz-, IE -ms- và Opera -o-  */
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.circle { /* Phần tử cha này mình dùng làm demo cho căn giữa nên bạn có thể bỏ qua nếu k cần dùng */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.circle i { /* CSS cho từng icon từ Font Awesome */
  position: relative;
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.75rem;
  text-align: center;
  font-size: 1.85rem;
  border: 2px solid; /* Viền của icon lúc đầu*/
  border-radius: 50%;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  margin: 0 10px;
}

.circle i::after {
  content: "";
  border: 2px dashed; /* Viền đứt sẽ xoay xoay*/
  border-radius: 50%;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
}

.circle i[class~="fa-heart"] { /* Chọn phần từ có class chứa kí tự fa-heart (hình trái tim) và CSS cho nó */
  color: #fe0002;
  border-color: #fe0002;
}

.circle i[class~="fa-heart"]::after {
  border-color: #fe0002;
}

.circle i[class~="fa-pagelines"] {
  color: #7fc142;
  border-color: #7fc142;
}

.circle i[class~="fa-pagelines"]::after {
  border-color: #7fc142;
}

.circle i[class~="fa-tint"] {
  color: #0089ff;
  border-color: #0089ff;
}

.circle i[class~="fa-tint"]::after {
  border-color: #0089ff;
}

.circle i:hover {
  border-color: transparent;
}

.circle i:hover::after { /* CSS khi hover vào phần tử */
  -webkit-animation-name: pcrotate; 
  animation-name: pcrotate; /* Chọn animation theo đúng tên đã tạo */
  -webkit-animation-duration: 5s;
  animation-duration: 5s; /* Thời gian chạy animation */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; /* Số lần lặp animation với infinite là lặp vô hạn */
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear; /* Tốc độ animation với linear là tốc độ từ khi bắt đầu và kết thúc đều như nhau. Ngoài ra, còn có ease, ease-in-out... như thuộc tính transition */
}

Nguyên tắc hoạt động: Khi ta rê chuột vào phần tử thì viền của phần tử đó sẽ trong suốt và thay thế bằng viền mới dạng nét đứt và viền đứt đó sẽ bắt đầu chạy xoay vòng cho đến khi ta rê chuột ra vị trí khác.

Bạn hoàn toàn có thể thay đổi CSS theo ý muốn hoặc áp dụng cho phần tử khác không phải riêng icon Font Awesome vì mình chỉ lấy ví dụ thôi. Nếu muốn nó xoay vòng ngay từ đầu thì không cần thêm hiệu ứng hover vào nữa là được.

Việc chèn HTML và CSS ở đâu chắc các bạn đều biết hết rồi nên mình không đề cập đến nhé.

Lời kết

Đây có thể nói là 1 đoạn CSS rất cơ bản nhưng bạn có thể làm ra 1 hiệu ứng khá vui và đẹp mắt. Nếu có bất kì chỗ nào không hiểu ở dòng code nào thì hãy comment bên dưới cho mình nhé.

Created by: PCDevShare.Com

Rate this post