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

Блок с анимацией блика на чистом CSS3

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

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

Здесь видим стандартный темный блок:

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

Здесь не сильно заметно, для этого рекомендую пройти на страницу с установочным элементом, где вы изначально посмотрите, как реально выглядит и будет смотреться на сайте, ссылка находится внизу статьи.

Установка:

HTML

Код

<div class="solnechny_blik">
<span>Стильные блики в блоке</span>
</div>

CSS

Код

.solnechny_blik {
  position: relative;
  width: 315px;
  height: 212px;
  border-radius: 5px;
  background-color: #3a3838;
  text-shadow: 0 1px 0 #292727;
  color: #fbf9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.solnechny_blik span {
  position: relative;
  z-index: 5;
  font-family: sans-serif;
}

.solnechny_blik::after {
  content: "";
  position: absolute;
  left: 200%;
  top: -50%;
  width: 200%;
  height: 250%;
  background: linear-gradient(180deg,rgba(56, 56, 56, 0.2) 0,#505050 20%,#3c3a3a 45%,#3c3a3a 55%,#505050 80%,rgba(74, 74, 74, 0.2) 100%);
  transform: matrix(.47,-.97,.77,.53,0,0);
  animation: blink 3s infinite ease-in-out;
}

@keyframes blink {
  from {
  left: 200%;
  }
  to {
  left: -200%;
  }
}

Как поняли, что здесь представлен только основной стиль, что не стал добавлять оформление, так как у всех разная стилистика, и кому-то тени и обвод станет отличным дополнением, а другому они просто не потребуются. И здесь вы уже сами решите, как все оформить или все оставить по умолчанию, ведь чем проще, тем удобнее.

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

23 Апреля 2020 Загрузок: 1 Просмотров: 1763 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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