Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào banner
Dán CSS sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.banner { position: relative; width: 100%; max-width: 800px; /* Điều chỉnh độ rộng banner */ height: 250px; /* Điều chỉnh chiều cao banner */ background: url('https://via.placeholder.com/800x250') no-repeat center/cover; border-radius: 10px; overflow: hidden; /* Ẩn hiệu ứng dư */ display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold; text-transform: uppercase; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); } .banner::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); transform: skewX(-25deg); } .banner:hover::before { animation: shine 1s; } @keyframes shine { 100% { left: 150%; } } |
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
- Hướng dẫn tạo hiệu ứng “Xem thêm / Thu gọn” cho phần mô tả sản phẩm
- Hướng dẫn tạo hiệu ứng placeholder typewriter (gõ chữ) cho ô tìm kiếm
- Dư nhiều dòng trắng có ảnh hưởng đến tốc độ web hay hiệu suất trình duyệt?
- Hướng dẫn Google nhận diện Tên trang web (Site Name) theo hướng dẫn từ Google
- Digital Marketing Giải pháp bán hàng hiệu quả
