纯CSS实现图片抖动

Posted FreeSpider

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯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;

  

 

以上是关于纯CSS实现图片抖动的主要内容,如果未能解决你的问题,请参考以下文章

纯css实现文字特效动画

CSS3 hover transform 图片会抖动怎么解决?

Emlog给网站图片添加抖动特效教程

纯css3实现图片切换

file按钮美化成图片(纯HTML+CSS)

纯CSS实现鼠标悬停图片上升显示描述