我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

CSS的transition过渡属性是什么

这篇文章主要介绍CSS的transition过渡属性是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联是一家集网站建设,索县企业网站建设,索县品牌网站建设,网站定制,索县网站建设报价,网络营销,网络优化,索县网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

transition属性是在表现时间经过的变化时使用,具体来说,你可以通过点击光标逐渐更改背景颜色等,还有其他的animation属性,但过渡属性用于进行相对简单的变化时使用。

下面我们就来具体看看transition属性的用法

我们先来看看transition属性的参数

-webkit-transition-property:变化的属性(background属性等);

-webkit-transition-duration:变化的秒数;

-webkit-transition-timing-function:变化的方法;

-webkit-transition-timing-function的有以下的值

default

linear:匀速

ease-in:逐渐加速

ease-out:逐渐减速

ease-in-out:逐渐加速和逐渐加速

cubic-bezier:自定义

也可以使用以下的缩写

-webkit-transition:变化的属性変化的秒数変化的方法;

我们来看具体的示例

代码如下

HTML代码


CSS代码

#demo{

height:100px;

width:200px;

background:rgb(255,100,100);

-webkit-transition-property:background;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

}

#demo:hover{

background:rgb(100,255,100);

}

#demo2{

height:100px;

width:200px;

background:rgb(255,100,100);

-webkit-transition:background2sease-in-out;

}

#demo2:hover{

background:rgb(100,100,255);

}

CSS的transition过渡属性是什么

以上是“CSS的transition过渡属性是什么”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站栏目:CSS的transition过渡属性是什么
新闻来源:http://shouzuofang.com/article/ppsipo.html

其他资讯