zoukankan      html  css  js  c++  java
  • 纯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;
    	 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;
    

      

  • 相关阅读:
    mvc:三
    mvc:二
    Linq分组,linq方法分组
    Linq 中按照多个值进行分组(GroupBy)
    Photoshop 字体
    报表Reporting S而vice是 错误的解决
    1*书籍装帧
    photoshop 魔术橡皮擦
    Photoshop 钢笔 双窗口显示
    数字格式化
  • 原文地址:https://www.cnblogs.com/freespider/p/5358159.html
Copyright © 2011-2022 走看看