6 Idées créatives pour les effets de survol de CSS Link

L'ajout d'un effet de survol de la liaison CSS aux pages Web ordinaires peut améliorer l'attrait visuel des pages Web. Si vous avez déjà eu du mal à essayer de créer des effets de volants sympas, cet article vous donnera six effets CSS que vous pouvez utiliser directement pour votre prochain projet.

Commençons!

Je sais que nous parlons de :hover , mais parfois (peut-être pas toujours), c'est une bonne idée d'inclure :focus aussi, car toutes les interactions ne viennent pas directement de la souris, mais peut-être un clic ou une presse à clé.

Effet de survol du lien de surbrillance de la diapositive

Cet effet applique une ombre de boîte pour les liens en ligne tout en modifiant la couleur du texte de lien. Nous ajoutons d'abord un rembourrage environnant pour le lien, puis ajoutons une marge négative de la même valeur pour empêcher le rembourrage de briser le flux de texte.

Nous utiliserons box-shadow au lieu de background , car il nous permet de faire des transitions.

 un {
  Box-Shadow: INSIT 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  Couleur: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  marge: 0 -.25rem;
  rembourrage: 0 .25rem;
  Transition: couleur .3s facilité-ou-out, box-shadow .3s facilite-ou-out;
}
A: Hover {
  Box-Shadow: Inset 100px 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  Couleur: blanc;
}

Effet de survol du commutateur de texte

Ceci est un effet intéressant où nous pouvons échanger le texte lié à un autre texte lors de la volonté. Survolez le texte, le texte du lien glissera et le nouveau texte va glisser.

Les démos sont plus faciles à comprendre que la description.

Cet effet de survol de liaison contient de nombreuses astuces. Mais la magie est qu'il utilise des attributs de données pour définir la diapositive dans le texte et l'appelle à l'aide content du lien ::after pseudo-élément.

Tout d'abord, les balises HTML:

<p> Roquer <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">obtenez un lien</a></p>

Il s'agit de nombreuses balises en ligne, mais ce que vous voyez est une balise de paragraphe qui contient des liens et des portées.

Ajoutons quelques styles de base au lien. Nous devons lui fournir un positionnement relatif pour maintenir le pseudo-élément (sera absolument positionné) en place, assurez-vous qu'il est affiché comme un bloc de ligne pour obtenir la commodité des styles d'éléments de boîte et masquer tout débordement que le pseudo-élément peut provoquer.

 un {
  débordement: caché;
  Position: relative;
  Affichage: bloc en ligne;
}

::before et ::after les pseudo-éléments devrait avoir un positionnement absolu afin qu'ils soient empilés avec le lien réel. Nous nous assurerons qu'ils sont réglés sur toute la largeur du lien avec le décalage de position gauche zéro, prêt pour certaines opérations coulissantes.

 a :: avant,
A :: After {
 contenu: '';
  Position: absolue;
  Largeur: 100%;
  à gauche: 0;
}

::after Pseudo-Element obtient du contenu de l'attribut de données de liaison dans la balise HTML:

 A :: After {
  Contenu: ATR (Data-Replace);
}

Maintenant, nous pouvons utiliser transform: translate3d() pour déplacer ::after un pseudo-élément 200% vers la droite. Nous le retournons vers sa position d'origine sur :hover . Soit dit en passant, nous pouvons définir un décalage zéro pour cela dans la direction supérieure. Ce sera très important lorsque nous utiliserons ::before le pseudo-élément plus tard comme des soulignements de texte.

 A :: After {
  Contenu: ATR (Data-Replace);
  en haut: 0;
  Transform-Origin: 100% 50%;
  Transform: tradlate3d (200%, 0, 0);
}

R: Hover :: After,
A: Focus :: After {
  Transform: tradlate3d (0, 0, 0);
}

Nous allons également convertir transform: scale() ::before le pseudo-élément pour le cacher par défaut, puis à réévaluer :hover . Nous le rendrons plus petite en hauteur, par exemple 2px, et l'épousserons en bas afin qu'il ressemble à un soulignement de texte, qui sera échangé avec ::after .

 a :: avant {
  Background-Color: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6;
  hauteur: 2px;
  en bas: 0;
  Transform-Origin: 100% 50%;
  transformée: scalex (0);
}

R: Hover :: avant,
a: focus :: avant {
  Transform-Origin: 0% 50%;
  transformée: scalex (1);
}

Les autres sont des préférences! Nous ajoutons une transition à l'effet de conversion, quelques couleurs, etc. pour obtenir le plein effet. Ces valeurs sont entièrement à vous.

Afficher le code CSS complet

