• Страница 1 из 1
  • 1
Форум » Веб-дизайн » Элементы дизайна сайта » Создать текст с эффектом зеркала в CSS (Текст или название с эффектом отражение зеркала)
Создать текст с эффектом зеркала в CSS
Kosten
Дата: Понедельник, 2019-12-02, 23:49 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


Красивый текст, где значение букв изначально идет полноценными, но потом в какое то время или просто ломаются, это похоже как на сложанное отражение. Где может такой эффект пригодится, то здесь можно помыслить, но сам трюк просто оригинально выполнен, который заслуживает внимание.

Зеркальный текст, это то, что мы будем называть в этом материале, где идет довольно короткое руководство, содержащее одну строку 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%);
    }
}

Демонстрация
Прикрепления: 9248736.jpg(14.6 Kb) · cracked-text-ef.zip(3.6 Kb)
Страна: (RU)
Форум » Веб-дизайн » Элементы дизайна сайта » Создать текст с эффектом зеркала в CSS (Текст или название с эффектом отражение зеркала)
  • Страница 1 из 1
  • 1
Поиск: