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;
    

      

  • 相关阅读:
    smarty中ifelse、foreach以及获取数组中键值名的一个实例
    smarty逻辑运算符
    python strip()函数 介绍
    (转)论python工厂函数与内建函数
    数据结构哈希表(转)
    哈希表算法的编写
    哈希表(转)
    平衡二叉树的旋转操作
    并查集详解(转)
    Java数组技巧攻略
  • 原文地址:https://www.cnblogs.com/freespider/p/5358159.html
Copyright © 2011-2022 走看看