Hiệu ứng ánh sáng cho sản phẩm khi rê chuột vào ảnh đã trở thành một xu hướng phổ biến trong thiết kế web và trình bày nội dung trực tuyến. Hiệu ứng này thêm sự tương tác vào trang web của bạn và giúp làm nổi bật hình ảnh. Trong bài viết này, chúng ta sẽ tìm hiểu về cách tạo hiệu ứng ánh sáng khi rê chuột vào ảnh.
Đầu tiên, hãy xem xét cách hiệu ứng này hoạt động. Khi người dùng rê chuột qua ảnh sản phẩm, ánh sáng phát ra từ một điểm trên ảnh và lan tỏa từ trái qua phải, tạo ra một hiệu ứng ánh sáng. Hiệu ứng này tạo ra cảm giác rằng ảnh đang phát sáng và thu hút sự chú ý của người dùng.
Bạn hãy vào trang Admin ➔ Giao diện ➔ Sửa giao diện ➔ Styles.css nào và sau đó copy đoạn code phía dưới vào:
.product-small .box-image:hover::before{
-webkit-animation:shine .75s;animation:shine .75s
}
@-webkit-keyframes shine{
100%{left:125%}
}
@keyframes shine{
100%{left:125%}
}
.product-small .box-image::before{
position:absolute;
top:0;
left:-75%;
z-index:2;
display:block;
content:'';
width:50%;
height:100%;
background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}
Bạn cảm thấy bài viết Code hiệu ứng ánh sáng cho sản phẩm như thế nào?
Nếu có góp ý bổ sung đừng ngần ngại đặt câu hỏi phía bên dưới cho Sunday Web và chúc các bạn thao tác thành công!
Website Designer / Developer
Tận Tâm Làm Việc Bằng Cả Trái Tim.
Thiết kế Website – Chia sẻ kiến thức lập trình.