首页css中transition显示隐藏

css中transition显示隐藏

时间: 2023-10-15 14:29:51 浏览: 85

在CSS中，transition属性用于定义元素在不同状态之间切换时的过渡效果。transition属性是transition-property、transition-duration、transition-timing-function和transition-delay的简写属性。其中，transition-property指定需要应用过渡效果的CSS属性的名称，transition-duration指定过渡效果需要多少秒或毫秒来完成，transition-timing-function指定过渡效果的转速曲线，transition-delay定义了过渡效果开始的时机。可以通过在transition属性中使用逗号分隔的方式设置多个过渡效果。示例代码如下所示： ```html <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition: width .25s linear 1.9s, background 1s 2s, transform 2s; } div:hover { width: 200px; background-color: blue; transform: rotate(180deg); } </style> </head> <body> <div></div> </body> </html> ``` 以上代码中，div元素在hover状态下，通过transition属性定义了三组过渡效果。第一组过渡效果是将width属性从初始值过渡到200p

阅读全文