css3实现hover颜色，背景色，宽度等平滑变动（transition）

最新推荐文章于 2023-01-29 09:15:11 发布

挨踢的小胖

最新推荐文章于 2023-01-29 09:15:11 发布

阅读量2.4w

点赞数 1

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/i792439187/article/details/8826712

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

{

float:left;

border:1px #FFFFFF solid;

text-align:center;

}

li a

{

-moz-transition: all 1s ease 0s;/*根据hover进行变化*/

color:#FFFFFF;

float:left;

text-shadow:#FFFF00 0 -1px 2px;

width:150px;

background:#000000;

height:150px;

line-height:150px;

text-decoration:none;

}

li a:hover

{

color:#000000;

background:#FFFFFF;

font-size:36px;

text-shadow:0 -1px 2px #737373;

}

{

list-style-type:none;

margin:0px;

padding:0 0 0 5px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

=====================================================

CSS 3 中提供了一种属性，Transition（变换），这种属性能够实现在元素的某些属性的数值发生改变时产生过渡的效果。比如长度增加，能产生类似拉长的动画效果；颜色改变时，也可以利用Transition产生一种颜色渐变的效果。

浏览器支持情况

CSS Transition受到浏览器的广泛支持。CSS3 Transition Browser Support

Chrome 2+(-webkit-transition)

Firefox3.7+(-moz-transition)

Safari 3.1+(-webkit-transition)

Opera 10.5+(-o-transition)

From:axiu.me

不过经过我的观察，现在IE还是不能支持，即使是在IE9中。不过也没有关系，至少并不会出现什么令人感觉糟糕的结果。

CSS变换的由来

CSS Transition曾经是只属于Apple Safari Webkit的东西，仅能由Safari UI实现的动画效果。

可是W3C有部分工作人员认为变换动画是脚本该做的事情而不是CSS，不过去年三月份，来自Apple、Mozilla开始将CSS变换模块添加到CSS 3特性里面，非常接近原来Safari Webkit的效果。由此得来CSS Transition。

书写方法

在CSS代码中，要使用Transition属性需要这么书写：

-moz-transition: // Firefox

-webkit-transition: // Safari、Chrome

-o-transition: // Opera

transition: //官方标准

建议在书写时，将上述全写上。

=====================================================

Transition对应的CSS属性列表：

transition-property
* 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
* 初始默认值为all.
transition-duration
* 指定“转换”过程的时间，如：1s、none。
* 初始默认值为0.
transition-timing-function
* 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.
transition-delay
* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.

挨踢的小胖

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3实现hover颜色，背景色，宽度等平滑变动（transition）

CSS3.0平滑变动li{float:left;border:1px #FFFFFF solid;text-align:center;}li a{-moz-transition: all 1s ease 0s;/*根据hover进行变化*/color:#FFFFFF;float:left;text-shadow:#FFFF00 0 -1px 2p
复制链接

扫一扫