Hiệu ứng khi di chuột - II

Bài học 31 trên 31 trong khóa học Thẻ 3D | Dự án front-end của Coddy.

Đoạn code này tạo kiểu cho các nút mạng xã hội bên trong vùng chứa có lớp "social-buttons-container", nằm trong một phần tử có lớp "bottom". Mình sẽ giải thích từng phần:

Ba khối code đầu tiên thiết lập hiệu ứng chuyển tiếp cho các nút mạng xã hội. Mỗi nút có thời gian trễ khác nhau trước khi hiệu ứng chuyển tiếp bắt đầu. Các hiệu ứng này áp dụng cho thuộc tính "transform" (có thể dùng để xử lý chuyển động) và thuộc tính "box-shadow" (có thể dùng để tạo hiệu ứng đổ bóng). Nhờ đó, chuyển động của nút và thay đổi bóng diễn ra mượt mà theo thời gian.
Khối thứ tư đặt chiều rộng và màu tô cho các biểu tượng SVG (Scalable Vector Graphics) bên trong các nút mạng xã hội.
Khối thứ năm thiết lập kiểu khi bạn di chuột lên một nút mạng xã hội. Khối này đổi màu nền thành màu đen và đổi con trỏ thành hình bàn tay, cho biết nút có thể nhấp vào.
Khối cuối cùng đổi màu tô của biểu tượng SVG thành màu trắng khi bạn di chuột lên nút mạng xã hội, giúp người dùng nhận biết thay đổi bằng hình ảnh.

Thử thách

Dễ

Sử dụng code này:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

Thẻ 3D của bạn đã sẵn sàng!

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Thẻ 3D | Dự án front-end

Tự luyện tập: Playground Web