ZorNet.Ru — сайт для вебмастера » HTML и CSS » Отличный эффект анимации при помощи CSS3

Отличный эффект анимации при помощи CSS3

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

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

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

Этот снимок с тестовой страницы, где проверялся на работоспособность.

Красивая анимация (свойство animation) на CSS3

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

HTML

Код

<body>
<section class="posedalaun_chingulates">
  <div class="dikapackucomag">
  <a href="#">
  <i class="fa fa-link"></i>
  <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/ztesa.png" alt="Сумки">
  </a>
  <div class="perating_detusystem">
  <h4>ZORNET.RU</h4>
  <span>ZorNet.Ru - портал</span>
  <p>Здесь можно написать кратко ключевые слова или фразы.</p>
  </div>
  </div>
</section>
</body>

CSS

Код

.posedalaun_chingulates {
  position: absolute;
  top: 48%;
  left: 48%;
  transform: translate(-48%, -48%);
}
.dikapackucomag {
  position: relative;
  overflow: hidden;
}
.dikapackucomag a {
  display: block;
}
.dikapackucomag a i {
  position: absolute;
  font-size: 29px;
  color: #f7ffb7;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 71px;
  height: 71px;
  margin: auto;
  text-align: center;
  line-height: 71px;
  transform: scale(3);
  background: rgba(247, 243, 243, 0.32);
  box-shadow: 0 0 0 8px rgba(179, 177, 177, 0.24);
  border-radius: 85%;
  opacity: 0;
  transition: all 0.7s;
  z-index: 2;
}
.dikapackucomag:hover a i {
  opacity: 1;
  transform: scale(1);
}
.dikapackucomag a img {
  transition: all 0.7s;
}
.dikapackucomag:hover a img {
  transform: scale(1.2);
}
.dikapackucomag a::before {
  position: absolute;
  content: '';
  background: rgba(25, 24, 24, 0.5);
  width: 0;
  height: 100%;
  left: 49.7%;
  transition: all 0.7s;
  z-index: 1;
}
.dikapackucomag a:hover::before {
  width: 100%;
  left: 0;
}
.perating_detusystem {
  position: absolute;
  bottom: 3%;
  color: #fdf9f9;
  background: rgba(16, 16, 16, 0.35);
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  transition: all 0.7s;
}
.perating_detusystem h4 {
  font-size: 19px;
  font-weight: bold;
  margin: 6px 0;
}
.perating_detusystem span {
  border-top: 1px solid #f3f0f0;
  border-bottom: 1px solid #f9f5f5;
  padding: 3px 0 3px;
}
.perating_detusystem p {
  text-transform: none;
  font-size: 14px;
  margin: 9px 9px 7px;
}
.dikapackucomag:hover .perating_detusystem {
  transform: translateY(150%);
}

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

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

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

10 Августа 2018 Просмотров: 1114 Комментариев: (0)

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

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

Kosten

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