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

Плавная анимация объектов на CSS

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

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

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

HTML

Код

<div class="krasivased-animirovan">
  <div class="portretna-koluzovatel">
  <a href="http://zornet.ru/">
  <img src="http://zornet.ru/_fr/81/0742465.jpg" alt="Ключевые слова" />
  </a>
  </div>
  <div class="mockupumag">
  <h1>Как сделать плавное завершение анимации</h1>
  <p>
  <span><a href="/" target="_blank"><i class="fa fa-twitter"></i></a></span>
  <span><a href="/" target="_blank"><i class="fa fa-github"></i></a></span>
  <span><a href="/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>
  <span><a href="/" target="_blank"><i class="fa fa-codepen"></i></a></span>
  </p>
  <p>ZorNet.Ru — сайт для вебмастера</p>
  </div>
</div>

CSS

Код

@keyframes float {
  0% {
  box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
  transform: translatey(0px);
  }
  50% {
  box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
  transform: translatey(-20px);
  }
  100% {
  box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
  transform: translatey(0px);
  }
}

.krasivased-animirovan {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portretna-koluzovatel {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
  }

  img { width: 100%; height: auto; }

.mockupumag {
  width: 100%;
  max-width: 580px;
  padding: 20px 35px;
  box-sizing: border-box;
  text-align: center;
}

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

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

24 Июля 2019 Загрузок: 2 Просмотров: 896 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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