《部分案例代码下载》

学习目标

能够理解过渡transition的使用方式

能够实现基本的动画

了解动画的八大参数

能够理解视口的概念并进行视口的设置（快捷键）

。。。。。。

理解上课的知识点……

过渡（transition）

昨天学习了过渡属性，直接设置的是 transition:1s; ，其实 transition 属性是一个复合属性

让一个盒子hover之后慢慢的变宽~

过渡相关属性

其实过渡属性可以分为多个单独的属性进行设置

过渡的时间（transition-duration）

设置完成过渡效果需要多少时间

代码：transition-duration：1s;

取值：

具体的时间（1s）

过渡的属性（transition-property）

设置过渡效果的css属性的名称

代码：transition-property:all;

取值：

可以是具体的属性（width、height、……）
all（表示所有属性都有过渡的效果，默认值）

但是从效果来说，不是每一个属性都有过渡效果，比如：display：none这种不可以过渡的属性，是没有过渡的效果的（因为不存在中间状态）

过渡的变化效果（transition-timing-function）

设置过渡变化速度效果的不同

代码： transition-timing-function：linear;

取值：

ease：慢速→快速→慢速
linear：匀速变化
steps（n）：过渡分为几步完成（n个步骤完成）

过渡的延时（transition-delay）

设置过渡在多少时间之后开始

代码： transition-delay：2s;

取值：

具体的时间

过渡的连写形式（transition）

过渡相关属性都是以transition开头，可以通过transition属性设置相关属性

代码：

div {
    /* 过渡的属性 */
    transition-property: all;

    /* 过渡的时间 */
    transition-duration: 1s;

    /* 过渡的变化效果 */
    transition-timing-function: linear;

    /* 过渡的延时 */
    transition-delay: 2s;
}
/*----------------------------------*/
div {
    /* 连写形式 */
    transition: all 1s linear 2s;
}

连写的注意点：

省略问题：按照需求省略，省略相当于设置了默认值
顺序问题：没有要求，但是注意第一个时间永远是过渡时间

如果连写中只设置了一个时间，这个时间表示的是过渡的时间

如果连写中设置了两个时间，则第一个时间表示过渡的时间，第二个时间表示延时的时间

过渡属性的小结

过渡的时间：transition-duration
过渡的属性：transition-property
过渡的效果：transition-timing-function
过渡的延时：transition-delay

ヾ(๑╹◡╹)ﾉ” 3D相册案例

300*400

————————

css3动画

动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

ヾ(๑╹◡╹)ﾉ”动画的初体验（让一个div一直旋转）

看写好的动画效果

动画旋转

问题： 动画和过渡的区别？

过渡必须要触发条件（如：hover），动画则可以不需要（浏览器一刷新就动起来）
过渡最后肯定会停下来，动画则可以一直运行下去
过渡需要两个状态的不同，动画则可以设置多个状态

效果上来说相似，但是动画比过渡跟复杂点

ヾ(๑╹◡╹)ﾉ” 把刚刚的hover效果改写成一刷新就一直旋转动画

动画的实现两步：

定义动画：@keyframes 动画名{}

使用/调用动画：给对应的元素设置animation属性

定义动画（@keyframes）

使用动画前首先要定义一个动画出来，需要通过动画序列设计动画→说白了就是控制动画的不同状态

需求：(动画需要考虑状态)

默认盒子宽度200，让盒子变宽为800的动画。
默认盒子宽高都是200，先让盒子变宽为800，再让盒子变高为800

代码：

/* 1. 定义一个动画 */
/* 定义动画方式一：from-to两个状态 */
@keyframes dong {
    /* 动画的开始状态 */
    from {
        width: 200px;
    }
    /* 动画的结束状态 */
    to {
        width: 600px;
    }
}
/*--------------------------*/
/* 定义动画方式二：百分比设置多个状态 */
@keyframes bian {
    0% {
        width: 200px;
        height: 200px;
    }
    50% {
        width: 600px;
        height: 200px;
    }
    100% {
        width: 600px;
        height: 600px;
    }
}

使用/调用动画（animation）

其实animation属性是一个复合属性，一共是8个属性的连写形式

设置元素宽度变长的动画

