recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment créer une fonctionnalité de survol comme dans les paramètres de Windows 10 ?

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粉020556231P粉020556231521 Il y a quelques jours584

répondre à tous(1)je répondrai

  • P粉515066518

    P粉5150665182023-09-13 00:20:32

    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>

    répondre
    0
  • Annulerrépondre