css3的transition特性详解

日期:2021-03-06 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

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;}

上一篇:深层次了解CSS中的特性控制模块 返回下一篇:没有了