Домой / Рецепты CSS / Анимация тени текста с помощью CSS
Анимация тени текста с помощью CSS

Анимация тени текста с помощью CSS

Данный пример анимации текста с помощью 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%}
 }

Данный пример анимации текста с помощью CSS - отличный способ украсить любой текстовый элемент вашего сайта. HTML 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(&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*