如何在jquery或javascript中创建以下效果

我想在

jquery

/

javascript

中创建一个效果，这样图像中的播放按钮会增长到一定的大小，然后突然收缩，产生反弹/脉动效果

---

这可以通过CSS3动画轻松完成

---

HTML:

 <div class="container">
   <div class="myButton">
     <a class="myButton">
       <img src="http://i.stack.imgur.com/FcuEp.png" alt="" />
      </a>
    </div>
 </div>

.container {
   width: 100%;
   padding: 100px;
   text-align: center;
 }

@-webkit-keyframes zoomout {
from { -webkit-transform: none; }
50% { -webkit-transform: scale(1.5); }
to { -webkit-transform: none; }
}

@keyframes zoomout {
from { transform: none; }
50% { transform: scale(1.5); }
to { transform: none; }
}

.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1s;
}

.container {
width: 100%;
padding: 100px;
text-align: center;
}

@-webkit-keyframes zoomout {
  50% {
    -webkit-transform: scale3d(1, 1, 1);
  }
  65% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
  }
  75% {
    -webkit-transform: scale3d(1.35, 1.35, 1.35);
  }
  80% {
    -webkit-transform: scale3d(1.35, 1.35, 1.35);
  }
  95% {
    -webkit-transform: scale3d(.8, .8, .8);
  }
}

@keyframes zoomout {
  50% {
    transform: scale3d(1, 1, 1);
  }
  65% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  75% {
    transform: scale3d(1.35, 1.35, 1.35);
  }
  80% {
    transform: scale3d(1.35, 1.35, 1.35);
  }
  95% {
    transform: scale3d(.8, .8, .8);
  }
}

.myButton:hover {
-webkit-animation: zoomout 1.5s;
animation: zoomout 1.5s;
}

---

缩小到原始大小之前反弹效果的CSS:

 <div class="container">
   <div class="myButton">
     <a class="myButton">
       <img src="http://i.stack.imgur.com/FcuEp.png" alt="" />
      </a>
    </div>
 </div>

.container {
   width: 100%;
   padding: 100px;
   text-align: center;
 }

@-webkit-keyframes zoomout {
from { -webkit-transform: none; }
50% { -webkit-transform: scale(1.5); }
to { -webkit-transform: none; }
}

@keyframes zoomout {
from { transform: none; }
50% { transform: scale(1.5); }
to { transform: none; }
}

.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1s;
}

.container {
width: 100%;
padding: 100px;
text-align: center;
}

@-webkit-keyframes zoomout {
  50% {
    -webkit-transform: scale3d(1, 1, 1);
  }
  65% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
  }
  75% {
    -webkit-transform: scale3d(1.35, 1.35, 1.35);
  }
  80% {
    -webkit-transform: scale3d(1.35, 1.35, 1.35);
  }
  95% {
    -webkit-transform: scale3d(.8, .8, .8);
  }
}

@keyframes zoomout {
  50% {
    transform: scale3d(1, 1, 1);
  }
  65% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  75% {
    transform: scale3d(1.35, 1.35, 1.35);
  }
  80% {
    transform: scale3d(1.35, 1.35, 1.35);
  }
  95% {
    transform: scale3d(.8, .8, .8);
  }
}

.myButton:hover {
-webkit-animation: zoomout 1.5s;
animation: zoomout 1.5s;
}

---

---

您可以根据自己的喜好调整比例和动画。：）

你看过了没有，看看有没有合适的，也许是这个方法（它允许你在数字CSS属性中设置一个动画，比如宽度和高度）？我会用CSS来做这个！Thx很多Vohuman善意地将此效果添加到图像按钮，因为我在这样做时面临困难，这将是一个巨大的帮助嗨，Thx的努力伙伴！但如果你能创建一个小提琴并提供链接，这似乎是行不通的，这将是非常棒的！您使用的浏览器和版本是什么？另外，看看你的代码会有帮助。同时，让我给你一个提琴。它不适用于webkit变体，所以请添加一个链接到一个类似提琴的工作示例。我有一个我到底想要什么的视频，但不知道如何共享它，如果你需要让我知道这是你的代码尝试过，如果有错误，请指出错误