第3章页面特效-优快云博客

HTML5响应式网页设计-T3（页面特效）

一、过渡

从某个状态在一定时间内变为另一个状态。

1、基本语法

transition: 变化的属性 持续时间 过渡类型 延迟时间;

语法说明：

持续时间和延迟时间的单位为秒（s）

过渡类型包括：

case：慢速开始，接着加速，然后慢速结束（默认值）

linear：相同速度过渡

case-in：慢速开始

case-out：慢速结束

case-in-out：慢速开始，慢速结束

过渡属性设置位置：谁过渡给谁加

【案例1】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#box{
     
				width: 300px;
				height: 50px;
				border: 1px solid red;
				background-color: yellow;
				margin: 30px auto;
				/* 设置过渡：给box盒子设置过渡，有过渡属性的属性是background-color */
				transition: background-color 5s linear 2s;
			}
			#box:hover{
     
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

效果如下：

延迟2秒，然后在5秒内匀速完成黄色到蓝色过渡

2、多属性操作

如果需要实现多属性的过渡效果，可以使用如下两种方式：

给涉及到的属性单独设置效果：

transition: width 2s, background-color 3s;

如果所有属性效果一致，可以做如下设置：（使用all代表所有需要设置过渡的属性）
```
transition: width 3s, background-color 3s; 
```
```
transition: all 3s; 
```

【案例2】进度条制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

第3章 页面特效

HTML5响应式网页设计-T3（页面特效）

一、过渡

1、基本语法

2、多属性操作

第3章页面特效