扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍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过渡属性是什么”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网