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


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

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



HTML

Код
<h1 aria-label="zornet.ru"></h1>

CSS

Код
h1 {
    position: relative;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: calc(10px + 10vw);
    font-weight: 700;
    color: #f5f5f5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    perspective: 500px;
}

h1::before,
h1::after {
    content: attr(aria-label);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    text-shadow: 0.01em 0.01em 0.01em rgba(0, 0, 0, 0.3);
}

h1::before {
    animation: floatAbove 3.5s ease-in-out infinite;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

h1::after {
    opacity: 0.65;
    filter: blur(0.02em);
    transform: translate(-50%, -50%) rotateX(21deg);
    animation: floatBelow 3.5s ease-in-out infinite;
    -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

@keyframes floatAbove {
    50% {
        transform: translate(-50%, -60%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
                clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
    }
}

@keyframes floatBelow {
    50% {
        transform: translate(-50%, -60%) rotateX(10deg);
        -webkit-clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
    }
}

Демонстрация
Прикрепления: 3161309.jpg(25.2 Kb) · refracted-float.zip(3.5 Kb)
Страна: (RU)
Форум » Веб-дизайн » Элементы дизайна сайта » Эффект преломленного плавающего текста (Элемент эффекта текста, которое идет на плаву при CSS)
  • Страница 1 из 1
  • 1
Поиск: