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

Анимированный логотип при помощи CSS3

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

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

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

Так смотрится, когда вы открыли страницу, вообще по умолчанию:

Здесь эффект начинает срабатывать, что сразу видно начало вспышки:

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

HTML

Код

<a href="http://zornet.ru/news" class="azeuba_rsamqetun">
  <b>ZORNER</b>ресурс
  <div>Строение интернет сайта</div>
</a>

CSS

Код

.azeuba_rsamqetun, .azeuba_rsamqetun:hover {
  display: inline-block;
  font-size: 43px;
  line-height: 43px;
  color: #eaeaea;
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: none;
}

.azeuba_rsamqetun b {
  color: #cbe1f3;
  font-size: 53px;
}
.azeuba_rsamqetun div {
  font-size: 21px;
  line-height:19px;
  text-align:left;
  color: #f7f7f7;
}
.azeuba_rsamqetun:hover {
  animation: blur1 2s ease-out;
}
.azeuba_rsamqetun:hover b {
  animation: blur2 2s ease-out;
}
@keyframes blur1 {
  from {
  text-shadow:0px 0px 9px #e8e8e8,
  0px 0px 9px #eaeaea,
  0px 0px 23px #eaeaea,
  0px 0px 23px #eaeaea,
  0px 0px 23px #eaeaea,
  0px 0px 23px #eaeaea,
  0px 0px 23px #eaeaea,
  0px 0px 23px #eaeaea,
  0px 0px 48px #eaeaea,
  0px 0px 48px #eaeaea;
  }
}
@keyframes blur2 {
  from {
  color: #2869a0 ;
  }
}
@media (max-width:600px) {
  .azeuba_rsamqetun, .azeuba_rsamqetun:hover {
  font-size: 39px;
  line-height: 39px;
  }
  .azeuba_rsamqetun b {
  font-size: 47px;
  }
  .azeuba_rsamqetun div {
  font-size: 16px;
  }
}

Но и когда вы дойдете до мобильного носителя по размеру, то он автоматически уменьшится, где стоит CSS, который за это отвечает.

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

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

25 Июня 2018 Просмотров: 1345 Комментариев: (0)

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

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

Kosten

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