В этой небольшой статье узнаете, как можно самостоятельно сделать красивый эффект загрузки цвета под прописанные знаки. Где при открытие страницы, если берем за аналог логотип, который написан, то можно поставить такой эффект.
Где изначально буквы могут идти в темной гамме, но произойдет эффект загрузки, где скорость можно выставить в стилистике. То при установки и корректной настройке, очень красиво смотрится и главное сразу обращает на себя внимание.
Как пример по полной загрузки оттенка цвета:
Здесь начинается меняться палитра цвета:
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.
Демонстрация
