过渡
1.过渡简写 transition：param1 param2
- param1 要过渡的属性 all 表示所有属性
- param2 过渡的时间 秒为单位 如：1s
- 过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
- 帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
- 特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
1 .box{
2 width: 200px;
3 height: 200px;
4 border:1px solid #000;
5 margin: 100px auto;
6 background-color: red;
7 /*transition: width 2s,background-color 2s;*/
8 /*如果多个过渡的特效相同，可以简写，过渡必须加给盒子本身*/
9 /*transition:过渡属性,过渡时间,速度曲线(linear匀速),延迟时间*/
10 transition: all 2s linear 1s;
11 }
2.过渡属性拆解
- transition-property设置过渡属性（all代表所有属性）
- transition-duration设置过渡时间 用来控制速度linear(匀速)
- ease(减速) / ease-in(加速) / ease-out(减速) / ease-in-out(先加速后减速)
- transition-timing-function设置过渡速度
- transition-delay设置过渡延时 超过时间后执行动画.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3过渡</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑';
background-color: #F7F7F7;
}
.wrapper {
width: 1024px;
margin: 0 auto;
}
.wrapper > section {
min-height: 300px;
margin-bottom: 30px;
box-shadow: 1px 1px 4px #DDD;
background-color: #FFF;
}
.wrapper > header {
text-align: center;
line-height: 1;
padding: 20px;
margin-bottom: 10px;
font-size: 30px;
}
.wrapper section > header {
line-height: 1;
padding: 10px;
font-size: 22px;
color: #333;
background-color: #EEE;
}
.wrapper .wrap-box {
padding: 20px;
position: relative;
}
.transition {
height: 200px;
width: 200px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
transition-property: all;/*过渡属性*/
transition-duration: 2s;/*持续时间*/
transition-delay:0s;/*过渡延迟*/
}
section:nth-child(2) .transition {
transition-timing-function:linear;/*线性运动*/
}
section:nth-child(3) .transition {
transition-timing-function:ease; /*减速运动*/
}
section:nth-child(4) .transition {
transition-timing-function:ease-in; /*加速运动*/
}
section:nth-child(5) .transition {
transition-timing-function:ease-out;/*减速运动*/
}
section:nth-child(6) .transition {
transition-timing-function:ease-in-out;/*先加速后减速*/
}
/*获得焦点*/
.transition:hover {
left:300px;
background-color:red;
}
</style>
</head>
<body>
<div class="wrapper">
<header>CSS3-过渡详解</header>
<section class="move">
<header>移动</header>
<div class="wrap-box">
<div class="transition"></div>
</div>
</section>
<section class="ease">
<header>ease</header>
<div class="wrap-box">
<div class="transition"></div>
</div>
</section>
<section class="ease-in">
<header>ease-in</header>
<div class="wrap-box"> <div class="transition"></div></div>
</section>
<section class="ease-out">
<header>ease-out</header>
<div class="wrap-box"> <div class="transition"></div></div>
</section>
<section class="ease-in-out">
<header>ease-in-out</header>
<div class="wrap-box"> <div class="transition"></div></div>
</section>
</div>
</body>
</html>
下面是一个案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡应用2</title>
<style>
body {
background-color:#0da5d6;
}
.box {
width:80%;
height:60px;
margin:100px auto;
text-align:center;
}
.box span {
margin:30px;
font-size:50px;
font-width:7;
color:white;
transition-property:margin;
transition-duration:2s;
transition-timing-function:ease;
transition-delay:0s;
}
.box:hover span{
margin:15px;
}
</style>
</head>
<body>
<div class="box">
<span>4</span><span>亿</span><span>网</span><span>友</span><span>共</span><span>同</span><span>信</span><span>赖</span>
</div>
</body>
</html>
网友评论