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

Анимированная страница с помощью CSS

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

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

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

Также все изначально проверено на работоспособность и на адаптивность всех элементов.

Создать анимированные эффекты с помощью CSS

Этот вид просмотра производится с мобильного аппарата.

Установочный процесс:

HTML

Код

<div class="animovana-nachalna">
  <div class="nayasanives-efektam">
  <h1>ZorNet.Ru: сайт</h1>
  <p>
Краткое и тематическое описание, что идет поверх изображение.
  </p>
  <a href="#">ZORNET.RU</a>
  </div>
  </div>

  <div class="opisaniye">
  <div>Здесь идет описание или функционал сайта</div>
  </div>

CSS

Код

.animovana-nachalna{
  width: 100%;
  height: 100vh;
  background: #161617;
  position: relative;
  overflow: hidden;
}
.animovana-nachalna::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(http://zornet.ru/CSS-ZORNET/ASABAG/zornet-ru-27.jpg) no-repeat;
  background-size: cover;
  opacity: .3;
  animation: anim 25s linear infinite;
}
@keyframes anim {
  50%{
  transform: scale(2);
  }
  100%{
  transform: scale(1);
  }
}
.nayasanives-efektam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 100%;
  max-width: 815px;
  text-align: center;
  padding: 0 35px;
  box-sizing: border-box;
}
.nayasanives-efektam h1 {
  color: #ef82a9;
  text-transform: uppercase;
  font-size: 43px;
  font-weight: 900;
  margin-bottom: 18px;
}
.nayasanives-efektam p{
  color: #fff;
  margin-bottom: 20px;
}
.nayasanives-efektam a {
  display: inline-block;
  text-decoration: none;
  color: #eca2b3;
  border: 2px solid #ad6491;
  text-transform: uppercase;
  padding: 12px 45px;
  transition: 0.4s linear;
  font-size: 19px;
  font-family: Tahoma, Geneva, sans-serif;
  border-radius: 50px;
}
.nayasanives-efektam a:hover {
  color: #f5f1f1;
  background: #8c2244;
}
.opisaniye{
  padding: 10px;
  opisaniye-align: justify;
}
.opisaniye div{
  margin-bottom: 6px;
}

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

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

Видео обзор:

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

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

29 Августа 2019 Загрузок: 1 Просмотров: 1038 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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