Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào logo
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 |
.header-logo a { position: relative; display: inline-block; overflow: hidden; /* Ẩn hiệu ứng dư */ } .header-logo a::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.4) 100%); transform: skewX(-25deg); } .header-logo a:hover::before { animation: shine 0.75s; } @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:
