Гайд Анимированный текст на чистом CSS

[HORMAN]

Можно использовать в различных целях. Сделано достаточно просто

Пожалуйста, авторизуйтесь для просмотра ссылки.

Если хотите сделать ссылку, есть 2 варика:
1. Меняем span на <a>
2. добавляем в <span> onclick=" location.href='site.net' "

HTML:

<span data-text="horman">horman</span>

CSS:

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
*{
 margin: 0;
 padding: 0;
 user-select: none;
 cursor: pointer;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(46, 46, 46);
    font-family: 'Montserrat', sans-serif;
}

span{
    position: relative;
    display: block;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px #fff;
    font-size: 10vh;
    font-weight: 900;
    text-decoration: none;
    line-height: 10vh;
    text-transform: uppercase;
}

span:hover{
    color: #fff;
    -webkit-text-stroke: 1px #000;
    transition: 0.3s;
}

span:before{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.2s;
}

span:after{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.2s;
}

span:hover:before{
    color:#46339c;
    z-index: -1;
    -webkit-text-stroke: 1px #000;
    transform: translate(-5px, 5px);
}

span:hover:after{
    color: #664085;
    z-index: -2;
    -webkit-text-stroke: 1px #000;
    transform: translate(5px, -5px);
}

пока

 

[BoulvardKiddy]

звучит хайпово, а ну если серьезно достаточно прикольный эфект, я такого еще не видел

 

[coder2000]

А можно с комментариями что к чему?

 

[curbonchick]

эффект прикольный. текст флексит

 

[BoulvardKiddy]

А можно с комментариями что к чему?

чел... это html и css only , туторов овер дахуя на ютубе например