简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment créer une fonctionnalité de survol comme dans les paramètres de Windows 10 ?
P粉020556231
P粉020556231 2023-09-12 13:02:00
0
1
516

Quelqu'un peut-il me dire comment faire un survol comme celui-ci en CSS ?

Ceci est un exemple de configuration de Windows 10. Mais je veux le reproduire en CSS.

P粉020556231
P粉020556231

répondre à tous(1)
P粉515066518
P粉5150665182023-09-13 00:20:32 1 plancher

Vous pouvez utiliser plusieurs images d'arrière-plan dégradées pour obtenir des effets en survol.

Voici un exemple. Évidemment, expérimentez différents réglages jusqu’à obtenir le look souhaité. 

<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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！