`` `CSS A {Overflow: Hidden;

A :: Avant, After {Content: ''; %; ATTR (Data-Replace); B54B3D6;}

A: Hover :: avant {Transform-Origin: 0% 50%;

Une portée {Affichage: Bloc en ligne;

A: Hover Span {transform: tradlate3d (-200%, 0, 0);

https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://WWW.PHP.C 620DC7B88E5FE05C70E15B CROPOSITIQUE BORD LINK EFFET HOVER C'est un effet très populaire que j'ai vu dans de nombreux endroits. L'idée est d'utiliser le `:: avant le pseudo-élément du lien comme soulignement épais, qui est légèrement derrière le texte réel du lien. Ensuite, en survol, le pseudo-élément se développe pour couvrir l'ensemble du contenu.

Ok, quelques styles de base pour les liens. Nous n'avons pas besoin de décoration de texte, car `` :: Avant 'agira comme décor de texte, suivi d'un positionnement relatif pour garder `:: avant' en place lorsque vous donnez un positionnement absolu.

`` CSS
un {
  Décoration du texte: aucune;
  Position: relative;
}

Maintenant, mettons ::before que sa hauteur soit d'environ 8px de sorte qu'elle ressemble à un soulignement épais. Nous allons également lui donner un positionnement absolu afin que nous puissions contrôler toute la largeur de la réalisation du lien réel tout en le compensant afin qu'il soit à gauche et juste un peu du bas, ce qui donne l'impression qu'il met en évidence le lien subtilement. Vous pourriez aussi bien le définir sur z-index: -1 , ce qui s'assure qu'il est derrière le lien.

 a :: avant {
  contenu: '';
  Color en arrière-plan: HSLA (196, 61%, 58%, .75);
  Position: absolue;
  à gauche: 0;
  En bas: 3px;
  Largeur: 100%;
  hauteur: 8px;
  Z-Index: -1;
}

très bien. Faisons ressembler à ::before de croître lorsqu'il oscille le lien. Nous avons juste besoin de passer la hauteur de 3px à 100%. Notez que j'ai également restauré le décalage inférieur à zéro afin que l'arrière-plan couvre plus d'espace à mesure qu'il se développe.

 A: Hover :: avant {
  en bas: 0;
  hauteur: 100%;
}

Ajoutez maintenant une légère transition à ces changements:

 a :: avant {
  contenu: '';
  Color en arrière-plan: HSLA (196, 61%, 58%, .75);
  Position: absolue;
  à gauche: 0;
  En bas: 3px;
  Largeur: 100%;
  hauteur: 8px;
  Z-Index: -1;
  Transition: Tous les .3s facilités;
}

Afficher le code CSS complet

