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

Плавающая анимация при помощи CSS3

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

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

Все сделано по вверх градиента, что аналогично можно где то в дизайне применить.

Установка:

Шрифтовые кнопки:

HTML

Код

<div class="animatsiya_skrina">
  <div class="mesto_avatara">
  <a href="/">
  <img src="http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/skytsunami.png" alt="Создай самостоятельно сайт" />
  </a>
  </div>
  <div class="plavnaya_zastavka">
  <h1>ZorNet.Ru — сайт для вебмастера</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>
Плавающая анимация - CSS</p>
  </div>
</div>

CSS

Код

h1 {
  font-size: 24px;
  margin: 5px 0 0 0;
  font-weight: lighter;
  text-transform: uppercase;
  color: #e0dddd;
}

p {
  font-size: 15px;
  font-weight: light;
  color: #b8fcff;
  /* font-weight: bold; */
  text-shadow: 0 1px 0 #292525;
}

span a {
  font-size: 18px;
  color: #b3e6ff;
  text-decoration: none;
  margin: 0 10px;
  transition: all 0.4s ease-in-out;
}
  span :hover {
  color: white;
  }

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

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

.mesto_avatara {
  width: 148px;
  height: 148px;
  box-sizing: border-box;
  border: 4px 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; }
}
.mesto_avatara img {
  width: 100%;
  height: auto;
}

.plavnaya_zastavka {
  width: 100%;
  max-width: 780px;
  padding: 15px 35px;
  box-sizing: border-box;
  text-align: center;
}

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

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

17 Февраля 2020 Загрузок: 4 Просмотров: 1764 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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