3

На примере этой вёрстки , как сделать эффект колокольчика , что бы при событие hover блок (ротате) покачивался ?

section{
  display:table;
  margin:30px auto;
}

div{
  width:100px;
  height:100px;
  display:block;
  position:relative;
  margin:5px;
  text-align:center;
  line-height:100px;
  font-size:20px;
  display:inline-block;
}
div:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:orange;
  transform:rotate(45deg);
  position:absolute;
  top:0;left:0;
  z-index:-1;
  transition:all .3s;
  border-radius:8px;
}
div a{
  text-decoration:none;
  color:#fefefe;
}
div:hover:before{
  background:red;
  box-shadow:1px 1px 0 #000000;
  animation:lr .2s infinite;
}
@-webkit-keyframes lr{
  from{


}
  to{


}
}
<section>
 <div class=""> 
    <a href="">Главная</a>
  </div>
 <div class=""> 
    <a href="">Гостевая</a>
  </div>
 <div class=""> 
    <a href="">Форум</a>
  </div>
</section>

Примерно такое можно добиться на : закрепленном листе иголкой за один угол , и если его качнуть пальцем то он будет качаться

2 Answers2

5

section{
  display:table;
  margin:30px auto;
}

div{
  width:100px;
  height:100px;
  display:block;
  position:relative;
  margin:5px;
  text-align:center;
  line-height:100px;
  font-size:20px;
  display:inline-block;
}
div:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:orange;
  transform:rotate(45deg);
  position:absolute;
  top:0;left:0;
  z-index:-1;
  transition:all .3s;
  border-radius:8px;
}
div a{
  text-decoration:none;
  color:#fefefe;
}
div:hover:before{
  background:red;
  box-shadow:1px 1px 0 #000000;
  animation:lr .2s infinite;
}
@-webkit-keyframes lr{
  from{
     transform:rotate(44deg);
    margin-left: 1px;
  }
  to{
    transform:rotate(46deg);
    margin-left: -1px;
  }
}
<section>
 <div class=""> 
    <a href="">Главная</a>
  </div>
 <div class=""> 
    <a href="">Гостевая</a>
  </div>
 <div class=""> 
    <a href="">Форум</a>
  </div>
</section>
Get-Web
  • 2,983
  • 13
  • 28
  • как всё просто оказалось - аж досадно –  Aug 19 '16 at 16:34
  • 1
    Да, можно еще проще. transform-origin устанавливает координаты точки, относительно которой будет происходить трансформация элемента. – Get-Web Nov 18 '16 at 22:59
3

Можно использовать вместо from и to процентные обозначения, интерполируя кадры не между двумя состояниями, а между четырьмя. Например:

  • 0%: середина
  • 25%: крайнее левое
  • 75% крайнее правое
    • +50% — 25% чтобы вернуться к середине, 25% чтобы отклониться дальше
  • 100%: середина (вернулись в начальное положение)

Кривую анимации надо будет подбирать аккуратно (симметричную по четвертям), чтобы резкий переход 100% -> 0% не был заметен. Линейная, по умолчанию, выглядит сносно. Скорее всего, любая другая будет выглядеть странно.

section{
  display:table;
  margin:30px auto;
}

div{
  width:100px;
  height:100px;
  display:block;
  position:relative;
  margin:5px;
  text-align:center;
  line-height:100px;
  font-size:20px;
  display:inline-block;
}
div:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:orange;
  transform:rotate(45deg);
  position:absolute;
  top:0;left:0;
  z-index:-1;
  transition:all .8s;
  border-radius:8px;
}
div a{
  text-decoration:none;
  color:#fefefe;
}
div:hover:before{
  background:red;
  box-shadow:1px 1px 0 #000000;
  animation:lr .2s infinite;
}
@-webkit-keyframes lr{
  0% {
    transform:rotate(45deg);
  }
  25% {
    transform:rotate(50deg);
  }
  75% {
    transform:rotate(40deg);
  }
  100% {
    transform:rotate(45deg);
  }
}
<section>
 <div class=""> 
    <a href="">Главная</a>
  </div>
 <div class=""> 
    <a href="">Гостевая</a>
  </div>
 <div class=""> 
    <a href="">Форум</a>
  </div>
</section>