Блог Сергея Князева

Скрипты
Анимированные кнопки CSS

Анимированные кнопки CSS

09.05.20165830
Сегодня 9 мая вся страна празднует день победы, а я отмечаю месяц со дня создания моего блога. Я не стал писать про нудные скрипты в честь праздника, как на всех других сайтах. Темой сегодняшней статьи стала анимация на CSS. А именно я решил показать пример применения CSS для социальных кнопок.
Я не стал описывать все 12 вариантов скриптов, которые я вам предлагаю в данной теме, так как статья будет очень большая.
Рассмотрим один из примеров. Если вы выберите другой вариант, то установка не будет отличаться от этого.

Установка Doors-3D


Center-WD - Анимированные кнопки CSS

Для начала необходимо установить код в нужно место. Например: информер материалов или на страницу комментариев материала.
DIV блок анимации
Код
<div class="image-effect-3d-doors">
  <div class="back-image">
  <img src="/img/1.jpg" alt="">
  </div>
  <a href="#" class="share-button share-via-facebook">
  <i class="fa fa-facebook"></i>
  Facebook
  </a>
  <a href="#" class="share-button share-via-twitter">
  <i class="fa fa-twitter"></i>
  Twitter
  </a>
  <a href="#" class="share-button share-via-google">
  <i class="fa fa-google"></i>
  Google +
  </a>
  <div class="white-line"></div>
  <div class="left-door">
  <div class="image-left">
  <img src="/img/1.jpg" alt="">
  </div>
  </div>
  <div class="right-door">
  <div class="image-right">
  <img src="/img/1.jpg" alt="">
  </div>
  </div>
  </div>

# - Необходимо будет заменить на нужные вам ссылки. Если вы решите установить этот код в информер или на страницу материалов, можете использовать следующие ссылки:
Для Facebook
https://www.facebook.com/sharer/sharer.php?u=$ENTRY_URL$
Для Google
https://plus.google.com/share?url=$ENTRY_URL$
Для Tvitter
https://twitter.com/intent/tweet?text=$SITE_NAME$ - $ENTRY_NAME$&url=$ENTRY_URL$
Нам осталось лишь установить стили для анимации:
CSS Стили
Код
.image-effect-3d-doors{
  width: 500px;
  height: 300px;
  position: relative;
  margin: 0 auto;

  -webkit-perspective: 500px;
  perspective: 500px;
  }
  .back-image{
  position: absolute;

  left: 0;
  top:0;

  -webkit-filter: blur(1px) grayscale(100%);
  width: 100%;
  height: 300px;
  overflow: hidden;

  -webkit-transition: 0.7s;
  transition: 0.7s;
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
  }
  .image-effect-3d-doors:hover .back-image{
  box-shadow: none;
  -webkit-transform: scale(1);
  transform: scale(1);
  }
  .image-effect-3d-doors .left-door{
  position: absolute;
  display: inline-block;

  left: 0;
  top:0;

  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: 0.7s ease-out;
  transition: 0.7s ease-out;
  z-index: 10;
  }
  .image-effect-3d-doors:hover .left-door{
  -webkit-transform: rotateY(-180deg) scale3d(0.6, 1, 100);
  transform: rotateY(-180deg) scale3d(0.6, 1, 100);
  }
  .image-effect-3d-doors .right-door{
  position: absolute;
  display: inline-block;
  left: 250px;
  top:0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  -webkit-transition: 0.7s ease-out;
  transition: 0.7s ease-out;
  z-index: 10;
  }
  .image-effect-3d-doors:hover .right-door{
  -webkit-transform: rotateY(180deg) scale3d(0.6, 1, 100);
  transform: rotateY(180deg) scale3d(0.6, 1, 100);
  }
  .image-effect-3d-doors .image-left,
  .image-effect-3d-doors .image-right{
  width: 250px;
  height: 300px;
  overflow: hidden;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  }
  .image-effect-3d-doors .image-right img{
  margin-left: -250px;
  }

  .image-effect-3d-doors:hover .image-left,
  .image-effect-3d-doors:hover .image-right{
  -webkit-filter: blur(2px);
  }
  .image-effect-3d-doors .share-button{
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  padding: 12px;
  width: 80px;
  border-radius: 2px;
  margin: 125px 10px;
  position: relative;
  z-index: 5;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
  }
  .image-effect-3d-doors:hover .share-button{
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
  opacity: 1;
  }
  .share-via-facebook{
  background-color:#3b5998;
  }

  .share-via-twitter{
  background-color:#00aced;
  }

  .share-via-google{
  background-color:#d34836;
  }
  .image-effect-3d-doors .white-line{
  border-bottom: 2px solid #fff;
  top: 190px;
  left:250px;
  position: absolute;
  z-index: 5;
  width: 0;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  }
  .image-effect-3d-doors:hover .white-line{
  transform: translateX(-200px);
  -webkit-transform: translateX(-200px);
  width: 400px;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  }

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

На этом всё. Пользуйтесь решениями с моего блога и будьте уникальными. Если возникнут вопросы по установки, пишите в комментарии.
Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.