说明：因为字符数限制，将案例部分写在新的一篇文章中。
上一篇：Html5+Css3 — CSS3篇
案例1：携程网
1、页面特点
- 页面自适应屏幕大小。
即屏幕大小变化时，页面元素的大小也随之变化，内容依然能够完全显示，不会被隐藏掉。 - 宽度是自适应的，高度是固定的。
2、页面结构分析
_ 整个页面结构放在一个容器中。
_ 整个页面结构分为上、中、下三大部分。
3、关键技术
flex布局。
<main>
<section class="nav_item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="nav_item">...</section>
<section class="nav_item">...</section>
<section class="nav_item">...</section>
</main>
/* 主体 */
main{
margin: 10px;
}
.nav_item{
display: flex;
margin-top: 10px;
height: 100px;
background-color: #63BABD;
border-radius: 10px;
}
.nav_item .left{
flex: 1;
}
.nav_item .right{
display: flex;
flex: 2;
flex-wrap: wrap;
}
.nav_item .right a{
box-sizing: border-box;
width: 50%;
text-align: center;
line-height: 50px;
color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.nav_item .right a:nth-last-of-type(-n+2){
border-bottom: none;
}
.nav_item:nth-of-type(2){
background-color: #E8BA97;
}
.nav_item:nth-of-type(3){
background-color: #BD9AC9;
}
.nav_item:nth-of-type(4){
background-color: #73A86F;
}
案例2：切割轮播图 ★★★
原理
3d转换（旋转+移动+立方体）+ 背景图片（background-position）+ 绝对定位 + 过渡 + jquery。
5个立方体，水平方向排列在一起，分别延迟旋转。
每个立方体有四个面显示图片。
相同方向的面组成一幅完整的图片。
每个立方体需要左右移动，立方体的每个面需要左右上下移动。
span标签先是绝对定位，重叠在一起，然后再分别左右上下移动到立方体的4个面上。
立方体（li）相同方向的面（span）使用同一张图片做背景，通过偏移，显示图片不同的部分。
样式分析
0、父容器需要进行以下两个设置：
transform: rotate3d(1,1,0,-30deg);
让父容器进行3d旋转，旋转一定的角度，方便观察子元素的立方体3d转换效果。
transform-style: preserve-3d;
让子元素保持转换后的效果，否则会默认恢复转换前的原始状态。
每个li是一个立方体，每个span是一个面。
1、立方体的每个面默认放在立方体的正中心正面方向上。
2、每个面的3d转换效果：
前面：Z轴正方向移动。
后面：Z轴负方向移动 + 往X轴正方向旋转180deg。
上面：Y轴负方向移动 + X轴正方向旋转90deg。
下面：Y轴正方向移动 + X轴正方向旋转270deg。
3、3d转换 默认的坐标系：
x轴正方向为水平向右，y轴正方向为垂直向下，z轴正方向为垂直屏幕方向。
4、立方体的后面、下面 需要转换180度，才能在旋转到正面位置时，图片是正立显示的。
5、设置背景图的偏移。
background-position: 40%;
6、子元素的立方体效果完成后，删除最外层父容器的3d旋转效果。
7、面可以旋转，立方体也可以旋转。
js分析
1.jquery库
2.节流函数
代码
<div class="container">
<!-- 轮播图 -->
<ul>
<!-- 每个li是一个立方体 -->
<li>
<!-- 每个span是一个面 -->
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<!-- 切换箭头 -->
<a href="javascript:;" class="left"><</a>
<a href="javascript:;" class="right">></a>
</div>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
position: relative;
margin: 100px auto;
/* 图片的原始大小为560px,300px */
width: 560px;
height: 300px;
background-color: #eee;
}
/* 1.轮播图 */
ul {
width: 100%;
height: 100%;
list-style: none;
/*为了方便观察子元素li的立方体效果，可先为ul设置3d转换，后面可以删除。*/
/* 3d旋转 */
/* transform: rotate3d(1,1,0,-30deg); */
/* 保持子元素的转换效果 */
/* transform-style: preserve-3d; */
}
ul>li {
position: relative;
float: left;
/* 每个立方体的宽度占据父容器的1/5 */
width: 20%;
height: 100%;
/* 保持子元素的转换效果 */
transform-style: preserve-3d;
/* background-color: pink; */
/* 过渡 */
transition: transform .2s linear;
}
ul>li>span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* 前面 */
ul>li>span:nth-of-type(1) {
/* 往Z轴正方向偏移 */
transform: translateZ(150px);
/* 背景图片 */
background-image: url(../imgs/pic1.png);
background-size: cover;
}
/* 后面 */
ul>li>span:nth-of-type(2) {
/* 往Z轴正方向偏移+往X轴正方向旋转 */
transform: translateZ(-150px) rotateX(180deg);
/* 背景图片 */
background-image: url(../imgs/pic2.jpg);
background-size: cover;
}
/* 上面 */
ul>li>span:nth-of-type(3) {
/* 往Y轴负方向偏移 + 往X轴正方向旋转 */
transform: translateY(-150px) rotateX(90deg);
/* 背景图片 */
background-image: url(../imgs/mdl.jpg);
background-size: cover;
}
/* 下面 */
ul>li>span:nth-of-type(4) {
/* 往Y轴正方向偏移 + 往X轴正方向旋转 */
transform: translateY(150px) rotateX(270deg);
/* 背景图片 */
background-image: url(../imgs/super.jpg);
background-size: cover;
}
/* 设置背景图片的偏移 */
ul>li:nth-of-type(2)>span {
background-position: 20%;
}
ul>li:nth-of-type(3)>span {
background-position: 40%;
}
ul>li:nth-of-type(4)>span {
background-position: 60%;
}
ul>li:nth-of-type(5)>span {
background-position: 80%;
}
/* 2.切换箭头 */
.left,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 60px;
background-color: rgba(255, 255, 255, .5);
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
<script src="../libs/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//当前 旋转 索引
let index = 0
//立方体
let cubes
//节流函数
function throttle(fn, interval) {
let pre = 0
return function(...args) {
if ((Date.now() - pre) > interval) {
fn.apply(this, args)
pre = Date.now()
}
}
}
//设置转换效果
function setTransform(direction){
if(direction < 0){
//下一张
index --
}else{
//上一张
index ++
}
cubes.each(function(key, value) {
$(this).css({
'transform': `rotateX(${90*index}deg)`,
'transition-delay': `${0.1*key}s`
})
})
}
$(function() {
cubes = $('li')
//右箭头
$('.right').on("click", throttle(function() {
// 下一张：每个li立方体 沿x轴 负方向 旋转90deg
setTransform(-1)
}, 600) )
//左箭头
$('.left').on("click", throttle(function() {
//上一张：每个li立方体 沿x轴 正方向 旋转90deg
setTransform(1)
}, 600))
})
</script>
小结：先掌握立方体效果的制作，再来完成切割轮播图效果，会更加容易理解。
案例3：360产品宣传页
知识点：
1 . 过渡
2 . fullPage.js插件 基本使用
3 . jQuery
页面功能点：
_ 全屏页面，没有滚动条，使用鼠标滚轮来切换页面，每次滚动一屏。
_ 动画、过渡 效果的执行时机。
_ jQuery全屏滚动插件 fullPage.js。
css
_ 转换
transform属性
translate()
rotate()
transform: none; 清除转换效果
_ 过渡
transition属性
_ 伸缩布局
display: flex
_ font-size: 0 的特殊作用。
清除图片之间的间隙。
_ 背景图片
background: url('xxx')
_ 定位
position属性
_ 当屏幕大小改变时，页面元素有可能发生位置错位。如何解决呢？
答：可以采用绝对定位，相当于父容器中心来定位,来设置多个元素的位置。它们定位的参照点是一样的，就不会位置错位了。
_ 先搭建页面结构，再添加过渡或动画。
_ 如何设置多个过渡效果的先后顺序：上一个过渡效果完成后，下一个过渡效果才开始？
过渡延迟 transition-delay
越后开始的过渡效果，设置的延迟更大，即可。
下一个过渡效果的延迟 = 上一个过渡效果的时长。
_ 打字机效果
文字是一张图片，然后添加分步过渡 step()，修改图片width值从0%到100%，每步显示一个字即可。
_ 过渡效果 是通过设置一个css类 来完成的。
jQuery
_ eq()
_ addClass() 添加类样式
removeClass() 删除类样式
_ 如果关键帧只有2个，则使用过渡；如果关键帧多于2个，则使用动画。
fullPage.js
_ fullPage.js插件会自动给我们每屏的html内容添加一个父容器，在写css选择器的时候，需要注意。
