Bagaimana untuk menjadikan fungsi hover seperti dalam tetapan Windows 10?
Bolehkah seseorang memberitahu saya cara melakukan hover seperti ini dalam css?
Ini ialah contoh persediaan Windows 10. Tetapi saya mahu menirunya dalam css.
Rumah > Soal Jawab > teks badan
Bolehkah seseorang memberitahu saya cara melakukan hover seperti ini dalam css?
Ini ialah contoh persediaan Windows 10. Tetapi saya mahu menirunya dalam css.
P粉5150665182023-09-13 00:20:32
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>