学习目标:
掌握css3过度transition
一、什么是过渡:
-
通过 css3 可以在不使用 flash 动画或 javascript 的情况下,为元素从一种样式变换为另一种样式时添加过渡效果。
-
css3 过渡就是元素从一种样式逐渐改变为另一种的效果,需要确定两点:
1. 需要添加效果的 css 属性
2. 指定效果实现的时长
二、学习总结:
transition:过度属性(all) 过度完成时间 缓冲描述 延迟时间;
属性名词解释:
1.过度属性--------可以直接写all
2.过度时间--------单位是s
3.缓冲描述--------linear匀速,ease非匀速,cubic-bezier贝塞尔曲线
4.延迟时间--------单位是s
实现效果图:
实现效果代码块:
<style>
/* transition 要过渡的属性 花费时间 运动曲线 何时开始*/
div {
width: 300px;
height: 300px;
background-color: skyblue;
/* transition: width .5s ease, height .5s ease 1s; */
/*如果想写多个属性,用 , 隔开*/
transition: width .5s, height 1s;
}
div:hover {
width: 600px;
height: 500px;
}
</style>
<body>
<div>
</div>
</body>
注意:如果未指定的时间,transition将没有任何效果,因为默认值是0。