CSS3新增模块：过渡模块介绍

CSS3新增模块过渡 hover这个伪类选择器也可以用到其他模块 transition-property:width;/*告诉系统哪一个属性需要执行过渡*/transition-duration:5s;/*告诉系统属性需要执行过渡的持续时...

CSS3新增模块

过渡

hover这个伪类选择器也可以用到其他模块

transition-property:width;
/*告诉系统哪一个属性需要执行过渡*/
transition-duration:5s;
/*告诉系统属性需要执行过渡的持续时间*/

过度的三要素

必须有属性发生变化
必须必须告诉系统哪属性发生变化需要执行过渡效果
必须告诉系统过渡效果的持续时长

注意

css是层叠样式表，如果在前一个属性后给相同的属性定义不同的样式就会被后面样式覆盖

例如：

transition-property:width;
transition-duration:5s;
transition-property:height;
transition-duration:2s;
/*这两个过渡效果就会使前面两个过渡效果失效*/
/*多个属性同时执行,用','隔开*/
transition-property:height,width;
transition-duration:2s,5s;

过渡的其他属性

transition-delay:2s;
/*告诉系统延迟多少秒后执行过渡*/
transition-timing-fuction:;
/*告诉系统过渡动画移动速度![timing-fuction.png](:storage\79624a64-b7b0-4865-962c-a24c08d0c8a2\21272e50.png)*/

transition-timing-fuction详细用法:

过渡属性的缩写

transition:过渡属性过渡时长运动速度延迟时间；

缩写连写的注意，和分开写一样，用逗号隔开即可

多个属性同一效果

transition:all 时长速度延迟;

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-02 10:22
阅读 ( 371 )
分类：WEB前端开发

CSS3新增模块：过渡模块介绍

CSS3新增模块

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »