css3新特性第八章(过渡)
css3新特性第八章(过渡)
过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一 种样式。
- transition-property 定义需要过渡的属性
- transition-duration 定义过渡的持续时间
- transition-delay 定义过渡的延迟时间
- transition-timing-function 过渡的函数类型
- transition 复合属性
- 注意：我们设置过渡需要在元素本身上面设置，给那个元素添加效果就在那个元素上面增加效果
一、基本使用
我们开启一个基本是过渡，再继续设置过渡时间。
效果
代码
<style>.box1 {width: 200px;height: 200px;background-color: palevioletred;margin: 100px 150px;/* 设置需要过渡的属性 */transition-property: width,height;/* 设置过渡的时间 */transition-duration: 2s;/* 设置延迟时间 */transition-delay: 0.3s;}.box1:hover {width: 400px;height: 400px;background-color: salmon;/* 旋转 */transform: rotate(45deg);/* 阴影 */box-shadow: 0 0 50px black;}</style></head>
<body><div class="box1"></div>
</body>
二、过渡的高级使用
我们使用过的高级函数，将每一种效果都显示一下
整体效果
代码
<title>02.高级使用</title><style>.outer {width: 1200px;height: 918px;border: 1px solid black;}.box {width: 100px;height: 100px;margin-top: 2px;text-align: center;/* 开启过渡 all 所有的属性*/transition: all;/* 开启过渡的时长 */transition-duration: 3s;/* 延迟 */transition-delay: 0.5s;}.outer:hover .box {width: 1200px;}.box1 {background-color: pink;/* 方式1 ease 官方默认，平滑过渡 */transition-timing-function: ease;}.box2 {background-color: darkred;/* 方式2 linera 线性过渡 */transition-timing-function: linear;}.box3 {background-color: greenyellow;/* 方式3 ease-in */transition-timing-function: ease-in;}.box4 {background-color: purple;/* 方式3 ease-out 快-慢 */transition-timing-function: ease-out;}.box5 {background-color: tomato;/* 方式5 ease-in-out 慢-> 快-慢 */transition-timing-function: ease-in-out;}.box6 {background-color: gainsboro;/* 方式6 step-start 延迟时间,直接到头 */transition-timing-function: step-start;}.box7 {background-color: goldenrod;/* 方式7 step-end 跑完后直接到终点 */transition-timing-function: step-end;}.box8 {background-color: skyblue;/* 方式8 steps(inter,?) 第一个参数为分成多少分,第二个参数默认是end */transition-timing-function: setps(20);}.box9 {background-color: gray;/* 方式9 贝塞尔曲线 */transition-timing-function: cubic-bezier(0,1.07,.85,1.21);}</style>
</head>
<body><div class="outer"><div class="box box1">ease（平滑过渡）</div><div class="box box2">linear(线性过渡)</div><div class="box box3">ease-in(慢-快)</div><div class="box box4">ease-out(快-慢) </div><div class="box box5">ease-in-out(慢-》快-》慢)</div><div class="box box6">step-start(延迟一点-》结束点)</div><div class="box box7">step-end(延迟后直接到终点)</div><div class="box box8">steps(inter,?)(分多少份)</div><div class="box box9">贝塞尔曲线</div></div>
</body>
属性详解
以下专门详情讲解每个属性的基本使用以及使用后的效果
transition-property
该属性为我们需要将那些属性设置为过渡，如 我们需要将宽度，或者高度，颜色。。。。
- transition-property： width,height,color… 每一种属性都使用逗号隔开
- transition-property： all 我们使用一个属性替代我们需要变换的全部属性，是不是很方便
transition-duration
开启过的的时长，也就是我们需要将过渡的效果总时间为多久，两种单位 s 秒、ms 毫秒
- transition-duration: 3s 设置3s的过渡时长
transition-delay
设置过的的延迟时间，如延迟1s后再出发效果
transition-delay: 0.5s
transition-timing-function
设置过渡的类型,也就是过的效果，快、慢、或者先快后慢。。。效果
ease 平滑过渡 —— 默认值
该效果是官方默认效果，过渡比较平滑
transition-timing-function: ease;
.box1 {
background-color: pink;
/* 方式1 ease 官方默认，平滑过渡 */
transition-timing-function: ease;
}
linera 线性过渡
transition-timing-function: linear;
.box2 {
background-color: darkred;
/* 方式2 linera 线性过渡 */
transition-timing-function: linear;
}
ease-in 慢 → 快
transition-timing-function: ease-in;
.box3 {
background-color: greenyellow;
/* 方式3 ease-in 慢 → 快 */
transition-timing-function: ease-in;
}
ease-out 快-慢
transition-timing-function: ease-out;
.box4 {
background-color: purple;
/* 方式3 ease-out 快-慢 */
transition-timing-function: ease-out;
}
ease-in-out 慢-> 快-慢
transition-timing-function: ease-in-out;
.box5 {
background-color: tomato;
/* 方式5 ease-in-out 慢-> 快-慢 */
transition-timing-function: ease-in-out;
}
step-start 延迟时间,直接到头
transition-timing-function: step-start;
.box6 {
background-color: gainsboro;
/* 方式6 step-start 延迟时间,直接到头 */
transition-timing-function: step-start;
}
step-end 时间到了直接到终点
transition-timing-function: step-end;
.box7 {
background-color: goldenrod;
/* 方式7 step-end 跑完后直接到终点 */
transition-timing-function: step-end;
}
steps(inter,?)
第一个参数为分成多少分,第二个参数默认是end
- transition-timing-function: setps(20); 过渡的时间内分成n个步骤跑完
.box8 {
background-color: skyblue;
/* 方式8 steps(inter,?) 第一个参数为分成多少分,第二个参数默认是end */
transition-timing-function: setps(20);
}
贝塞尔曲线
cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型
- 在线制作贝赛尔曲线：https://cubic-bezier.com
- 该属性可以自定义过渡的效果，可以设置多种效果，拖动曲线
transition-timing-function: cubic-bezier(0,1.07,.85,1.21);
.box9 {
background-color: gray;
/* 方式9 贝塞尔曲线 */
transition-timing-function: cubic-bezier(0,1.07,.85,1.21);
}
三、复合属性
transition: 3s 0.2s linear all;
复合属性 第一个数字代表的是过渡的时间 duration 另外两个没有顺序要求
效果
代码
<style>.outer {width: 1000px;height: 100px;border: 1px solid black;cursor: pointer;}.box {width: 100px;height: 100px;background-color: pink;/* 复合属性 第一个数字代表的是过渡的时间 duration 另外两个没有顺序要求 */transition: 3s 0.2s linear all;}.outer:hover .box {width: 1000px;}</style>
</head>
<body><div class="outer"><div class="box"></div></div>
</body>
四、小案例
我们给多个图片加上放大效果，看起来炫酷的效果
效果
代码
<title>04.小案例</title><style>.outer {width: 400px;height: 260px;position: relative;overflow: hidden;float: left;margin-left: 20px;}.mask {width: 400px;height: 260px;background-color: black;position: absolute;top: 0;left: 0;font-size: 100px;color: white;text-align: center;line-height: 260px;opacity: 0;transition: 1s linear;cursor: pointer;}.outer img {transition: 0.5s linear;}.outer:hover .mask{opacity: 0.5;}.outer:hover img {transform: scale(1.6) rotate(30deg);}</style>
</head>
<body><div class="outer"><img src="./images/城市1.png" alt="城市1"><div class="mask">武汉</div></div> <div class="outer"><img src="./images/城市3.jpeg" alt="城市2"><div class="mask">上海</div></div> <div class="outer"><img src="./images/城市1.png" alt="城市1"><div class="mask">广州</div>
</div>
</body>