• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание загрузки текстовой анимации на CSS (Как сделать анимацию загрузки на чистом CSS3)
Создание загрузки текстовой анимации на CSS
Kosten
Дата: Четверг, 2018-12-27, 20:37 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


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

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

Как пример по полной загрузки оттенка цвета:



Здесь начинается меняться палитра цвета:



HTML

Код
<h1 data-text="ZorNet.Ru - портал">ZorNet.Ru - портал</h1>


CSS

Код
h1 {
    position: relative;
    color: rgba(19, 18, 18, 0.3);
    font-size: 53px;
}
h1:before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    max-width: 10em;
    white-space: nowrap;
    color: #fff;
    animation: loading 7s linear;
}
@keyframes loading {
    0% {
        max-width: 0;
    }
}


Как видим не очень сложно сделать анимацию загрузки на CSS.

Демонстрация
Прикрепления: 3789589.png(7.1 Kb) · 3673231.png(7.2 Kb) · loading-text-an.zip(1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание загрузки текстовой анимации на CSS (Как сделать анимацию загрузки на чистом CSS3)
  • Страница 1 из 1
  • 1
Поиск: