前端 - HTML5与CSS3

CSS文档

目录

• HTML5新增特性
  • 语义化标签
  • 音/视频标签
    • 视频
    • 音频
  • input表单
• CSS3新增特性
  • 属性选择器
  • 结构伪类选择器
    • child
    • type
  • 伪元素选择器
  • border-box盒子模型
  • transition过渡
    • 进度条动画
  • 图片模糊处理
  • calc()函数
  • linear-gradient线性渐变
  • 2D转换transform
    • 2D移动translate
    • 2D旋转rotate
      • rotate中心点
    • 缩放scale
    • 总结
  • 动画animation
    • keyframes定义动画
    • animation调用动画
    • 常见属性
      • 动画速度曲线
    • 简写
    • 样例：热点
  • 3D转换transform
    • 3D位移translate3d
    • 透视perspective
    • 3D旋转rotate3d
    • 3D呈现transform-style
    • 翻转盒子样例

HTML5新增特性

语义化标签

新增标签	语义
<header>	头部标签
<nav>	导航标签
<article>	内容标签
<section>	定位文档某个区域
<aside>	侧边栏标签
<footer>	尾部标签

注意：

1. 这种语义化标准主要针对搜索引擎
2. 页面中可以使用多次
3. 在IE9中，需要把它们转化为块级元素
4. 移动端使用得更多

音/视频标签

注意：Chrome禁止了音/视频的自动播放。

视频

<video>元素支持MP4、WebM、Ogg，推荐使用MP4。常用属性如下表：

属性	值	描述
width	像素	宽度
height	像素	高度
src	url	视频url地址
autoplay	autoplay	自动播放，Chrome浏览器需要加上muted才能自动播放
muted	muted	静音
loop	loop	循环播放
controls	controls	向用户展示播放控件
preload	`auto	none`
poster	Imgulr	等待加载时的图片

<video src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11ultra/section3-2.mp4" height="300px" controls muted></video>

音频

<audio>元素支持MP3、Wav、Ogg，推荐使用MP3。使用方法和<video>标签类似。

input表单

HTML5新增的input类型：

属性值	说明
type="email"	限制输入为Email类型
type="url"	限制输入为URL类型
type="date"	限制输入为日期类型
type="time"	限制输入为时间类型
type="month"	限制输入为月类型
type="week"	限制输入为星期类型
type="number"	限制输入为数字类型
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单

新增的表单属性：

属性	值	说明
required	required	必填，不能为空
placeholder	提示文本	表单提示信息，存在默认值则不显示
autofocus	autofocus	自动聚焦
autocomplete	`off	on`
multiple	multiple	可以选择多文件提交

CSS3新增特性

属性选择器

属性选择器和类选择器与伪类选择器权重相同，为(0,0,1,0)

选择器	说明
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值为val的E元素
E[att^="val"]	选择具有att属性且属性值以val开头的E元素
E[att$="val"]	选择具有att属性且属性值以val结尾的E元素
E[att*="val"]	选择具有att属性且属性值包含val的E元素

结构伪类选择器

选择器	说明
E:first-child	选择父元素中第1个E子元素
E:last-child	选择父元素中最后1个E子元素
E:nth-child(n)	选择父元素中第n个E子元素
E:first-of-type	第1个E元素
E:last-of-type	最后1个E元素
E:nth-of-type	第n个E元素

child

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul li:first-child {
    color: red;
}
ul li:last-child {
    color: orange;
}
ul li:nth-child(3) {
    color: skyblue;
}

效果如下：

---

• 1
• 2
• 3
• 4
• 5

---

nth-child()中可以填：

1. 数字，例如nth-child(3)表示选择第3个子元素

2. 关键字even表示所有偶数子元素，odd表示所有奇数子元素

3. nth-child(n)中的n从0开始，每次+1，直到超出了元素个数，一般搭配下面的公式：

   公式	说明
   2n	偶数元素
   2n+1	奇数元素
   5n	第5, 10, 15个子元素
   n+5	从第5个子元素开始到最后
   -n+5	前5个子元素

type

用法类似，在上面的<ul>例子中效果没有区别，在下面的例子会有区别：

<section>
    <p>p-1</p>
    <div>div-1</div>
    <div>div-2</div>
</section>

section div:first-child {
    color: skyblue;
}
section div:nth-of-type(2) {
    color: orangered;
}

效果如下：

---

p-1

div-1

div-2

---

只有nth-of-type(2)生效了，这是因为二者选择的过程不同：

1. div:first-child会对父元素<section>中的所有元素先排序，之后查看序号为1的元素是否为<div>标签，由于是<p>标签，没有选择到元素
2. div:nth-of-type(2)会对父元素<section>中的所有指定元素，即所有<div>标签进行排序，再选择序号为2的元素

伪元素选择器

伪元素选择器帮助我们使用CSS创建新标签元素，不需要HTML标签。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

1. before和after创建一个元素，属于行内元素
2. 新创建的元素在文档树找不到，所以称为伪元素
3. 语法：element::before{}
4. 必须有content属性
5. 和标签选择器一样，权重为(0,0,0,1)

<div>BBBBB</div>

div {
    width: 300px;
    height: 150px;
    background-color: skyblue;
}

div::before {
    content: "AAAAA";
    background-color: orangered;
}

div::after {
    content: "CCCC";
    background-color: pink;
}

效果如下：

---

AAAAABBBBBCCCC

---

border-box盒子模型

使用box-sizing属性来设置盒模型，默认为content-box，即padding和border会撑开盒子；如果设置为border-box，则不会撑开盒子(前提是padding和border不会超过盒子的宽高)。

<div class="box1">11111</div>
<div class="box2">22222</div>

.box1 {
    float: left;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid black;
    background-color: skyblue;
    /* 默认值 */
    box-sizing: content-box;
}
.box2 {
    float: left;
    margin-left: 10px;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid black;
    background-color: skyblue;
    box-sizing: border-box;
}

效果如下，box1的实际大小为230*230px，box2的实际大小为200*200px:

---

---

transition过渡

可以从一个状态渐渐过渡到另一个状态，经常搭配:hover。用法如下：

transition: 属性 时间 运动曲线 何时开始;

1. 属性：想要变化的CSS属性，例如内外边距、宽度高度、背景颜色，所有的属性用all表示
2. 花费时间：要写单位，例如0.5s
3. 运动曲线：默认为ease，可以省略
4. 何时开始：必须写单位，默认是0s
5. 不同的效果用逗号隔开

.transition-test {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* 注意用逗号隔开 */
    transition: width .5s ease .1s, height 2s ease-in-out .5s;
}

.transition-test:hover {
    width: 400px;
    height: 200px;
}

效果如下：

---

---

进度条动画

<div class="bar">
    <div class="bar-in"></div>
</div>

.bar {
    width: 150px;
    height: 14px;
    border: 1px solid red;
    border-radius: 7px;
    padding: 1px;
}
.bar-in {
    width: 0;
    height: 100%;
    border-radius: 7px;
    background-color: orangered;
    transition: width .8s;
}
.bar:hover .bar-in{
    width: 80%;
}

效果如下：

---

---

图片模糊处理

使用filter: blur(5px);将图片模糊，数值越大越模糊。

<img src="https://i2.hdslb.com/bfs/face/38415d3e45f4b85f5ae8675687ae6751f2456b11.jpg@120w_120h_1c_1s.jpg" alt="头像">
<img src="https://i2.hdslb.com/bfs/face/38415d3e45f4b85f5ae8675687ae6751f2456b11.jpg@120w_120h_1c_1s.jpg" alt="头像" style="filter: blur(5px);">

效果如下：

---

---

calc()函数

可以在声明CSS属性时进行一些计算，括号内可以写+, -, *, /。

例如让子盒子永远比父盒子小30px，可以写成：

width: calc(100%-30px);

linear-gradient线性渐变

语法如下：

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);

• 必须添加浏览器私有前缀
• 起始方向默认为top，即从上到下

