• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание загрузки текстовой анимации на CSS (Как сделать анимацию загрузки на чистом CSS3)
Создание загрузки текстовой анимации на CSS
Kosten
Дата: Четверг, 2018-12-27, 20:37 | Сообщение 1
Администраторы
Сообщений:20310
Награды: 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)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание загрузки текстовой анимации на CSS (Как сделать анимацию загрузки на чистом CSS3)
  • Страница 1 из 1
  • 1
Поиск: