css3的transition特性详解

日期:2020-12-12 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

transition是将某个特性从1个特性值在特定的時间内光滑过渡到另外一个特性值来完成动漫实际效果.
这个特性1般配搭:hover来使

下面看1个事例:电脑鼠标放在div上,0.2s后将div元素的情况色用1秒的時间变为黄色,转变方法是linear


拷贝编码
编码以下:

div{ background-color:red; transition:background-color 1s linear 0.2s;}
div:hover{ background-color:yellow;}
<div>思思博士</div>


电脑鼠标没放上去以前:

电脑鼠标放上去0.2s后 的转变全过程:

电脑鼠标放上去的最后实际效果:

看到这里 大伙儿对与这个特性的用法,内心面应当有了底了.

针对这个特性,每一个主要参数都有1个对应的特性名,也便是说这个特性是能够拆卸写的.

非简写方式:


拷贝编码
编码以下:

/*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
div:hover{ background-color:yellow;}

transition还能够过渡好几个实际效果.


拷贝编码
编码以下:

div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;}
div:hover{ background-color:yellow; color:#F00; height:100px;}