在图像上摆动动画。 （就像小酒馆的标志。）

Question

所以我在这里得到了这个代码，但由于某种原因它不能在我的网站上运行。如果代码有问题请告诉我。它适用于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)';
}

Answer 1

小提琴有一个外部资源。如果您只复制/粘贴代码面板中的代码，则不会包含该资源。

添加：

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