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
Dán CSS vào
|
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 40 41 42 43 |
.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) } |
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:
