首页 > 代码库 > transition过渡效果

transition过渡效果

2024-07-27 10:37:39   219人阅读

transition:过渡，转变，变迁。

过渡效果transition

transition是CSS3新增的样式，有四个属性值: 执行变换的属性(transition-property)  变换延续的时间(transition-duration)  变换的速度变化(transition-timing-function)  变换延迟时间(transition-delay);

下面给出范例

<!-- 这是一个范例程序 --><div id="content"></div>

CSS代码

/* 给DIV加入一些样式，使能够直观的观察 */div{    background: green;    width: 120px;    height: 120px;}/*  transition定义  注意各浏览器对该属性的实现方式有所区别，IE暂不支持该属性*/#content{    -webkit-transition: width 2s;    -moz-transition: width 2s;    -o-transition: width 2s;    transition: width 2s;}/* 现在定义鼠标划过div时的变化 */#content:hover{    width: 300px;}

此时当鼠标悬停在div时，他的宽度不是biu的一下就变为300px,而是有2s的过的时间，鼠标撤出div范围时，也经过2s的时间变回原来的宽度。

如果要对多个属性进行过渡效果，对玩过CSS的人来说肯定不会陌生，多个属性间用逗号分隔就OK，就像

#content
{ transition: width 2s, height 2s, background 2s; }

过度效果的延迟加载 transition-delay

#content{    -webkit-transition-property: width;   /* 设定过度属性为width */    -moz-transition-property: width;    -o-transition-property: width;    transition-property: width;    -webkit-transition-duration: 2s;    /* 设定过度时间为2s */    -moz-transition-duration: 2s;    -o-transition-duration: 2s;    transition-duration: 2s;    -webkit-transition-delay: 3s;   /* 设定延迟时间为3s */    -moz-transition-delay: 3s;    -o-transition-delay: 3s;    transition-delay: 3s;}

此时观看到的效果是鼠标悬停在div上时，先停顿3s的时间在进行宽度的变化。

过渡效果的速率变化  transition-timing-function

transition-timing-function有五个属性值：

ease 逐渐变慢（默认值）linear  匀速ease-in  加速ease-out  减速ease-in-out 先加速然后减速
/*  给上面的过渡效果在加上速率变化 */#content{    -webkit-transition-timing-function: ease;    -moz-transition-timing-function: ease;    -o-transition-timing-function: ease;    transition-timing-function: ease;}
这样就给过渡加上了速率变化。
                                                              
transition过渡效果






























        

            
                
                  
                
                

                    联系

                    我们