• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимированный текстовые эффект (Стильный эффект печатающегося текста с помощью CSS)
Создать анимированный текстовые эффект
Kosten
Дата: Вторник, 2019-10-29, 02:06 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Если вы ищите красивый эффект знаков или слов, который бы при открытие страницы привлекал к себе внимание, то CSS анимированные текстовые эффекты с несколькими цветами станет отличной анимацией, которая создана на чистом CSS. Узнайте, как создавать текстовые эффекты с анимированными переходами, где будет задан в стилистике небольшой прыжок, так скажем, что можно установить как заголовок.



HTML

Код
<div id="dacekunas">
    <div id="neskolkim-tsvetamig">
        <h1>CSS анимационные прыжки текстовые эффекты</h1>
        <p>Здесь описываем по теме, что заданно в заголовке, который закреплен за описанием.</p>
    </div>
</div>

CSS

Код
#dacekunas {
    margin-left: auto;
    margin-right: auto;
    max-width: 85em;
}
#neskolkim-tsvetamig {
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: center;
    min-height: 100vh;
    padding: 1em;
    width: 100%;
}
h1 {
    animation: text-shadow 1.5s ease-in-out infinite;
    font-size: 5em;
    font-weight: 900;
    line-height: 1;
}
h1:hover {
    animation-play-state: paused;
}
a {
    color: #024794;
}
a:hover {
    text-decoration: none;
}
@keyframes text-shadow {
0% {
    transform: translateY(0);
    text-shadow: 0 0 0 #0b2cec, 0 0 0 #11f0f1, 0 0 0 #f1142f, 0 0 0 #f7f413;
}
20% {
    transform: translateY(-1em);
    text-shadow: 0 0.125em 0 #1030ea, 0 0.25em 0 #18f2f3, 0 -0.125em 0 #f3122d, 0 -0.25em 0 #f3f13d;
}
40% {
    transform: translateY(0.5em);
    text-shadow: 0 -0.0625em 0 #0e2ee6, 0 -0.125em 0 #20eeef, 0 0.0625em 0 #ef1c36, 0 0.125em 0 #f3f019;
}
60% {
    transform: translateY(-0.25em);
    text-shadow: 0 0.03125em 0 #1031ec, 0 0.0625em 0 #1ff0f1, 0 -0.03125em 0 #ec1b35, 0 -0.0625em 0 #f1ee2f;
}
80% {
    transform: translateY(0);
    text-shadow: 0 0 0 #0828e4, 0 0 0 #1ef4f5, 0 0 0 #f5122e, 0 0 0 #f3f16b;
}
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Оригинальный в своей стиле анимированный эффект, которые можно использовать на сайтах.

Демонстрация
Прикрепления: 0550787.jpg(58.1 Kb) · css-animated-ju.zip(3.7 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 21:04 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Терминальный текстовый эффект


See the Pen
Terminal Text Effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 21:06 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Пузырящийся текстовый эффект


See the Pen
Bubbling Text Effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 21:07 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Красивый текстовый эффект


See the Pen
(cool) text effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Понедельник, 2019-11-04, 20:26 | Сообщение 5
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


CSS "загрузка" анимация


See the Pen
CSS "loading" animation
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимированный текстовые эффект (Стильный эффект печатающегося текста с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: