ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация тени для текста при помощи CSS

Анимация тени для текста при помощи CSS

Эта анимация позиционирует форму в 3d, так как вокруг знака происходит эффект, где для каждого элемента можно поставить с помощью CSS. Изначально идет в светлой гамме, что характерно можно поставить на темный фон. Здесь вы сами можете выставить расстояние эффекта, который происходит вокруг знака. Что при рассмотрении можно сказать, что больше похоже на 3 d форму. Хотя это все при изменении тени можно изменит. где совершенно по другому будет смотреться.

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

Этот снимок с проверки на работоспособность:

Приступаем к установке:

HTML

Код

<h1 data-shadow='ZORNET.RU'>ZORNET.RU</h1>

CSS

Код

*, *: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: #f5f0f0;
  font-family: 'Righteous', serif;
  font-size: 10em;
  text-shadow: 0.03em 0.03em 0 hsl(230, 34%, 47%);
}
  h1:after {
  content: attr(data-shadow);
  position: absolute;
  top: .05em; left: .07em;
  z-index: -1;
  text-shadow: none;
  background-image:
  linear-gradient(
  44deg,
  transparent 45%,
  hsla(48, 17%, 93%) 45%,
  hsla(48, 17%, 93%) 55%,
  transparent 0
  );
  background-size: .04em .04em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shad-anim 19s linear infinite;
  }

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }

Вот текстовый эффект, который имеет чисто CSS, и только на них можно что-то поменять в стилистике.

Демонстрация

06 Августа 2018 Просмотров: 1169 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0