div {
    height: 50px; 
    background: -webkit-linear-gradient(left, orange, orangered, red);
}

效果如下：

---

---

2D转换transform

2D移动translate

2D移动能够改变元素在页面中的位置，用法：

/* 沿着x和y轴移动 */
transform: translate(x, y);
/* 沿着x轴移动 */
transform: translateX(x);
/* 沿着y轴移动 */
transform: translateY(y);

特点：

1. 不会影响其他元素
2. 可以使用百分比单位(相对于元素的width和height)
3. 对行内标签没有效果

<div class="translate-2d"></div>
<div class="translate1-2d"></div>

.translate-2d {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    transform: translate(20px, 30px);
    transition: all .2s ease;
}
.translate-2d:hover {
    transform: translate(20px, 15px);
}
.translate1-2d {
    width: 200px;
    height: 100px;
    background-color: orangered;
}

效果如下：

---

---

由于translate可以使用百分比单位，我们可以配合定位实现盒子的水平和垂直居中。

<div class="father">
    <div class="son"></div>
</div>

.father{
    position: relative;
    width: 300px;
    height: 200px;
    background-color: skyblue;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 可以使用百分比 */
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    background-color: orangered;
}

效果如下：

---

---

2D旋转rotate

2D旋转让元素顺时针或逆时针旋转，用法：

transform: rotate(45deg);

特点：

1. 单位为deg度数
2. 正表示顺时针，负表示逆时针
3. 默认旋转的中心点是元素的中心点

<div class="test-rotate"></div>

.test-rotate {
    width: 200px;
    height: 100px;
    background-color: orangered;
    transition: all .8s ease;
}
.test-rotate:hover {
    transform: rotate(360deg);
}

效果如下：

---

---

可以用旋转代替字体图标实现arrow的效果：

<div class="box">
    <div class="arrow-down"></div>
</div>

.box {
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
}
.arrow-down {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    transform: rotate(45deg) translateY(-75%);
}

效果如下：

---

---

rotate中心点

transform-origin: x y;

特点：

1. 参数x和y用空格分开
2. x y的默认值是50% 50%
3. 还可以给x y设置像素或者方位名词(top|bottom|left|right|center)

<div class="test-origin"></div>

.test-origin {
    width: 200px;
    height: 100px;
    background-color: orangered;
    transition: all .8s ease;
}

.test-origin:hover {
    transform: rotate(360deg);
    transform-origin: right bottom;
}

中心点变成了右下角，效果如下：

---

---

缩放scale

transform: scale(x, y);

特点：

1. x, y用逗号分隔，写倍数无单位
2. 默认transform: scale(1, 1);，即宽和高都为1倍
3. transform: scale(2);等价于transform: scale(2, 2);
4. 不影响其他盒子，默认以中心点缩放，也可以修改缩放中心

页面按钮示例：

<div>
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
</div>

.number {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    line-height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    text-align: center;
    transition: all .5s;
}
.number:hover {
    transform: scale(1.2);
}

效果如下：

---

1

2

3

---

总结

1. 可以同时使用多个转换，中间用空格隔开，transform: translate() rotate() scale();
2. 顺序会影响效果，因为如果先旋转，坐标轴会被改变
3. 所以尽量将位移放在最前面

动画animation

分为2步：

1. 定义动画
2. 调用动画

keyframes定义动画

使用keyframes定义动画

