CSS3 新增子级选择器
CSS3中，相对于CSS2.1版本的7个选择器（4个基础选择器，3个高级选择器），增加了更多其他的选择器，实现了更多的选择方式
- 子级选择器用于选取带有特定父元素的元素。
- 书写语法：
element1 > element2
- 选择的是element1的子级element2
- 如果element2元素不是父元素element1的直接子元素，则不会被选择。
- > 符号之前书写父级的选择器，> 符号之后书写子级的选择器，必须满足父子级关系才能选中标签
div > p {
color: red;
}
CSS3 新增兄弟选择器
| 选择器 |
简介 |
| element1 + element2 |
匹配同一个父元素中紧跟在element1后面的一个element2元素 |
| element1 ~ element2 |
匹配同一个父元素中在element1后面的所有element2元素 |
相邻兄弟选择器
- 相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素
- 书写语法：
E1 + E2
- 选中的是紧跟在E1后边的同级元素E2
- 只能选中紧跟在后面的一个E2元素
- 二者有相同的父元素
- + 符号前后可以添加空格
h1 + p {
color: red;
}
其他兄弟选择器
- 其他兄弟选择器匹配同一个父元素中在E1后面的所有E2元素
- 书写语法：
E1 ~ E2
- 选择E1之后出现的所有的E2
- 两种元素必须拥有相同的父元素，但是E2不必直接紧随E1
h2 ~ p {
color: red;
}
CSS3 新增结构伪类选择器一
| 选择器 |
简介 |
| 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个 |
<style>
.box :first-child {
background-color: rgb(255, 0, 0);
}
.box :last-child {
background-color: rgb(55, 0, 255);
}
.box :nth-child(2) {
background-color: rgb(0, 255, 55);
}
style>
<body>
<div class="box">
<h1>一级标题h1>
<p>段落1p>
<p>段落2p>
<p>段落3p>
<p>段落4p>
<p>段落5p>
div>
body>
- nth-child(n)
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个
- 常见的关键词even偶数，odd奇数
- 常见的公式如下（如果n是公式，则从0开始计算，n是从0，1，2，3…一直递增）
- 但是第0元素或者超出了元素的个数会被忽略
| 公式 |
取值 |
| 2n |
偶数 |
| 2n+1 |
奇数 |
| 5n |
5、10、15...... |
| n+5 |
从第5个开始（包含第五个）到最后，5、6、7、8、9...... |
| -n+5 |
前五个（包含第五个）5、4、3、2、1、0...... |
CSS3 新增结构为类选择器二
- E:nth-child(n)和E:nth-of-type(n)的区别
- E:nth-child(n) — 匹配父元素的第n个子元素E，同时需要满足两个条件
- E:nth-of-type(n) — 匹配同类型中的第n个同级兄弟元素E，会忽视其他同级的非同类型元素。
CSS3 新增伪元素选择器
| 选择器 |
介绍 |
| E::before |
在E元素内部的前面插入一个元素 |
| E::after |
在E元素内部的后面插入一个元素 |
| E::first-letter |
选择到了E容器内部的第一个字母 |
| E::first-line |
选择到了E容器内部的第一行文本 |
H5写法和传统写法的区别
- 单冒号 E:before
- 双冒号 E::before
- 浏览器对以上写法都能识别，双冒号是h5的语法规范
伪元素的注意事项
- 微元素值只能给双标签添加，不能给单标签添加
- 伪元素的冒号前不能有空格，如：
E ::before 这个写法就是错误的
- 伪元素里面必须写上属性content:"";
- before和after创建一个元素，但是属于行内元素
- 因为在DOM里面看不到刚才创建的元素，所以我们称为伪元素
CSS3 新增属性选择器
| 选择器 |
介绍 |
| 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元素 |
input[name] {
color: red;
}
input[type="checkbox"] {
color: red;
}
input[type^="check"] {
color: red;
}
input[class^="icon"] {
color: red;
}
input[class$="dan"] {
color: red;
}
input[class*="on"] {
color: red;
}
选择器权重
- 基础选择器：id > 类 > 标签 > *
- 伪类选择器、属性选择器的权重等于类选择器
- 伪元素选择器的权重等于标签选择器
CSS3 盒模型
- CSS3中可以通过box-sizing来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度
| 属性值 |
简介 |
| content-box |
默认值，标准盒子模型，盒模型是外扩的。width与height只包含内容的宽和高。在width和height之外绘制元素的内边距和边框。 |
| border-box |
guaiyimoshi1，盒模型是内减的。width和height属性包括内容，内边距和边框，但不包含外边距。为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。 |
content-box标准模式
- Standard模式：标准模式中，盒子总体大小为width(height) + padding + border，内容区域是width和height部分
.box {
width: 200px;
height: 200px;
padding: 10px;
border: 10px solid blue;
box-sizing: content-box;
}
border-box怪异模式
- Quirks模式：怪异模式中，盒子总体大小为width和height，添加了padding和border后，内容区域会收缩。
.box {
width: 200px;
height: 200px;
padding: 10px;
border: 10px solid blue;
box-sizing: border-box;
}
CSS3 边框圆角属性
- 属性名：border-radius
- 作用：设置边框的圆角
- 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。
| 属性值 |
说明 |
| x-radius / y-radius |
/ 分割两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆角 |
| radius |
一个属性值，则水平和垂直都设置为同一个值，得到的是圆角 |
.box {
width: 200px;
height: 200px;
background-color: red;
border-radius: 100px;
}
单一属性
- border-top-left-radius:半径；
- border-top-right-radius:半径；
- border-bottom-right-radius:半径；
- border-bottom-left-radius:半径；
.box {
width: 200px;
height: 200px;
background-color: red;
border-bottom-right-radius:50px;
}
简写方法
- border-radius相当于四个单一属性的简写方法，类似padding也可以有四种值得写法
- border-radius: 左上角 右上角 右下角 左下角;
- border-radius: 左上角 右上角和左下角 右下角;
- border-radius: 左上角和右下角 右上角和左下角;
- border-radius: 四个角相同;
.box {
width: 200px;
height: 200px;
background-color: red;
border-radius:50px;
}
/的属性值写法
- border-radius属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法
.box {
width: 200px;
height: 200px;
background-color: red;
border-radius:50% 20% 40% / 20% 30%;
}
浏览器兼容
- Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。
CSS3 文字阴影
- 在CSS3中，text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
| 属性值 |
简介 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
| v-shadow |
必需。垂直阴影的位置。允许负值 |
| blur |
可选。模糊的距离 |
| color |
可选。阴影的颜色 |
文字阴影语法
text-shadow属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是0
.word {
font: bold 20px/60px "微软雅黑";
text-shadow: 3px 3px 5px #f00;
}
多层阴影
text-shadow属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上
.word {
font: bold 20px/60px "微软雅黑";
text-shadow: 3px 3px #f00,
6px 6px #0f0,
9px 9px #00f;
}
CSS3 盒子阴影
- 在CSS3中，box-shadow属性用于对盒子边框添加阴影
| 属性值 |
简介 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
| v-shadow |
必需。垂直阴影的位置。允许负值 |
| blur |
可选。模糊的距离 |
| spread |
可选。阴影的尺寸 |
| color |
可选。阴影的颜色 |
| inset |
可选。将外部阴影改为内部阴影 |
边框阴影语法
box-shadow属性向盒子添加阴影，属性值有2-4个长度值、可选的颜色值以及可选得inset关键词来规定，省略的长度是0
.box {
bos-shadow: 20px 20px 5px 20px #f00 inset;
}
多层阴影
box-shadow属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上
.box {
box-shadow: 30px 30px #f00,
50px 50px #0f0,
70px 70px #00f;
}
CSS3 过渡属性
动画效果
- CSS3出现之前，前端一般使用Flash动画或JavaScript制作动画
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片
过渡属性
- 属性名：transition
- 作用：在不使用Flash动画或JavaScript的情况下，使用transition可以实现补间动画（过渡效果）并且当前元素只要有“属性”发生变化时即存在两种状态（我们用A和B代指）那么A和B之间就可以实现平滑的过度的动画效果。为了方便看效果，我们是用:hover切换状态
- 语法格式：
transition: 过渡的属性 过渡时间 运动曲线 延时时间
单一属性写法
| 属性 |
描述 |
| transition |
简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property |
规定应用过渡的CSS属性的名称 |
| transition-duration |
定义过渡效果花费的时间。默认是0 |
| transition-timing-function |
规定过渡效果的时间曲线。默认是“ease” |
| transition-delay |
规定过渡效果何时开始。默认是0 |
- transition-property — 过渡的属性
- none：表示没有属性过渡
- all：表示所有变化的属性都过渡
- 属性名：使用具体的属性名，多个属性名之间逗号分隔
- 时间
- 过渡时间：以s秒为单位。
- 延时时间：以s秒为单位。0s也必须加单位。
- transition-timing-function — 时间曲线
| 属性 |
描述 |
| linear |
规定以相同速度开始至结束的过渡效果 |
| ease |
规定慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in |
规定以慢速开始的过渡效果 |
| ease-out |
规定以慢速结束的过渡效果 |
| ease-in-out |
规定以慢速开始和结束的过渡效果 |
| cubic-bezier(x1,y1,x2,y2) |
在cubic-bezier函数中定义自己的值。x1、x2取是0-1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标 |
.box {
width: 100px;
height:100px;
background-color: red;
transtion: all 2s ease-in 0s;
}
.box:hover {
width: 300px;
}
- 浏览器兼容
- Internet Explorer 10、Firefox、Chrome以及Opera支持transition属性。
- Safari需要前缀-webkit-
- 注意：Internet Explorer 9以及更早的版本，不支持transition属性
2D 转换-位移
- 属性名：transform
- 作用：对原宿进行移动、缩放、转动、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果
- 属性值：多种转换方法的属性值，可以实现不同的转换效果
- transform的属性值为translate()时，可以实现位移效果
- 书写语法：
| 值 |
说明 |
| translate(x,y) |
x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负数 |
| translate(x) |
只有一个数值，表示水平方向的位移 |
.box {
transform: translate(10,20)
}
2D 转换-缩放
- transform的属性值为scale()时，可以实现元素缩放效果
- 书写语法
| 值 |
说明 |
| scale(x,y) |
x,y分别为改变元素的宽度和高度的倍数 |
| scale(n) |
只有一个数值，表示宽度和高度同时缩放n倍 |
| scaleX(n) |
改变元素的宽度 |
| scaleY(n) |
改变元素的高度 |
.box {
transform: scaleY(1.5)
}
2D 转换-旋转
- transform的属性值为rotate()时，可以实现元素旋转效果
- 书写语法：
retate(数字deg)
- deg为读书单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值
- 注意：元素旋转后，坐标轴也跟着发生转变
- 因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异
.box {
transorm: rotate(-30deg)
}
2D 转换-倾斜
- transform的属性值为skew()时，可以实现元素旋转效果
- 书写语法：
skew(数字deg, 数字deg)
- 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0
.box {
transform: skew(0, -30deg)
}
2D 转换-基准点
- transform-origin属性
- 作用：设置调整元素的水平和垂直方向原点的位置
- 调整元素的基准点
- 属性值：包含两个，中间使用空格分隔
| 值 |
说明 |
| x |
定义x轴的原点在何处。可能的值：left、center、right、像素值、百分比 |
| y |
定义y轴的原点在何处。可能的值：top、center、bottom、像素值、百分比 |
.box {
transform-origin: left top;
}
2D 转换-卡包特效案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 225px;
height: 150px;
border: 1px solid #000;
margin: 300px auto;
}
.box img {
position: absolute;
left: 0;
top: 0;
width: 225px;
height: 150px;
transform-origin: right top;
transition: all 1s ease;
}
.box:hover img:nth-child(1) {
transform: rotate(60deg);
}
.box:hover img:nth-child(2) {
transform: rotate(120deg);
}
.box:hover img:nth-child(3) {
transform: rotate(180deg);
}
.box:hover img:nth-child(4) {
transform: rotate(240deg);
}
.box:hover img:nth-child(5) {
transform: rotate(300deg);
}
.box:hover img:nth-child(6) {
transform: rotate(360deg);
}
style>
head>
<body>
<div class="box">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
div>
body>
html>
3D 转换-透视perspective
- 3D转换
- transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x,y轴组成的平面效果多了一条z轴
- 透视
- 电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果）其实只是一种视觉呈现，通过透视可以实现此目的
- 透视可以将一个2D平面，在转换的过程当中，呈现3D效果
- 透视特点：近大远小
- 注意：并非任何情况下都需要透视效果，根据开发需要进行设置，如果需要展示z轴的变化，则设置透视效果
- 透视属性 — perspective
- 属性名：perspective
- 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果
- 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
- 注意：透视属性需要设置给3D变化元素的父级
.bigBox {
perspective: 1000px;
}
.box {
}
3D 转换-旋转
- 3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：
- 属性值：
| 值 |
说明 |
| rotateX(angle) |
定义沿着X轴的3D旋转 |
| rotateY(angle) |
定义沿着Y轴的3D旋转 |
| rotateZ(angle) |
定义沿着Z轴的3D旋转 |
.bigBox {
perspective: 1000px;
}
.box {
transform: rotateZ(30deg);
}
3D 转换-位移
属性值
| 值 |
说明 |
| translateX(x) |
定义沿着X轴的位移值 |
| translateY(y) |
定义沿着Y轴的位移值 |
| translateZ(z) |
定义3D位移，设置Z轴的位移值 |
属性值为像素值或者百分比，正负表示位移的方向。正值向对应的正方向移动，负值向对应轴的负方向移动
.bigBox {
perspective: 1000px;
}
.box {
transform: translateX(300px);
transform: translateY(300px);
transform: translateZ(300px);
}
位移和旋转可以同时设置，但是书写顺序会影响实际效果
3D 正方形案例
transform-style属性
- 用于设置被嵌套的子元素在父元素的3D空间显示，子元素会保留自己的3D转换坐标轴。
- 属性值：
- flat：所有子元素在2D平面呈现
- preserve-3d：保留3D空间
- 3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置
transfrom-style: preserve-3d，来使其变成一个真正的3D图形
- 一般来说，该属性设置给3D变换图形的父级元素
浏览器兼容
- Internet Explorer 10、Firefox以及Opera支持transform属性
- Chrome和Safari需要前缀 -webkit-
- Internet Explorer 9需要前缀-ms-
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 150px auto;
}
.stage {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
transform-style: preserve-3d;
perspective: 5000px;
transition: all 4s ease;
}
.stage:hover {
transform: rotateX(360deg) rotateY(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
.stage div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
font: bold 80px/200px "arial";
text-align: center;
}
.stage div:nth-child(1) {
background-color: rgba(255, 0, 0, 0.5);
transform: translateZ(100px);
}
.stage div:nth-child(2) {
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(90deg) translateZ(100px);
}
.stage div:nth-child(3) {
background-color: rgba(0, 0, 255, 0.5);
transform: rotateX(180deg) translateZ(100px);
}
.stage div:nth-child(4) {
background-color: rgba(255, 255, 0, 0.5);
transform: rotateX(270deg) translateZ(100px);
}
.stage div:nth-child(5) {
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(90deg) translateZ(100px);
}
.stage div:nth-child(6) {
background-color: rgba(0, 255, 255, 0.5);
transform: rotateY(-90deg) translateZ(100px);
}
style>
head>
<body>
<div class="box">
<div class="stage">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
div>
div>
body>
html>
CSS3动画
CSS3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash动画以及JavaScript
keyframes规则
- @keyframes规则用于创建动画
- 在@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果
- 可以改变任意多的样式任意多的次数
- 需要使用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
- 0%是动画开始，100%是动画完成
keyframes书写方法
@keyframes 动画名称 {
}
animation属性
- 需要将@keyframes中创建的动画绑定到某个选择器，否则不会产生动画效果。
- animation属性用于对动画进行捆绑
- 语法：
div {
animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
}
| 属性 |
描述 |
| animation-name |
规定@keyframes动画的名称 |
| animation-duration |
规定动画完成一个周期所花费的秒或者毫秒。默认是0 |
| animation-timing-function |
规定动画的速度曲线。默认是"ease" |
| animation-delay |
规定动画何时开始。默认是0 |
| animation-iteration-count |
规定动画被播放的次数。默认是1。infinite表示无限次播放 |
浏览器兼容
- Internet Explorer 10、Firefox以及Opera支持@keyframes规则和animation属性
- Chrome和Safari需要前缀 -webkit-
- Internet Explorer 9及更早版本，不支持@keyframes规则和animation属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 200px auto;
background-color: skyblue;
animation: move2 3s linear infinite;
}
@keyframes move {
from {
transform: translateY(0);
}
to {
transform: translateY(100px);
}
}
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
style>
head>
<body>
<div class="box">div>
body>
html>
