美文网首页
CSS3实现文字移动

CSS3实现文字移动

作者: 耒未木 | 来源:发表于2015-04-08 10:34 被阅读0次

(1.jQuery;

2.Div块添加a标签,然后为a标签添加hover特性;

3.CSS,可以达到鼠标悬停时文向右移动10个像素的效果。但是这种效果是直接过去的,中间没有过度特效。

a:hover {

padding-left:10px;

}

使用 CSS3.0 的新特性,将下面的代码添加到 a 标签中,就可以直接实现鼠标划过平滑移动特效了。

a {

-webkit-transition:all0.4s linear;

-moz-transition:all0.4s linear;

-ms-transition:all0.4s linear;

-o-transition:all0.4s linear;

transition:all0.4s linear;

}

相关文章

  • CSS3实现文字移动

    (1.jQuery; 2.Div块添加a标签,然后为a标签添加hover特性; 3.CSS,可以达到鼠标悬停时文向...

  • CSS3平移动画效果

    在这篇文章中主要是讲如何通过CSS3实现平移动画效果,在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相...

  • css3变化,动画

    css3可以实现一些动画过渡之类的。先来研究下api 2D变化 css3提供可以更改元素的css方法,我们可以移动...

  • transfrom&transition&ani

    transform transform是才css3动画的主要部分,可以实现旋转、缩放、倾斜、移动等动画,主要用到的...

  • css3的新特性

    CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow...

  • 前端面试题总结【10】:CSS3有哪些新特性?

    CSS3实现圆角(border-radius),阴影(box-shadow), 对文字加特效(text-shado...

  • CSS3实现文字渐变

    往往会使用文字渐变来使得页面看起来更炫酷一点

  • 移动端rem单位计算

    参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法

  • 前端页面的移动端适配

    前言 移动端高度适配一般使用px单位即可。 本文着重说明如何实现移动端宽度的适配:方法是使用CSS3新增的一个相对...

  • js、vue可参考移动端适配

    前言 移动端高度适配一般使用px单位即可。 本文着重说明如何实现移动端宽度的适配:方法是使用CSS3新增的一个相对...

网友评论

      本文标题:CSS3实现文字移动

      本文链接:https://www.haomeiwen.com/subject/qjvzxttx.html