代码：

/* 
使用动画相关的属性：
1、动画的名字：animation-name------------------------------------
*/
animation-name: big;

/* 
2、动画的持续时间（一次动画持续的时间）：animation-duration------------------------------------
*/
animation-duration: 1s;

/* 
3、动画的延时：animation-delay------------------------------------
*/
animation-delay: 1s;

/* 
4、动画的效果：animation-timing-function------------------------------------
取值：
1、ease：先慢——》再快——》再慢
2、linear：匀速
3、steps()：分步进行
*/
animation-timing-function: linear;

/* 
5、动画的执行次数：animation-iteration-count------------------------------------
取值：
1、次数（默认是1次）
2、infinite：无限次

*/
animation-iteration-count: infinite;

/* 
6、指定动画的方向（按照什么顺序执行）：animation-direction------------------------------------
取值：
1、normal：正常（从from——》to）
2、reverse：反转（从to——》from）
3、alternate：交替（from——》to——》from——》to——》from....）
*/
animation-direction: alternate;

/* 
7、动画结束的状态：animation-fill-mode------------------------------------
取值：
1、backwards：（默认值）回到开始状态结束
2、forwards：动画在结束状态结束
*/
animation-fill-mode: forwards;

/* 
8、动画执行的状态：animation-play-state------------------------------------
取值：
1、默认执行
2、paused：暂停动画（一般给hover状态加，让鼠标移入之后暂停动画）
*/
animation-play-state: paused;

————————

注意点：

一般使用动画用的都是animation的连写形式
- 连写形式中只需要注意第一个时间是动画持续时间，第二个时间是延时时间即可。此外没任何顺序问题
- 一般只设置动画的名字、动画的持续时间、动画的次数即可

ヾ(๑╹◡╹)ﾉ” 大风车案例

本质上来说就是让一个盒子旋转，而盒子里面有四个扇叶

大风车效果

ヾ(๑╹◡╹)ﾉ” 小鱼游动案例

一共有两个动画

小鱼原地抖动的动画（通过切换背景位置设置完成效果，类似于翻书动画）

小鱼游动的动画

—————————–

背景图片大小（background-size）

通过css可以设置背景图片的大小

语法：

1	background-size: 背景图片宽度背景图片高度：

取值（分别设置的是宽度和高度）：

数字+px
百分比（相对于盒子的宽高百分比）
关键字

默认尺寸：
- contain（包含）：将背景图片等比例缩放，直到不会超出盒子的最大
  
  直到宽度或者高度中有一个和盒子相等，并且背景图片没有溢出部分即止。

cover（覆盖）：将背景图片等比例缩放，直到填满整个盒子刚好没有空白

直到宽度或者高度中有一个和盒子相等，并且背景图片填充满盒子如果有溢出部分则被隐藏

注意点：

在设置background-size 和background连写的时候注意覆盖问题
- 要么单独写的写在连写的下面
- 要么单独写的写在连写的里面
  1
  2
  /* 连写完整版中，也有background-size属性，注意连写的覆盖问题 */
  background：color image repeat attachment position / size

————————

css3私有前缀（了解）

私有前缀是为了兼容老版本浏览器的写法，

对于新版本的浏览器无需添加。

如果需要兼容老版本浏览器，需要在css3属性前添加私有前缀。

私有前缀的作用：兼容老版本浏览器

常见不同浏览器的私有前缀代码：

谷歌、苹果浏览器：-webkit-
火狐浏览器：-moz-
IE浏览器：-ms-
欧朋浏览器：-o-

ヾ(๑╹◡╹)ﾉ” 演示不同浏览器支持的情况

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;

    /*谷歌浏览器和safari浏览器的前缀 -webkit-*/
    -webkit-transform: rotate(45deg);
    /*火狐浏览器的前缀 -moz-*/
    -moz-transform: rotate(45deg);
    /*ie浏览器的前缀 -ms-*/
    -ms-transform: rotate(45deg);
    /*opera浏览器的前缀 -o-*/
    -o-transform: rotate(45deg);
    /*规范阶段的标准写法*/
    transform: rotate(45deg);
}

