Effet de survol de navigation en CSS pur

1186 Andev.web

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Effet de survol de navigation en CSS pur

Recommandé

31 May 2025

Un code par alejandrokundrah

26 December 2024

Matrix est un répertoire de page d'accueil

9 July 2025

Sélecteur de thème d'interface utilisateur : options claires, sombres et atténuées

HTML

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}
ul li {
    list-style: none;
}
ul li a {
    position: relative;
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-size: 6.5em;
    font-weight: 900;
    text-decoration: none;
    line-height: 1.2em;
}
ul li a:hover {
    color: #f4f400;
    -webkit-text-stroke: 1px #000;
    transition: 0.5s;
}

ul li a:before,
ul li a:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
  transition: 0.5s;}

ul li a:hover:before {
    color: #f00;
    z-index: 1;
    -webkit-text-stroke: 1px #000;
    transform: translate(10px,-10px);
}
ul li a:hover:after {
    color: #0ff;
    z-index: 2;
    -webkit-text-stroke: 1px #000;
    transform: translate(20px,-20px);
}

Recommandé

Un code par alejandrokundrah

Matrix est un répertoire de page d'accueil

Sélecteur de thème d'interface utilisateur : options claires, sombres et atténuées

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS