Efecto de desplazamiento al navegar CSS puro

Abrir en el editor Publica tu código

Recomendado

9 September 2024

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

Efecto de desplazamiento al navegar CSS puro

Recomendado

Botón de filtro SVG pegajoso

Un código de slowapp370

Un código de alejandrokundrah

HTML

CSS

JS

Recomendado

Botón de filtro SVG pegajoso

Un código de slowapp370

Un código de alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS