css中transition显示隐藏
时间: 2023-10-15 07:29:51 浏览: 80
在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
阅读全文