Данный пример анимации текста с помощью CSS — отличный способ украсить любой текстовый элемент вашего сайта.
HTML
<h1 data-shadow='dang!'>dang!</h1>
CSS
@import url(http://fonts.googleapis.com/css?family=Righteous); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { height: 100%; } body { text-align: center; background-color: hsla(230,40%,50%,1); } body:before { content: ''; display: inline-block; vertical-align: middle; font-size: 0; height: 100%; } h1 { display: inline-block; color: white; font-family: 'Righteous', serif; font-size: 12em; text-shadow: .03em .03em 0 hsla(230,40%,50%,1); } h1:after { content: attr(data-shadow); position: absolute; top: .06em; left: .06em; z-index: -1; text-shadow: none; background-image: linear-gradient( 45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0 ); background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shad-anim 15s linear infinite; } @keyframes shad-anim { 0% {background-position: 0 0} 0% {background-position: 100% -100%} }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!