Khóa học Lập trình miễn phí

Interactive Product Card với Animations

Lập trình

Mô tả: Tạo product card với các hiệu ứng animation nâng cao

Hướng dẫn

Lời giải

Tạo product card với: - Hover animations với transform - Loading skeleton - Image zoom effect - Smooth transitions - 3D flip effect

Code mẫu

<!DOCTYPE html>
<html>
<head>
  <style>
    .product-card {
      /* Viết CSS của bạn ở đây */
    }
  </style>
</head>
<body>
  <div class="product-card">
    <div class="card-inner">
      <div class="card-front">
        <img src="https://via.placeholder.com/300x200" alt="Product">
        <h3>Product Name</h3>
        <p>$99.99</p>
      </div>
      <div class="card-back">
        <p>Product description and details</p>
        <button>Add to Cart</button>
      </div>
    </div>
  </div>
</body>
</html>

Thông tin bài tập

Khóa học: HTML & CSS Nâng cao

Bài học: CSS Animations & Transitions

Loại bài tập: Lập trình

Độ khó: Trung cấp

Thời lượng: 55 phút