@keyframes move {
    /* 0% {
    transform: translate(0px);
    } */

    25% {
        transform: translate(400px, 0px);
    }

    50% {
        transform: translate(400px, 200px);
    }

    75% {
        transform: translate(0px, 200px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

注意：

1. 0%是动画的开始，100%是动画的结束
2. 动画使元素的样式逐渐变化，可以改变任意多的样式、任意多的次数
3. 使用百分比(需要是整数)规定变化发生的时间，或使用from, to，等价于0%和100%

animation调用动画

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* 调用动画 */
    animation-name: move ;  /* 动画名称 */
    animation-duration: 4s;  /* 持续时间 */
}

常见属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写，但不包含animation-play-state属性
animation-name	必须，动画名称
animation-duration	必须，规定动画完成一个周期所需时间
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

动画速度曲线

其中的animation-timing-function：

值	描述
ease	默认，动画低速开始，然后加快，在结束前变慢
linear	匀速，动画从头到位的速度是相同的
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)

<div class="test-timing">你好！你好！你好！你好！你好！</div>

 @keyframes cover {
     from {
         width: 0;
     }
     to {
         width: 300px;
     }
}
.test-timing {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    animation: cover 4s steps(15) infinite;
}

效果如下：

---

你好！你好！你好！你好！你好！

---

简写

animation: 名称 持续时间 曲线 何时开始 播放次数 是否反方向 结束状态;

将上面的CSS修改为：

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    animation: move 4s infinite alternate;
}

效果如下：

---

---

样例：热点

<div class="point">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
</div>

.point {
    position: relative;
    width: 8px;
    height: 8px;
    margin: 0 auto;
}

.dotted {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #09f;
}

.point div[class^="pulse"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 12px #009dfd;
    animation: pulse 1.2s linear infinite;
}
.point div.pulse2 {
    animation-delay: 0.4s;
}
.point div.pulse3 {
    animation-delay: 0.8s;
}
@keyframes pulse {
    70% {
        transform: scale(5);
        opacity: 1;
    }
    100% {
        transform: scale(9);
        opacity: 0;
    }
}

效果如下：

---

---

3D转换transform

3D位移translate3d

transform: translateZ(100px);表示向外移动100px，一般单位为px，或者使用transform: translate3d(0, 0, 100px);

透视perspective

使用透视来模拟人的视觉位置，即模拟视距(人眼到屏幕的距离)，单位是px。简单的来说，就是让元素实现近大远小的效果。透视写在被观察元素的父盒子上，例如：

body {
    perspective: 500px;
}

3D旋转rotate3d

3D旋转让元素在三维平面沿着x轴/y轴/z轴或者自定义轴进行旋转。

<div class="father">
    <div class="test-3drotate"></div>
    <div class="test-3drotate"></div>
    <div class="test-3drotate"></div>
</div>

.father {
    perspective: 500px;
    width: 900px;
    height: 100px;
}

.test-3drotate {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: 100px;
    background-color: skyblue;
    transform: rotateX(45deg);
}

效果如下：

---

---

自定义轴旋转rotate3d(x, y, z, 45deg)中的x, y, z表示旋转轴的矢量：

div {
	transform: rotate3d(1, 0, 0, 45deg);  /* 沿着x轴旋转45度 */
    transform: rotate3d(1, 1, 0, 45deg);  /* 沿着x,y轴对角线旋转45度 */
}

沿着x,y轴对角线旋转45度效果如下：

---

---

3D呈现transform-style

写给父元素，控制子盒子是否开启三位立体环境，默认是transform-style: flat;不开启，transform-style: preserve-3d;表示开启。

body {
    perspective: 500px;
}
.box3d {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transition: all .8s;
    /* transform-style: preserve-3d; */
}
.box3d:hover {
    transform: rotateY(60deg);
}
.box3d div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.box3d-child1 {
    background-color: skyblue;
}
.box3d-child2 {
    transform: rotateX(45deg);
    background-color: orangered;
}

效果如下：

---

---

取消transform-style: preserve-3d;的注释之后，效果如下：

---

---

翻转盒子样例

<div class="nav-test">
    <div class="front-box">你好</div>
    <div class="bottom-box">再见</div>
</div>

body {
    perspective: 500px;
}

.nav-test {
    position: relative;
    width: 100px;
    height: 35px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: all 1s;
}

.nav-test:hover {
    transform: translateY(-50%) rotateX(90deg);
}

.front-box,
.bottom-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    transition: all 1s;
}

.front-box {
    background-color: orangered;
}

.bottom-box {
    background-color: royalblue;
    transform: translateY(50%) translateZ(-17.5px) rotateX(-90deg);
}

效果如下：

---

你好

再见

---