跳至正文
设计笔记 静水流深,美语善缘
代码 约 2 分钟阅读

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

本文介绍了如何使用CSS3实现文字链接的平滑左右移动效果。当鼠标移动到文字链接上时,链接会向右平滑移动,效果简单而实用。实现该效果只需在CSS中添加过渡属性即可。代码示例包括HTML结构和CSS样式,主要使用了CSS3的transition属性来实现平滑过渡。然而,该效果在IE10以下版本的浏览器中不兼容,但在现代浏览器中应用简单且不影响其他功能。

其实实现 平滑左右移动的效果 蛮简单的,鼠标移动到文字连接时会出现向右平滑移动,效果很棒很不错的说,而且非常简单,加个css就OK啦!

实现效果:

当然,花点时间改一下效果会非常棒,下面就贴出代码吧:

html代码 :

<div><a href="#1">Test 测试</a></div>

css代码:

.test a{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;}

当然,要知道css3动画不兼容ie10以下浏览器,所以这个效果在IE内核的低版本中是没有啥效果的,但是这个效果实现起来非常简单,加在网页上夜没什么损失,不仅仅要加在文字上,图片上。。。