手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3中的元素过渡属性transition示例详解
CSS3中的元素过渡属性transition示例详解
摘要:前言W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内...

前言

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

过渡transition

先来看一个小例子

<div class="demo"></div>

.demo { width: 100px; height: 100px; background-color: royalblue; } .demo:hover { width: 200px; }

这样当我的光标悬浮在demo的一瞬间

它的宽度变成了200px

1

有没有办法让我们光标悬浮在元素时,元素宽度缓慢变宽呢

在CSS3之前我们只能使用麻烦的js脚本

但是现在我们只需要添加一个属性

就可以达到我们的目的

.demo { width: 100px; height: 100px; background-color: royalblue; transition: width 1s; /*增*/ } .demo:hover { width: 200px; }

transition它的作用就是指定当你的元素某些样式发生变化时

这些样式可以渐渐过渡到最终属性值

2

它是一个复合属性

有以下子属性

transition-property:指定过渡或动态模拟的css属性

transition-duration:指定过渡所需要的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

transition-property 我们想要哪种属性过渡就写哪种属性

或者干脆写过渡所有属性的关键字all

transition-duration渐变时间属性值就是“数字+s”

代表几秒钟内过渡

transition-timing-function 是可选的属性值,有如下可选值

linear

线性过渡,等价贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease(默认)

平滑过渡,等价贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in

由慢到快,等价贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out

由快到慢,等价贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out

由慢到快再到慢,等价贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start

等同 steps(1, start)

step-end

等同 steps(1, end)

steps():

两个参数的步进函数。第一个参数为正整数,指定函数步数。第二个参数取值是start或end,指定每一步的值发生变化的时间点。第二个参数可选,默认值为end。

cubic-bezier(num, num, num, num):

特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

大多我们都用不上,最常用的大概就是我们默认的ease和线性过渡linear了

transition-delay 同样是可选属性值

如果你想要延迟过渡,换句话说如果我们想要在过渡前停一小会儿

那么就在这个复合属性的最后添加我们需要延迟的时间“数字+s”

这个属性可以对多个不同的属性进行设置

我们要做的就是使用逗号隔开

.demo { width: 100px; height: 100px; background-color: royalblue; transition: width 1s linear, height 1s linear, background-color 2s 1s; /*改*/ } .demo:hover { width: 200px; height: 200px; background-color: lawngreen; /*改*/ }

鼠标移出元素后,元素又过渡回来

3

使用过渡属性而不是脚本的另一个原因是

脚本方法改变多个元素样式可能会产生冲突

解决的办法是使用bool变量加锁,还是很麻烦

我们的transition过渡属性就不需要考虑这么多

元素与元素之间互不影响

还有一点要注意,元素过渡需要知道样式具体的起始属性和末尾属性

比如说我们例子中的width明确了从100px过渡到200px

.demo:hover { width: auto; /*改*/ height: 200px; background-color: lawngreen; /*改*/ }

改变了悬浮样式width为auto

我们发现当光标悬浮元素后

width属性并没有发生过渡

参与过渡的属性

当然也不是所有的样式都可以过渡

比如说你想让 display:block 过渡到 display:inline-block

那是不可能的

有以下属性参与过渡

color visibility opacity vertical-align z-index clip width/height top/bottom/left/right background-color/position border-top/bottom/left/right-color/width border/letter/word-spacing font-size/weight line-height margin/padding-top/bottom/left/right max/min-height/width outline-color/width text-indent/shadow

可以看到这个属性真的是十分强大

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

【CSS3中的元素过渡属性transition示例详解】相关文章:

CSS设置DIV背景色渐变显示

CSS相框效果示例代码

CSS关于解决图片元素下多余空白的BUG

css的字体属性详解

浏览器不支持position: fix的解决

CSS样式表详解

CSS样式表中的类

CSS 文本渲染属性text-rendering的介绍和使用示例

CSS中Font的一些基本知识点归纳总结

CSS定位属性Position详解

精品推荐
分类导航