过渡
过渡的属性
- 如果两个状态发生改变，没有过渡，效果是瞬间变化的
- 如果加上了过渡，那么这个过程就会有动画的效果。
- 整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
transition-property:all;
transition-duration:1s;
transition-delay:2s;
transition-timing-function:linear;
|
属性合写
1
2
|
transition: width 1s 3s linear;
|
过渡的注意点：
- 过渡必须要有两个状态的变化。
- 过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。
深入理解过渡
CSS3动画
动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。
动画与过渡的区别：
1
2
| 1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多
|
定义动画
基本步骤
1
2
3
4
5
6
7
8
9
10
11
12
|
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| @keyframes scale {
0% {
width: 200px;
height: 200px;
}
50% {
width: 300px;
height: 200px;
}
100% {
width: 300px;
height: 300px;
}
}
|
animation详解
animation是一个复合属性，一共有8个参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
ease：变速
linear：匀速
steps：分步动画
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
infinite:无穷次
animation-direction：设置动画在循环中是否反向运动
normal：从from到to
reverse: 从to到from
alternate: 交替执行
animation-fill-mode：设置动画时间之外的状态
forwards：停留在结束状态
animattion-play-state:设置动画的状态。
paused: 暂停动画
|
帧动画原理
CSS3私有前缀
在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性
目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。
一般来说，CSS3主要是为移动端而生的，因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。
1
2
3
4
| 谷歌、苹果浏览器：-webkit-
火狐浏览器：-moz-
IE浏览器：-ms-
欧朋浏览器：-o-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
|
移动端样式
移动端开发现状
- 移动web开发指的是需要适配移动设备的网页开发
- 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术
- 移动web开发与pc端web开发的区别是什么？
移动端的浏览器与pc端不同
1
2
3
4
| 谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器 360安全浏览器 搜狗浏览器 猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。
因此在移动端，css3属性只需要加webkit前缀即可。
|
移动端设备尺寸不一样(尺寸非常多，碎片化很严重)
1
2
| Android： 320*480 480*800 540*960 720*1280 1080*1920 2k屏 4k屏
iphone： 640*960 640*1136 750*1334 1242*2208
|
视口 viewport（重要）
1
2
3
4
5
6
7
8
9
10
11
12
| 问题：一个电脑上的网站，在手机端访问，效果是什么样的？
iPhone5的设备宽度只有320px，一张宽度为640px的图片在手机端访问，显示的效果是什么？
1. 在手机端，html的大小都是980px，为什么？
这主要是历史原因导致的，因为在移动设备刚流行的时候，网站大多都是pc端的，pc端的页面宽度一般都比较大，移动设备的宽度比较小，如果pc端页面直接在移动端显示的话，页面就会错乱。为了解决这个问题，移动端html的大小直接就定死成了980px（因为早起的pc端网站版心就是980px居多）。
2. 视口
在pc端，html的大小默认是继承了浏览器的宽度，即浏览器多宽，html的大小就是多宽，但是在移动端，多出来了一个视口的概念（乔布斯）,视口说白了就是介于浏览器与html之间的一个东西，视口的宽度默认定死了980px，因此html的宽度默认就是980px，视口的特点是能够根据设备的宽度进行缩放。
3. 视口设置。
对于现在的移动端页面来说，视口默认为980px肯定不合适，因为设备宽度不够的话，视口会进行缩放，导致页面展示效果不好看。
|
视口参数设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
|
流式布局
移动端的特点
- 手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新
- 手机端屏幕比较小，能够放的内容比较少。
问题：布局的时候怎么解决屏幕大小不一致的问题？
- PC端，固定版心，让所有分辨率的电脑的版心都是一样的，比如京东
- 移动端：移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心不合适。因此移动端大多会采用流式布局（百分比布局）
流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。
流式布局的特征：
- 宽度自适应，高度写死，并不是百分百还原设计图
- 图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。
- 一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化
经典的流式布局
设计图的缩放
手机端的设计图相对手机来说 是两倍或者三倍的关系 直接拿到这样的设计图量的结果都是2倍的 所以需要除以2 每次手动去除较为麻烦 所以 推荐将设计图缩放到320的大小
两倍图
由于手机端的像素密度要比PC端高,很多手机的像素密度是电脑的2倍甚至3倍,所以为了在手机上显示的图片更加清晰,设计师给的图片都是2倍图甚至3倍图
问题: 如何使用2倍图片的精灵图或者3倍图片的精灵图？
1
2
3
4
5
6
7
8
9
| 以2倍图为例:
1. 利用PS将精灵图缩小一倍,去量取对应的宽高和位置坐(这个缩小仅仅是为了量取坐标 而真正引入到页面的图片还是原设计图下面切出来的图片)
2. 利用background-size去缩放精灵图(缩放至原始图片的1/2)
重点注意: 引用的图片还是原来的2倍图
利用ps缩放图片:
1. 将图片选项卡拖拽出来或者选择菜单栏
2. 图像 - 图像大小 - 将宽度缩放至1/2即可 只需要缩放一个就行 默认会保证等比例
|