注意： 对于移动端来说，大多都是ios和Android的操作系统，浏览器内核都是webkit内核，所以前缀只需要写-webkit- 即可

真正开发中，前缀会通过自动化打包工具自动添加，不用程序员一个个加。

————————————————

移动web的初识

移动web说白了就是移动设备中的web网页

移动web的开发现状

移动web开发与传统pc端开发的异同点

浏览器不同（兼容性不同）

浏览器的现状

其实：国内的UC、QQ、百度等手机浏览器大部分都是根据webkit修改过来的内核，国内暂无自主研发的内核。

pc端：浏览器种类很多，如果需要做兼容性处理，需要添加很多不同的私有前缀
移动端：兼容移动端主流浏览器，一般只需要兼容webkit内核即可，前缀只需要添加-webkit- 即可

并且手机更新换代很快，所以浏览器版本都比较新，对于css3新属性的支持会更好

屏幕尺寸不同（适配不同）

pc端：屏幕较大，一般通过版心进行不同屏幕的适配

移动端：移动端设备屏幕尺寸较小，并且碎片化严重（即有很多不同尺寸的屏幕）

1 2	Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，现在还有2K，4k屏等 iPhone主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等

此时再使用版心适配就不合适了，需要使用一些特殊的布局方法→流式布局等

其实移动web和之前学习的pc端开发也是有相同点的：使用的技术本质上一样，还是HTML/CSS/JavaScript的技术。所以同学们学习上并不难，只需要学习几种其他的布局方式即可

移动端调试方法

针对于移动web开发，肯定需要在移动端上调试网页，那怎么操作呢？

真机调试：使用真正的手机进行访问
等后期学到服务器内容，我们就能会：
- 使用本地服务器，在局域网中通过手机访问服务器上网页
- 使用外网服务器，在互联网中通过手机访问
模拟器调试：Chrome DevTools（谷歌浏览器）的模拟手机调试

手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者一般不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。

当然，虽然开发阶段一般使用模拟器调试，但是在实际工作中，最终还是需要通过真机调试的。

视口（viewport）（了解）

先把vscode默认设置的视口参数去掉。

在浏览器中存在视口的概念。视口其实就是浏览器显示页面内容的屏幕区域。可以把视口当做是盛放网页的容器。

问题： 写四个div宽度为320px，都左浮动，在pc端中是一行中显示的，那么在手机端比如：iPhone4打开猜猜看效果是怎样的？

还是一行中显示，此时html标签的宽高是980px。

原因是因为手机端的页面打开的时候会在视口中打开，而视口宽度默认是980px正好可以放下

————————————–

布局视口（layout viewport）

用于在手机上查看pc端网页的问题

历史原因：乔布斯提出了布局视口的概念

早期，只有pc端网页，早期网页的版心为980px，手机端如果直接查看980px宽度的网页，布局可能会乱掉，效果不好，用户体验极差！！
后来乔布斯为了让移动端可以看到完整的网页，发明了布局视口这个概念！解决移动端查看pc端网页的问题

布局视口：相当于盛放网页的容器。并且一般宽度默认是980px。

当使用布局视口980来打开网页时，此时早期的网页可以放下，布局不会乱掉。

布局视口

布局视口作用的过程：

移动端打开网页——》先把网页在980px的布局视口中打开（完美展示，不会乱掉）——》再把布局视口中的完美布局效果，缩放显示在移动端中（让用户可以在屏幕中看到全部的网页）

理想视口（ideal viewport）

其实就是布局视口的一个理想尺寸，也是实际开发移动web的常见设置。

刚刚我们发现了，如果布局视口是980px这种较大的情况

此时为了看到网页的全貌会缩小网页的效果，此时文字看起来很小
此时如果为了看清实际的文字放大网页的效果，这时候网页又看不完全，需要左右滑动

那么有没有一种情况：不缩放网页的同时，既可以文字正常阅读，又可以网页显示完全不用左右滑动呢？→理想视口

理想视口：当布局视口的尺寸等于设备屏幕的尺寸，才是理想视口

当然，为了保证在理想视口中网页效果不乱，我们之后布局的空间也会按照理想视口的空间进行布局，毕竟现在我们已经大量针对于移动端布局的网页了

那就剩一个问题了，我们如何设置布局视口的尺寸就等于当前设备屏幕的尺寸呢？→通过视口标签设置

meta标签的设置视口（记住）

通过meta标签可以进行视口的设置

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性	解释说明
width	设置视口的宽度，device-width表示当前设备的宽度
user-scalable	设置用户是否可以缩放，yes/no
initial-scale	初识缩放比
maximum-scale	最大缩放比
minimum-scale	最小缩放比

之后开发专门针对于移动端网页时，一般都需要加上以上meta标签，这算是移动web的第一个注意点。

————————————–

接下来我们看下移动web中第二个指的注意点的点

二倍图

在移动端开发的时候会使用到二倍图，这也是移动web中需要同学们注意的第二个注意的。

但是如果想理解二倍图，首先我们先认识几个移动端中相关概念

物理像素

我们平时买手机的时候可以看到手机的各项参数，比如：iphone6/7/8手机的分辨率是750*1334

你所看到的这个分辨率其实指的就是物理像素

物理像素：指的是屏幕中显示的最小颗粒，是真实在物理现实中存在的。

说白了就是拿放大镜看到的屏幕中的一个一个发光点

显微镜放大屏幕物理像素

物理像素

我们知道了物理像素就是屏幕中的小小发光点之后，其实肯定有同学会联想到：css中的px，这个px我们平时也叫做css中的像素，那么物理像素和css像素px之间存在什么关系呢？？

css像素px是我们在css中常见的长度单位。但是现在需要注意：

之前pc端：1个px确实等于1个物理像素——》1个px对应于1个屏幕发光点
现在移动端：1个px可能等于多个物理像素——》1个px对应于多个屏幕发光点

比如：iphone6/7/8分辨率（物理像素）：750*1334——》一行只能放375px的盒子——》1px==2个物理像素（发光点）

移动端屏幕的特点

说到这里，有同学可能会觉得：为啥到移动端屏幕和pc端屏幕的设备像素比不能都是1:1的关系了呢？1:1不行嘛？

其实pc端和早期的手机屏幕确实设备像素比是1:1，即：1px==1个物理像素（发光点）
后面随着技术的发展，出现了比如：Retina（视网膜屏幕）显示技术，可以将把更多的物理像素点压缩至一块屏幕，即1px==多个物理像素（发光点），从而达到更高的分辨率，并提高屏幕显示的细腻程度。

屏幕放大图

当物理像素发光点越密集，所以效果更加清晰细腻，因此现在越来越多的移动端屏幕都会选择1px对应多个物理像素的情况了。现在常见的情况就是1px==2个物理像素

那么既然随着技术的发展，1px==多个物理像素点，那么对于开发者来说的影响到底是什么呢？？此时我们在移动端中使用图片就会受到影响。

二倍图的出现

图片也存在分辨率的概念

图片分辨率：指的是图片在水平垂直方向需要显示多少个物理像素（小光点）

比如：图片的分辨率是 200*200，其实表示图片显示在屏幕中需要用到 200*200 的物理像素（发光点）

———————-

存在的问题：以 200*200分辨率的图片显示为例

之前在pc端中：图片需要 200*200 的发光点——》pc端中：1px==1发光点——》所以此时css中我们需要 200*200 px即可
但是现在移动端中：图片需要 200*200 的发光点——》iphone4中：1px==2发光点——》所以此时css中需要 100*100 px即可

问题： 如果我们需要在移动端iphone4中显示 100*100 px的图片，其实我们需要多大分辨率的图片才行？？？

移动端实际效果截图

结论： 在移动端如：iphone4中，需要显示多少px的图片，为了清晰不被强行放大，其实需要使用宽高为2倍分辨率的图片才是最好的效果。而这使用的宽高为2倍分辨率大小的图片，称之为2倍图

实际开发中现在还存在2倍图、3倍图、4倍图之类的，但是具体使用哪一种看公司的需要或者要求

命名特点：

xxxxx@2x.png：二倍图
xxxxx@3x.png：三倍图

注意点： 二倍图是我们移动web开发时的第二个代码注意点，总结来说：一般移动web开发图片常是二倍图，使用的时候记得把图片的分辨率除以二设置px即可。