• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Анимация фото рамок

Разработка Анимация фото рамок

Нет прав для скачивания
Анимация фото рамок.
Я бы сказал что данная реализация отлично подошла бы на доску почета.
Пишем код HTML:
HTML:
<div style="margin-top: 20px;">

  <figure class="wave">
    <img src="https://web-zones.ru/" alt="rajni"></img>
    <figcaption>Rajinikanth</figcaption>
  </figure>

  <figure class="wave">
    <img src="https://web-zones.ru/" alt="chuck"></img>
    <figcaption>Chuck Norris</figcaption>
  </figure>

  <figure class="wave">
    <img src="https://web-zones.ru/" alt="chan"></img>
    <figcaption>Jackie Chan</figcaption>
  </figure>

  <figure class="wave">
    <img src="https://web-zones.ru/" alt="bean"></img>
    <figcaption>Mr. Bean</figcaption>
  </figure>

</div>
Пишем наш стиль:
CSS:
body {
  background: #000000;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding:10px;
  font-family: 'Roboto Mono', monospace;
}

.wave {
  float: left;
  margin: 20px;
  animation: wave  ease-in-out 0.5s infinite alternate;
  transform-origin: center -20px;
}

.wave:hover {
  animation-play-state: paused;
}

.wave img {
  border: 5px solid #f8f8f8;
  display: block;
  width: 200px;
  height: 250px;
}

.wave figcaption {
  text-align: center;
}

.wave:after{
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1.5px solid #ffffff;
  top: -10px;
  left: 50%;
  z-index: 0;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
     
.wave:before{
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  display: block;
  height: 44px;
  width: 47px;
  background: #000 ;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  z-index: 16;
}
       
@keyframes wave {
  0% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}
Смотрим полученный результат:
dr31.gif
Автор
baltun
Скачиваний
0
Просмотры
36
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Верх Низ