| Kosten | Понедельник, 02 Декабря 2019 | Сообщение 1 |
| Красивый текст, где значение букв изначально идет полноценными, но потом в какое то время или просто ломаются, это похоже как на сложанное отражение. Где может такой эффект пригодится, то здесь можно помыслить, но сам трюк просто оригинально выполнен, который заслуживает внимание.
Зеркальный текст, это то, что мы будем называть в этом материале, где идет довольно короткое руководство, содержащее одну строку HTML-элемента и около 100 строк CSS-кода. Вы можете предпочтительно использовать этот эффект при создании заголовка целевой страницы или чего-то в этом роде.
HTML
Код <h1 data-text="НАЗВАНИЕ"><span>НАЗВАНИЕ</span></h1>
CSS
Код h1 {
position: relative;
font-family: 'Montserrat', Arial, sans-serif;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s linear forwards;
}
h1 span {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
-webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
h1::before,
h1::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
h1::before {
animation: crack1 2.5s linear forwards;
-webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
h1::after {
animation: crack2 2.5s linear forwards;
-webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
@keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
@keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
@keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
Демонстрация
| | Страна: (RU) |
| |