`` `CSS A {text-décembre: Aucune;

A :: Avant le contenu: '';

A: Hover :: avant {en bas: 0;

https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://WWW.PHP.C 620DC7B88E5FE05C70E15B Couleur Swap Link Effet de droite de droite à gauche. J'aime personnellement utiliser cet effet dans les liens en navigation. Le lien commence par une couleur sans soulignement. Ensuite, en survol, une nouvelle couleur glisse de la droite et le soulignement glisse de la gauche.

Très soigné, non? Il existe de nombreuses actions, vous voudrez peut-être considérer l'impact de l'accessibilité et inclure tout dans la requête de mouvement réduit préférée pour remplacer par un contenu plus nuancé pour ceux qui sont sensibles au mouvement.

Voici comment cela fonctionne. Nous fournissons un dégradé de fond linéaire pour le lien avec un arrêt difficile entre les deux couleurs à mi-chemin.

`` CSS
un {
  Image d'arrière-plan: gradient linéaire (
    à droite,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
  ));
}

Nous définissons l'arrière-plan sur deux fois la largeur du lien, ou 200% et le positionnons complètement à gauche. De cette façon, il semble que une seule des deux couleurs du dégradé est affichée.

 un {
  Image d'arrière-plan: gradient linéaire (
    à droite,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
  ));
  taille de fond: 200% 100%;
  Position d'arrière-plan: -100%;
}

Des choses magiques se produisent lorsque nous utilisons plusieurs propriétés de -webkit- non standard. On supprime la couleur du texte pour la rendre transparente. Un autre coupe le gradient d'arrière-plan au texte, donc le texte semble en fait être la couleur de l'arrière-plan.

 un {
  Image d'arrière-plan: gradient linéaire (
    à droite,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
  ));
  taille de fond: 200% 100%;
  Position d'arrière-plan: -100%;
  -Webkit-Background-Clip: Texte;
  -Webkit-Text-Fill-Color: transparent;
}

Toujours suivre? Créons maintenant un pseudo-inunderscore du lien en utilisant ::before . Nous lui donnerons la même couleur que la partie cachée du gradient d'arrière-plan du lien et la positionner sous le lien réel afin qu'il ressemble à une text-decoration: underline .

 A: Avant {
  contenu: '';
  Contexte: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  Affichage: bloc;
  Position: absolue;
  En bas: -3px;
  à gauche: 0;
  Largeur: 0;
  hauteur: 3px;
}

En survol, nous glissons ::before en place et entrez de gauche:

 A: Hover {
 Position d'arrière-plan: 0;
}

Maintenant, c'est un peu délicat. En survol, nous définissons le lien ::before le pseudo-élément à 100% de la largeur de liaison. Si nous appliquons cela directement à la survol du lien, nous ferons la pleine largeur du lien, ce qui le déplacera autour de l'écran. Oups!

 A: Hover :: avant {
  Largeur: 100%;
}

Ajoutez un peu de transition pour que les choses se passent bien:

 un {
  Image d'arrière-plan: gradient linéaire (
    à droite,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
    https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
  ));
  taille de fond: 200% 100%;
  Position d'arrière-plan: -100%;
  -Webkit-Background-Clip: Texte;
  -Webkit-Text-Fill-Color: transparent;
  Transition: Tous les 0,3 s facilités;
}

Afficher le code CSS complet

`` `css a {background-image: linéaire-gradient (à droite,

54b3d6,

 <code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

).

R: Avant le contenu: '';

A: Hover {Position de fond: 0;}

A: Hover :: avant {largeur: 100%;}

https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://WWW.PHP.C 620DC7B88E5FE05C70E15B Rainbow Soulignement Link Hover Effet Nous ne pouvons pas utiliser «Text-Decoration-Color: Rainbow», mais nous pouvons le simuler en mélangeant des gradients linéaires et de la magie de fond.

Tout d'abord, nous supprimons la `` Text-Decoration 'du lien:

`` CSS
un {
  Décoration du texte: aucune;
}

Maintenant, c'est un dégradé. Nous relions deux gradients linéaires sur la même propriété background . Un dégradé est la couleur initiale avant de planer. Le second est l'arc-en-ciel à planer.

 un {
  arrière-plan:
    gradient linéaire (
      à droite,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),
    gradient linéaire (
      à droite,
      rgba (255, 0, 0, 1),
      rgba (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  ));
}

Faisons la taille de l'arrière-plan à seulement 3px de haut pour qu'il ressemble, vous savez, souligné. Nous pouvons ajuster la taille des deux gradients sur background-size en même temps afin que le gradient initial soit pleine largeur et 3px de hauteur, tandis que l'arc-en-ciel a une largeur nul.

 un {
  arrière-plan:
    gradient linéaire (
      à droite,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),
    gradient linéaire (
      à droite,
      rgba (255, 0, 0, 1),
      rgba (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  ));
  taille arrière: 100% 3px, 0 3px;
}

Maintenant, nous pouvons positionner le gradient de fond sur background-position en même temps afin que le premier gradient soit entièrement visible et que l'arc-en-ciel soit poussé hors de vue. Oh, assurez-vous que l'arrière-plan ne se répète pas lorsqu'il est utilisé.

 un {
  arrière-plan:
    gradient linéaire (
      à droite,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),
    gradient linéaire (
      à droite,
      rgba (255, 0, 0, 1),
      rgba (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  ));
  taille arrière: 100% 3px, 0 3px;
  Position d'arrière-plan: 100% 100%, 0 100%;
  République de fond: sans répétition;
}

Mettons à jour background-size sur le plan de survol afin que la valeur du swap de gradient:

 A: Hover {
  taille arrière: 0 3px, 100% 3px;
}

Enfin, faites une petite transition lorsque le volant se produit:

 un {
  arrière-plan:
    gradient linéaire (
      à droite,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),
    gradient linéaire (
      à droite,
      rgba (255, 0, 0, 1),
      rgba (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  ));
  taille arrière: 100% 3px, 0 3px;
  Position d'arrière-plan: 100% 100%, 0 100%;
  République de fond: sans répétition;
  Transition: taille arrière 400 ms;
}

Regarder!

Effet de survol par lien de soulignement

Geoff Graham a en fait introduit cet effet lorsqu'il a récemment analysé l'effet de survol cool d'Adam Argyle. Dans sa démo, la couleur d'arrière-plan derrière le lien entre de la gauche et sort de la droite lorsque la souris se déplace.

Ma version simplifie l'arrière-plan pour ressembler davantage à un soulignement.

 un {
  Position: relative;
}

a :: avant {
    contenu: '';
    Position: absolue;
    Largeur: 100%;
    hauteur: 4px;
    Border-Radius: 4px;
    Background-Color: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B18272F;
    en bas: 0;
    à gauche: 0;
    Transform-Origin: à droite;
    transformée: scalex (0);
    Transition: transformer .3s Factual-Out;
  }

A: Hover :: avant {
  Transform-Origin: à gauche;
  transformée: scalex (1);
}

Ce n'est pas le seul moyen d'y parvenir! Voici une autre façon dont Justin Wong utilise l'arrière-plan:

Geoff propose également une gamme d'effets de survol de CSS Link, de soigneux à totalement ridicule. Vaut un coup d'œil! Pour un contenu utile sur les styles de liens et de bouton, consultez le tutoriel de Philip Zastrow sur DigitalOcean.

Juste lien!

Il existe de nombreuses options pour créer votre propre effet de survol des liens en ligne à l'aide de CSS. Vous pouvez même jouer avec ces effets et créer de nouveaux effets. J'espère que vous avez apprécié cet article. Continuez à essayer!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!