码迷,mamicode.com
首页 > 移动开发 > 详细

文字链接平滑左右移动的效果

时间:2014-12-03 21:05:06      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:http   io   ar   color   os   使用   on   div   cti   

鼠标移动到文字连接时会出现向右平滑移动。
  例如:
  html代码 :
  http://xiong.chexian666.com/
  <div class="test"><a href="">test link move</a></div>
  css代码:
  .test a{position:relative;background-color:#446CB3; color:#ffffff; padding:10px; text-decoration:none;
  -webkit-transition: margin 0.2s ease-out;
  -moz-transition: margin 0.2s ease-out;
  -khtml-transition: margin 0.2s ease-out; }
  a:hover{margin-left:10px;}
  具体效果可以参考我写的实例:http://codepen.io/kujian/pen/Iwnsi
  当然我们知道css3动画不兼容ie10以下浏览器,那么我们可以使用jq代码来实现,具体代码为:
  http://xiong.zt-4s.com/
  $(function(){
  $("a").hover(function(){
  $(this).stop().animate({"margin-left":"10px","text-shadow":"2px 2px 10px #333333"},"fast");
  },function(){
  $(this).stop().animate({"margin-left":"0px"},"fast");
  });
  });
  大家可能很疑惑,为什么css里面由一个position:relative呢?其实这是我的另外一种写法,jq代码如下
  http://xiong.yingyanshop.com/
  $(function(){
  $("a").hover(function(){
  $(this).stop().animate({"left":"10px"},300);
  },function(){
  $(this).stop().animate({"left":"0px"},300);
  });
  });
  是不是很简单的效果呢?值得试试。

文字链接平滑左右移动的效果

标签:http   io   ar   color   os   使用   on   div   cti   

原文地址:http://www.cnblogs.com/liuxinyufx/p/4141076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!