Bagaimana untuk menjadikan fungsi hover seperti dalam tetapan Windows 10?
P粉020556231
P粉020556231 2023-09-12 13:02:00
0
1
519

Bolehkah seseorang memberitahu saya cara melakukan hover seperti ini dalam css?

Ini ialah contoh persediaan Windows 10. Tetapi saya mahu menirunya dalam css.

P粉020556231
P粉020556231

membalas semua(1)
P粉515066518

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!