Trang chủCSSBài viết
CSS

Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào hình ảnh

10/01/2025 1073 lượt xem admin Cập nhật: 04/12/2025
5/5 - (676 bình chọn)

Dán CSS 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)

}

 

Chào ! Bạn thấy nội dung này thế nào?
webdy.vn
webdy.vn

Tạo web nhanh dùng thử miễn phí.

Chia sẻ ↗

Bài liên quan

×