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

Анимация эффекта тени для логотипа

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

Если говорим о логотипе, так как считаю, что такой элемент можно только в этой структуре применить, что на темном сайте смотреться будет великолепно. Также есть еще третье знамение, что перекреплено за размытие, но здесь нужно указать расстояние, где оно должно срабатывать.

Также можете посмотреть демонстрацию, чтоб понять работу и визуально как смотрится.

HTML

Код

<h1>ZORNET.RU</h1>

CSS

Код

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
  font-family: 'Tinos', serif;
  font-size: 40px;
  text-align: center;
  color: transparent;
  overflow: hidden;
}
span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s infinite;
}
span:nth-child(even) {
  animation-name: smoky-2;
}
@keyframes smoky {
  60% {text-shadow: 0 0 40px whitesmoke;}
  to {
  transform: translate3d(300px, -80px, 0) rotate(-40deg) skewX(70deg) scale(1.5);
  text-shadow: 0 0 20px whitesmoke;
  opacity: 0;
  }
}
@keyframes smoky-2 {
  60% {text-shadow: 0 0 40px whitesmoke;}
  to {
  transform: translate3d(350px, -80px, 0) rotate(-40deg) skewX(-70deg) scale(2);
  text-shadow: 0 0 20px whitesmoke;
  opacity: 0;
  }
}
span:nth-of-type(1) {animation-delay: .1s;}
span:nth-of-type(2) {animation-delay: .2s;}
span:nth-of-type(3) {animation-delay: .3s;}
span:nth-of-type(4) {animation-delay: .4s;}
span:nth-of-type(5) {animation-delay: .5s;}

PS - здесь вы можете задать индивидуальный шрифт под свой ресурс.

11 Декабря 2017 Просмотров: 929 Комментариев: (0)

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

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

Kosten

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