html怎么做一张抖动的图片,纯CSS实现图片抖动

实现方法：

1.将上文提到的以下JS内容删除：

$(".imagelogo").mouseover(function() {

obj = $(this);

i = 5;

timer = null;

clearInterval(timer);

timer = setInterval(function(){

obj.css({"position":"relative","left":i+"px"});

i = -i;

},50);

});

$(".imagelogo").mouseout(function() {

clearInterval(timer);

});

2.在CSS样式里加上以下内容：

@keyframes mylogo

{

from {left: 5px;}

to {left: -5px;}

}

@-moz-keyframes mylogo /* Firefox */

{

from {left: 5px;}

to {left: -5px;}

}

@-webkit-keyframes mylogo /* Safari 和 Chrome */

{

from {left: 5px;}

to {left: -5px;}

}

@-o-keyframes mylogo /* Opera */

{

from {left: 5px;}

to {left: -5px;}

}

.imagelogo {

background: url(images/logo.png) no-repeat;

float: left;

position:relative;

width: 180px;

height: 60px;

margin: 15px 0px 0px 0px;

padding: 0px;

cursor: pointer;

animation: mylogo 1s linear 0s infinite alternate;

/* Firefox: */

-moz-animation: mylogo 1s linear 0s infinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: mylogo 1s linear 0s infinite alternate;

/* Opera: */

-o-animation: mylogo 1s linear 0s infinite alternate;

}

好了，有点像钟摆的样子了，上文的animation: mylogo 1s linear 0s infinite alternate是简写，展开后就是：

animation-name: mylogo ;

animation-duration: 1s;

animation-timing-function: linear;

animation-delay: 0s;

animation-iteration-count: infinite;

animation-direction: alternate;

原文：http://www.cnblogs.com/freespider/p/5358159.html