首页 » HTML/CSS » 纯CSS实现图片抖动

纯CSS实现图片抖动

19712 19

昨天刚发了一文《CSS+JS让图片抖动》经过郑永的留言,今天去看了下CSS关于动画方面的知识,随手实现一下纯CSS的图片抖动,其实也就是定位改变left的值而已,不过这次tiandi没有加上鼠标经过才生效,而是让它一直这么晃着晃着,

实现方法:

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;

文章评分3次,平均分4.0

本文原始地址:https://www.tiandiyoyo.com/2014/01/shake-logo-by-css-2/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


19 Comments

  1. 这个方法确实不错嘛。。。可惜我后面的站都不需要这样的功能啦

  2. Alex :

    先收着,下次说不定会用得着,还是蛮有意思的。

  3. 正仔 :

    你的logo就是这样弄的吧

  4. 大发 :

    用translateX撒,left啥的容易粗问题哟

  5. 看到 千丝海苔4个字来回晃了。等我也参考下,拿回去用用

  6. mooc :

    好神奇….CSS还能这样…
    From…to…好的~这个我记住了

  7. 早间在哪里见过这个属性,一直没记住,今天得以加深印象,感谢。CSS发展很快。。

  8. 博主首页上的烟花是怎么搞的呢?是弄个插件么?

  9. 安心 :

    现在这个是左右摆动,不是抖动啊。

  10. ERa :

    有WordPress快速入库的方法么?

  11. 效果不错。不过我总感觉,代码太多,影响加载速度啊

  12. 学习了~~网站做得好酷炫~

  13. 郑永 :

    动手能力很强,加上效果还不错。

载入分页评论...