过渡 transition
transition-property:要发生过渡的属性
默认值all
**transition-duration:持续时间 必须写
s ms1s=100ems默认值0s
transition-delay:延迟时间
s ms1s=1000ms
过渡是主动触发的，一般过渡只有在鼠标移入之后才有效所以
过渡属性要写在元素的默认状态中。
<style>
div{
width: 500px;
height: 500px;
background-color: antiquewhite;
/* 写过渡属性 要写在元素的默认位置 过渡一般是只在鼠标移动时才写的效果 */
transition-property: height,background-color;
/* 延迟时间 */
transition-delay: 4ms;
/* 持续时间 必须写*/
transition-duration: 5s;
}
div:hover{
height: 700px;background-color: aqua;
}
</style>
</head>
<body>
<div>过渡属性</div>
</body>
过渡简写：
过渡简写
transition:要发生过渡的属性持续时间延迟时间运动状态;
-顺序不强调
-持续时间和延迟时间有先后顺序持续时间在前-持续时间必须写
-最简单的过渡
transition:持续时间
-
过渡的运动状态
transition-timing-function
ease 默认值先快后慢
linear 匀速
<style>
.father{
width: 1000px;
height: 500px;
border: 5px black solid;
}
.father div{
width: 200px;
height: 200px;
background-color: aquamarine;
transition-duration: 20s;
}
.ease{
transition-timing-function: ease;
}
.linear{
transition-timing-function: linear;
}
.father:hover div{
width: 888px;
}
</style>
</head>
<body>
<div class="father">
<div class="ease">逐渐慢</div>
<br>
<div class="linear">匀速</div>
</div>
</body>
过渡中间值：只有有中间值的属性才可以发生过渡
<style>
/* 鼠标移入父元素，子元素满满消失 */
.father{
width: 500px;
height: 500px;
background-color: aqua;
}
.son{
width: 200px;
height: 200px;
background-color: chartreuse;
/* 是子元素慢慢消失，应该在子元素身上写过渡 */
transition-duration: 2s;
margin: auto;
}
.father:hover .son{
/* display:none 和 visibility:hidden都没有中间值 */
opacity: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son">只有有中间值的属性才可以发生过渡</div>
</div>
</body>
873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
