Efecto de desplazamiento al navegar CSS puro

2050 Andev.web

Abrir en el editor Video Publica tu código

Efecto de desplazamiento al navegar CSS puro

Recomendado

20 December 2025

Visualización de redes neuronales 3D (Three.js)

6 October 2025

Animación de error CSS 404

15 September 2024

CodePen: cómo dibujar flores con Greensock

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);
}

Recomendado

Visualización de redes neuronales 3D (Three.js)

Animación de error CSS 404

CodePen: cómo dibujar flores con Greensock

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS