Bolehkah seseorang memberitahu saya cara melakukan hover seperti ini dalam css?
Ini ialah contoh persediaan Windows 10. Tetapi saya mahu menirunya dalam css.
Anda boleh menggunakan berbilang imej latar belakang kecerunan untuk mendapatkan kesan pada tuding.
Berikut adalah contohnya. Jelas sekali, bereksperimen dengan pelbagai tetapan sehingga anda mendapat rupa yang anda inginkan.
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menggunakan berbilang imej latar belakang kecerunan untuk mendapatkan kesan pada tuding.
Berikut adalah contohnya. Jelas sekali, bereksperimen dengan pelbagai tetapan sehingga anda mendapat rupa yang anda inginkan.
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>