chaihongjun.me

鼠标经过文字,文字左偏移或者右偏移

鼠标经过文字,文字左偏移或者右偏移

  常见的博客很多有这样一种效果,当鼠标移到博客列表标题的时候,标题文字会向右移动一定距离,当鼠标离开的时候又恢复。这样的操作其实非常简单,只要给包裹文字元素一个padding或margin的值即可:

a:hover{padding-left:5px;}
a:hover{margin-left:5px;}

但是从视觉效果上,感觉非常的突兀没有一个过渡的效果。只要使用CSS3的一个新特性,就会有一个平滑过渡:

a {
-webkit-transition: all 0.4s linear;  
-moz-transition: all 0.4s linear;  
-ms-transition: all 0.4s linear;  
-o-transition: all 0.4s linear;  
transition: all 0.4s linear; 
}

以上范例,是在理想状况下,添加新属性的时候注意前后文。

补充:

-webkit-  /* webkit内核浏览器,如chrome safari*/
-moz-     /* mozilla内核浏览器,如firefox*/
-ms-    /* ms内核浏览器,如IE */
-o-    /* opera内核浏览器,如opera */

都是私有前缀,为了保证兼容建议写完整

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»