javascript - 在图像上摇摆动画。 (就像小酒馆的招牌。)

所以我在这里得到了这段代码，但是由于某种原因，它将无法在我的网站上运行。如果代码有问题，请告诉我。它可以在jsfiddle中正常工作。

的HTML

<div class="swing" style="background-color:#transparent;">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>

的CSS

.swing {
-webkit-perspective:300px;
-moz-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}
.swing img {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-transform-origin: 50% 0%;
}

JS

$('.swing img').mouseenter(function(event)
{
var sign = event.currentTarget;
sign.rotationX = 0;
TweenMax.to(sign, 0.2, { rotationX:-20, ease:Power1.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"]});
TweenMax.to(sign, 0.4, { rotationX:8, ease:Power1.easeInOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.2 });
TweenMax.to(sign, 3, { rotationX:0, ease:Elastic.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.6 });
});
function onUpdate(tween)
{
var target = tween.target;
target.style.webkitTransform = target.style.transform = target.style.msTransform = target.style.MozTransform = 'rotateX('+(target.rotationX)+'deg)';
}

最佳答案

小提琴有外部资源。如果仅从代码面板复制/粘贴代码，则不会包含该资源。

添加此：

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.1/TweenMax.min.js"></script>

关于javascript - 在图像上摇摆动画。 (就像小酒馆的招牌。)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40004648/