目录
一、利用CSS3过渡实现动画效果
1.过渡属性
transition-property属性用来定义转换动画的CSS属性名称,常用的取值如下:
property:指定的CSS属性(width、height、background-color)
all:通过指定元素支持transition-property属性的样式,一般为了方便都写all。
<style>
div {
margin: 500px auto;
width: 700px;
height: 700px;
background-color: thistle;
transition: background-color;/* 表示只修改背景颜色 */
}
div:hover {
background-color: tomato;
}
</style>
<body>
<div></div>
</body>
transition: all;/* 表示全部修改 */
2.过渡所需时间
transition-duration: 定义过渡效果花费的时间,默认是0。
transition-duration: 5s; /* 表示过渡所需时间 */
transition: all 5s;/* 表示过渡所需时间 */
过渡的颜色:
3.过渡动画函数
transition-timing-fu