web前端基础——过渡效果

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互的内容

属性名：transition

常见取值：

参数	取值
过渡的属性	all：所有能过渡的属性都过渡，比如填width，则只有width能过渡
过渡的时长	数字+ s（秒）

注意

1. 只有默认状态和hover状态的样式不同，才能有过渡的效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果是不同的，比如给hover状态设置，则只有鼠标移入时，才有过渡效果

样例代码

.box{
	width:200px;
	height:200px;
	background-color:pink;

/* 宽度200，悬停的时候宽度600，花费时间1秒钟   */
	transition: width 1s, background-color 2s;
/*  过渡所有的属性，花费时间1秒钟  */
/*	transition: all 1s;  */
}

.box:hover{
	width:600px;
	background-color:red;
}