1. CSS3
CSS3 现状
- 在CSS2的基础上新增(扩展)样式
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
- IE9以下几乎不支持
2. CSS3 选择器
类选择器、属性选择器、伪类选择器的权重为10
2.1 属性选择器
选择符 | 简介 |
---|---|
[E=“att”] | 选择具有att属性的E元素 |
[att=“val”] | 选择具有att属性并且属性值等于val的E元素 |
[att^=“val”] | 匹配具有att属性,且值以val开头的E元素 |
[att$=“val”] | 匹配具有att属性,且值以val结尾的E元素 |
[att*=“val”] | 匹配具有att属性,且值包含val的E元素 |
2.2 结构伪类选择器
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中的最后一个子元素E |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
E:nth-child(n) 和E:nth-of-type(n)这里的n有两个特殊值:even和odd
even表示偶数,odd表示奇数
2.2.1 nth-child(n)和nth-of-type(n)
- n可以是数字、关键字和公式
- n是数字就是选择第几个
- 常见的关键字是even(偶数)、odd(奇数)
- 常见的公式如下(如果n是公式,则从0开始计算)
- 如果公式超出了元素个数则会被忽略
公式示例:
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 … |
n+5 | 从第5个开始(包含第5个)直到最后 |
-n+5 | 前5个(包含第5个) |
2.3 伪元素选择器
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
在伪元素选择器中插入内容需要属性content:“值”
注意:
- before 和 after 必须有 content 属性
- before 在内容的前面,after 在内容的后面
- before 和 after 创建一个元素,但是属于行内元素
- 因为在 dom 中看不到刚才创建的元素,所以我们称之为伪元素
- 伪元素和标签选择器一样,权重都是1
2.3.1 引入第三方图标库的注意事项
以iconfont为例,我们在官网下载完之后会有一个demo.html
里面会提供图片的字符实体编码,例如:
我们在使用::before或::after的content里面要放十六进制的代码,而字符实体编码中x后面的字符为十六进制,例如
在伪元素中该这么写
div::before{
content:"\e957"
font-family:"iconfont"
}
3. CSS3 2D转换
转换(transform)是 CSS3 中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
转换(transform)可以简单理解为变形。
- 移动:translate
- 旋转:rotate
- 缩放:scale
3.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术。二维坐标系分为X轴(水平)和Y轴(垂直)
3.2 2D 转换之移动 translate
2D移动是2D转换种的一种功能,可以改变元素在页面中的位置,类似于定位。
语法:
语法 | 简介 |
---|---|
transform: translate(x, y) | x代表在x轴移动位置,y代表在y轴移动位置 |
transform: translateX(n); | 表示在x轴移动 |
transform: translateY(n); | 表示在y轴移动 |
但是translateX和translateY不能同时用。
具体写法是这样的:
div {
transform: translate(100px, 100px);
transform: translateX(200px);
transform: translateY(200px);
}
一定要记得在后面加上单位px!!!
重点:
- translate 定义了2D转换中的移动,沿着X轴和Y轴移动元素的位置
- translate 最大的优点:不会影响其他元素的位置
- translate 中的百分比单位是相对于自身元素的,例如:
translate(50%,50%)
- 对行内标签没有效果
解释一下在translate中写百分比的效果,例如50%只是基于本身的宽高的50%进行的数值进行移动的。
3.3 2D转换之旋转 rotate
语法:
transform:rorate(度数)
重点:
- rotate 里面跟度数,单位是 deg ,比如 rotate(45deg)
- 角度为正时,顺时针;角度为负时,逆时针
- 默认旋转的中心是元素的中心点
3.4 2D 转换中心点 transform-origin
我们可以设置元素转换的中心点
语法:
transform-origin: x y;
重点:
- 注意后面的参数 x 和 y 要隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给 x y 设置像素或者方位名词(top bottom lef right center)
3.5 2D 转换之缩放 scale
只要给元素添加这个属性就可以控制元素的放大和缩小。
语法:
transform:scale(x,y)
注意:
- 注意其中的 x 和 y 要用逗号隔开
- transform:scale(1,1):宽和高都放大1倍,相当于没有放大
- transform:scale(2,2):宽和高都放大2倍
- transform:scale(2):只写一个参数,那么第二个参数就和第一个参数一样。
- transform:scale(0.5,0.5):缩小
- scale 缩放最大的优势:可以设置转换中心点缩放,默认是元素中心点进行缩放的
- scale 缩放不影响其他元素
3.6 2D 转换综合写法
注意:
- 同时使用多个转换,其格式为:
transform: translate() rotate() scale()...
- 其顺序会影响转换的效果。(例如:先旋转会改变坐标轴方向)
- 当我们同时有位移和其他转换的时候,记得把位移放到最前
4. CSS3 动画
动画(animation)是 CSS3 中具有颠覆性的特征之一。可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化、更多控制、连续自动播放等效果。
4.1 动画的基本使用
制作动画分为两步:
- 先定义动画
- 再使用(调用)动画
4.1.1 用 keyframes 定义动画(类似定义类选择器)
@keyframes 动画名称{
0% {
width: 100px;
}
100% {
width: 200px;
}
}
动画序列:
- 0% 是动画的开始,100%是动画的完成。这样的规则就是动画序列。
- 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐变为新样式的动画。
- 动画是使元素从一种样式逐渐变为另一种样式的效果,可以改变任意多的样式任意多的次数。
- 用百分比来规定变化发生的时间,或用关键词“from”和“to”,等于 0% 和 100% 。
4.1.2 元素使用动画
div {
/* 动画名称 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 1s;
}
animation-name
:调用动画的名称animation-duration
:动画的持续时间,单位是秒(s)或毫秒(ms)
4.2 动画常见的属性
属性 | 描述 |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。infinite(无限循环) |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。alternate(逆向播放) |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。paused(停止) |
animation-fill-mode | 规定对象动画结束后的状态。保持当前位置:forwards,回到起始状态:backwards。 |
4.3 动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束的状态
请严格按照这个顺序去写,否则效果会错乱
animation:move 1s linear 2s infinite alternate
- 简写属性里面不包含 animation-play-state
- 暂停动画:animation-play-state:puased; 经常配合鼠标经过等一同使用
- 想要动画走回来而不是直接重置位置:animation-direction:alternate;
- 动画结束后,停在原地:animation-fill-mode:forwards;
4.4 速度曲线
animation-timing-function:规定动画的速度曲线,默认是“ease”
值 | 描述 |
---|---|
linear | 动画从头到尾的速度都是一样的,匀速 |
ease | 默认。动画从低速开始,然后加快,在结束时变慢 |
ease-in | 动画从低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了间隔数量(步长) |
5. CSS3 3D转换
3D 转换常用的是 3D位移 和 3D旋转
主要知识点:
- 3D位移:translate3d(x,y,z)
- 3D旋转:rotate3d(x,y,z)
- 透视:perspective
- 3D呈现:transform-style
5.1 三维坐标系
三维坐标就是指立体空间,立体空间由3个轴组成。
- X 轴:水平向右。注意:x 右边是正值,左边是负值
- Y 轴:垂直向下。注意:y 下面是正值,上面是负值
- Z 轴:垂直屏幕。注意:z 往外是正值,往里是负值
5.2 3D位移 translate3d
语法:
transform: translateX(100px)
:仅仅在 X轴 上移动transform: translateY(100px)
:仅仅在 Y轴 上移动transform: translateZ(100px)
:仅仅在 Z轴 上移动(注意:translateZ一般用px单位)transform: translate3d(x,y,z)
:在 x y z 轴上移动
5.3 透视 perspective
在2D平面上产生近大远小视觉立体,但是效果只是2维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视,我们也称为视距:视距就是人眼到屏幕的距离
- 透视的值越大,元素越大;透视的值越小,元素越小。
- 透视的单位是像素(px)
- 透视写在被观察元素的父元素上面
5.4 3D旋转 rotate3d
3D旋转可以让元素在三维沿着X轴、Y轴、Z轴或者自定义轴进行旋转
语法:
transform: rotateX(45deg)
:沿着 X轴 正方向旋转45°transform: rotateY(45deg)
:沿着 Y轴 正方向旋转45°transform: rotateZ(45deg)
:沿着 Z轴 正方向旋转45°transform: rotate3d(x,y,z,deg)
:沿着 自定义轴 旋转,deg为角度
对于元素旋转的方向的判断,可以依靠一个左手准则。
- 左手的大拇指指向 X轴/Y轴/Z轴 的正方向
- 其余的手指弯曲的方向就是该元素沿着 X轴/Y轴/Z轴 旋转的方向。
transform: rotate3d(x,y,z,deg)中的 x,y,z 代表旋转轴的矢量。
/* 沿着 x,y相交 轴旋转 */
transform: rotate3d(1, 1, 0, 45deg);
/* 沿着 y,z相交 轴旋转 */
transform: rotate3d(0, 1, 1, 45deg);
5.5 3D呈现 transform-style
重点:
- 控制子元素是否打开三维立体
transform-style: flat;
子元素不开启3d立体,默认是这个属性。transform-style: preserve-3d;
子元素开启立体空间- 属性给父元素,但影响的是子元素
- 这个属性很重要,后面必用
6. H5C3 综合案例
6.1 创建骨架
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
6.2 优化样式
body {
perspective: 1000px;
}
section {
width: 250px;
height: 140px;
margin: 300px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate linear 10s infinite;
background: url(images/horse.jpg);
}
section:hover {
/* 鼠标经过暂停动画 */
animation-play-state: paused;
}
section div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(images/dog.jpg);
}
section div:nth-child(1) {
transform: translateZ(300px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
@keyframes rotate {
100% {
transform: rotateY(360deg);
}
}
7. 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加
7.1 私有前缀
-moz-
:代表 firefox 浏览器私有属性-ms-
:代表 ie 浏览器私有属性-webkit-
:代表 safari、chrome私有属性-o-
:代表 Opera 私有属性
7.2 提倡的写法
-moz-border-redius: 10px;
-webkit-border-redius: 10px;
-o-border-redius: 10px;
border-redius: 10px;
可以先写各浏览器的私有前缀,再写一个不带前缀的属性。