CSS&CSS3
1. 引入CSS样式
- 行内样式表(内联样式表)
- 内部样式表(内嵌样式表)
- 外部样式表(外链式样式表)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS.demo1</title>
<link rel="stylesheet" href="../CSS/demo1.css" type="text/css" /> <!--先加载CSS后HTML(链接外部样式)-->
<!-- <style type="text/css">
</style> -->
<!-- <style type="text/css">
先加载HTML后CSS,对页面性能有影响(导入外部样式)
@import url("./CSS/demo1.css");
</style> -->
</head>
<body>
<!-- <p style=""></p> -->
</body>
</html>
样式表 | 优点 | 缺点 | 作用范围 |
---|---|---|---|
行内样式表 | 权重高 | 未实现样式和结构相分离 | 最用于一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 最用于一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 作用于一个站点 |
2. 选择器
2.1 基础选择器
-
标签选择器——选择某一类标签
-
类选择器
-
在标签中设置class属性
-
CSS文件中–>
.class_name{}
-
相同class可以使用多次
-
/* demo3.css */
html{
font-size: 100px;
font-weight: bold;
letter-spacing: -15px;
}
.G{
color: #4285f4;
}
.o1{
color: #ea4335;
}
.o2{
color: #fbbc05;
}
.g{
color: #4285F4;
}
.l{
color: #34a853;
}
.e{
color: #ea4335;
}
<!-- demo3 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
<link rel="icon" href="../img/study.png" />
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
- 多类名
/* demo3.css */
.font100{
font-size: 100px;
font-weight: bold;
letter-spacing: -5px;
}
.G{
color: #4285f4;
}
.o1{
color: #ea4335;
}
.o2{
color: #fbbc05;
}
.g{
color: #4285F4;
}
.l{
color: #34a853;
}
.e{
color: #ea4335;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
<link rel="icon" href="../img/study.png" />
</head>
<body>
<span class="font100 G">G</span>
<span class="font100 o1">o</span>
<span class="font100 o2">o</span>
<span class="font100 g">g</span>
<span class="font100 l">l</span>
<span class="font100 e">e</span>
</body>
</html>
- id选择器
- 设置id
- 使用
#id{}
- 通配符选择器
- 使用
*{}
- 使用
2.2 复合选择器
- 后代选择器
父级 子级 …{}
- 选择元素或元素组的子孙后代
- 子元素选择器
父级>子级{}
- 只选择子级
- 交集选择器
- 既是又是
- eg:
p.hello{}
(既是p标签又是hello类)
- 并集选择器
- eg:
span,div{}
(span和div标签)
- eg:
- 链接伪类选择器
a:link
未访问链接状态a:visited
访问过的链接状态a:hover
鼠标移动上去的链接状态a:active
点击时的链接状态- 连接顺序 l,v,h,a(love hate) 顺序不对会出错
2.3 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元素 |
- 交集选择器
2.4 CSS3结构伪类选择器
选择符 | 描述 |
---|---|
E:frist-child(E可以不指定) | 匹配父元素中第一个子元素E |
E:last-child(E可以不指定) | 匹配父元素中最后一个子元素E |
E:nth-child(n)(E可以不指定) | 匹配父元素中第n个子元素E |
E:frist-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
- n
- 数字
- 关键字
- even偶数
- odd奇数
- 公式
- 公式是带有n的公式,n从0开始
- 第零个元素和超出的元素都会被忽略
- eg: -n+5 --> 1,2,3,4,5…….
- 前面三个选择符,都是以父类为基准来选择的,如果E和选择出现冲突,那么无法选中
- 后面的三个选择符,都是以父类指定的E标签来选择的
2.5 CSS3伪元素选择器
选择器 | 描述 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
- before和after必须要有content属性
- before和after创建一个元素,该元素属于行内元素
- 创建的元素在dom中无法看见
- 权重为1
3. 字体样式
3.1 font字体
样式 | 说明 | 属性 |
---|---|---|
font-size | 字体大小 | size |
font-family | 字体(可以多种字体) | 字体英文名、unicode字体 |
font-weight | 字体粗细 | normal、bold、100-900(整百) |
font-style | 字体风格 | normal、italic |
综合语法: font: style weight size/line-height family
- 字体大小和字体样式是不可以省略的,其它的可以省略
3.2 其它样式
属性 | 表示 | 属性值 |
---|---|---|
color | 颜色 | color |
line-height | 行高 | height |
text-align | 水平对齐 | left、right、center |
text-indent | 首行缩进(汉字一般是两个缩进) | …(1em=1个字大小) |
text-decoration | 文本装饰 | none、underline、overline、line-through |
3.3 line-height使用
3.3.1 标线
- 顶线
- 底线
- 中线
- 基线
3.3.2 行高
- 行高为基线与基线的距离
- 行高=上距离+文字高度+下距离(上距离=下距离)
- 默认行高=font-size+4px
3.3.3 单行文本的垂直居中
- 使行高=高度(设置行高可以理解为设置上距离和下距离)
- 行高>高度 --> 文字偏下
- 行高<高度 --> 文字偏上
4. 标签的显示模式
4.1 块级元素(block)
4.1.1 常见标签
- <h1>~<h6>
- <p>
- <div>
- <ul>
- <ol>
- <li>
4.1.2 特点
- 块级元素独占一行
- 高度、宽度、内外边距都可以设置,边框可以设置
- 宽度默认是父级容器100%,高度默认为内容高度
- 里面可以放行内元素和块级元素
- 注意
- p不能放块级元素
- h1~h6,dt都是文字块级标签,里面不能放其它块级元素
4.2 行内元素(inline)
4.2.1 常见标签
- <a>
- <strong>
- <b>
- <em>
- <i>
- <del>
- <s>
- <ins>
- <u>
- <span>
4.2.2 特点
- 一行可以放多个行内元素
- 高宽不能直接设置,内外边距可以设置,边框不能设置
- 默认宽度是本身内容的宽度,高度默认为内容高度
- 行内元素只能容纳文本或其他行内元素
- 注意
- 链接里面不能放链接
- 特殊情况下,链接可以放块级元素,但是链接转换成块级更安全
4.3 行内块元素(inline-block)
4.3.1 常见标签
- <img/>
- <input/>
- <td>
4.3.2 特点
- 一行可以放多个行内块元素,但是之间会有空白间隙
- 高度、宽度、内外边距都可以设置,边框可以设置
- 默认宽度是本身内容的宽度,高度默认为内容高度
4.4 模式转换
- 转换为块级元素
display:block
- 转换为行内元素
display:inline
- 转换为行内块元素
display:inline-block
5. 背景
属性 | 描述 | 属性值 |
---|---|---|
background-color | 背景颜色 | transparent、color |
background-image | 背景图片(背景图片在背景颜色之上) | url(url) |
background-repeat | 背景平铺 | repeat(默认)、no-repeat、repeat-x、repeat-y |
background-position | 背景位置 | length||length(x坐标、y坐标)、position||position(top、center、bottom、left、center、right) |
background-attachment | 背景附着(相对于滚动条来说,如果是滚动,随滚动条移动;如果是固定,不随滚动条移动) | scroll、fixed |
background:rgba(r,g,b,a) | 背景透明,不会影响内容 | 0<=a<=1(支持.4=0.4的写法) |
- background-position注意
- 必须先指定background-image
- 如果指定两个方位词,与顺序无关
- 如果指定两个数值,前一个数值为x轴,后一个为y轴
- 如果数值和方位值混用,前一个为x轴,后一个为y轴
- 如果只指定一个方位词,另一个默认居中
- 如果指定一个数值,该数值为x轴,另一个默认居中
- 简写:
background:顺序不严格要求(一般是 color url repeat attachment position)
- rgba()在IE9以下不支持
6. CSS三大特性
6.1 层叠性
- 多种CSS样式的叠加
- 就近原则
- 样式不冲突不层叠
6.2 继承性
- 子标签可以继承父标签的样式
- text-,font-,line-开头是可以继承,文字样式color可以继承
6.3 优先级
6.3.1 权重计算
-
选择器相同,执行重叠性,就近原则
-
选择器不同,要计算权重(如果权重相同,就近原则)
选择器(一个元素) 权重 * 0,0,0,0 标签选择器,伪元素 0,0,0,1 类选择器,伪类选择器,属性选择器 0,0,1,0 id选择器 0,1,0,0 行内样式 1,0,0,0 !important 无穷大
6.3.2 权重叠加
- 使用交集选择器和后代选择器等要利用权重叠加
6.3.3 权重其它问题
- 权重之间没有进位的
- 对于子代标签,对于一个CSS样式,如果没有选中子标签的,按照父标签的权重来计算;如果有选中子标签的,不管父类权重多大,看选中该标签的选择器的权重
7. 盒子模型
7.1 border
属性 | 描述 | 属性值 |
---|---|---|
border-width | 边框宽度 | medium、thin、thick、length |
border-style | 边框样式 | none、hidden、dotted、dashed、solid、double、groove、ridge、insert、outset |
border-color | 边框颜色 | color |
-
综合写法:
border
(没有顺序) -
单独指定样式
上边框 | 下边框 | 左边框 | 右边框 | |
---|---|---|---|---|
宽度 | border-top-width | border-bottom-width | border-left-width | border-right-width |
颜色 | border-top-color | border-bottom-color | border-left-color | border-right-color |
样式 | border-top-style | border-bottom-style | border-left-style | border-right-style |
综合 | border-top | border-bottom | border-left | border-right |
- 表格单元格合并边框
border-collapse:collapse
7.2 padding
属性 | 描述 | 属性值 |
---|---|---|
padding-left | 左内边距 | value |
padding-right | 右内边距 | value |
padding-top | 上内边距 | value |
padding-bottom | 下内边距 | value |
- padding可以撑开盒子
- 一般会
- 如果这个盒子没有宽度,不会撑开盒子
- 复合写法
padding
- 一个值 --> 上&右&下&左
- 两个值 --> 上&下 左&右
- 三个值 --> 上 左&右 下
- 四个值 --> 上 右 下 左
7.3 盒子大小
- 盒子实际大小=内容宽度+内边距+边框
7.4 外边距
属性 | 描述 | 属性值 |
---|---|---|
margin-left | 左外边距 | value |
margin-right | 右外边距 | value |
margin-top | 上外边距 | value |
margin-bottom | 下外边距 | value |
- 复合写法
margin
- 一个值 --> 上&右&下&左
- 两个值 --> 上&下 左&右
- 三个值 --> 上 左&右 下
- 四个值 --> 上 右 下 左
7.5 块级盒子水平居中
- text-align文字居中对齐和行内块元素居中对其
- 必须有宽度
- 左右边距设置为auto
- margin-left:auto&margin-right=auto
- margin:auto
- margin:0 auto
7.6 插入图片和背景图片
- 一般来说,插入图片的使用场景更多
- 插入图片放在盒子中改变可以使用padding
- 背景图片改变位置可以使用background-position
7.7 清除元素默认的内外边距
*{
margin:0;
padding:0;
}
- 行内元素尽量只设置左右边距,上下边距可能无法使用
7.8 垂直外边距合并
- 对于垂直外边距会发生合并,水平外边距不会合并
- 上下两个盒子,上面盒子有上边距,下面盒子有上边距,则这两个盒子之间的距离为这两个边距的最大值
- 解决方法
- 不设置上边距或下边距
float
position:relative
7.9 嵌套关系的垂直内边距合并
-
父盒子和子盒子嵌套关系,如果父盒子和子盒子都有内边距,那么内边距发生合并,合并之后为最大内边距的值
-
解决方案
- 为父盒子指定上边框
- 为父盒子指定上内边距
- 为父盒子添加overflow:hidden
7.10 盒子的稳定性
- width > padding > margin
7.11 圆角边框
border-radius:length/percent
- 正方形变为圆形 percent=50%|length=width/2
- 矩形普通变换 length=height/2
7.12 盒子阴影
box-shadow: h-shadow水平阴影(必选) v-shadow垂直阴影(必选) blur模糊距离 spread阴影尺寸 color阴影颜色 insert内/外阴影(outset、insert)
8. 设置浮动
8.1 行内块实现浮动效果的缺点
- 行内块实现的div一行排列中间会出现缝隙,而且缝隙很难去掉,而且缝隙距离不好确定
8.2 浮动作用
- 脱离普通标准流
- 移动到指定位置
- 可以让div一行显示,可以实现盒子的左右对齐,可以实现文字环绕效果
8.3 语法
- float
- 属性值:none、left、right
8.4 浮动的特性
- 浮动的元素是漂浮在普通流之上的,脱离标准流,脱标
- 浮动的盒子会把原来的位置给下面的盒子
- float会改变display属性值,使之相当于变为inline-block,但是之间没有缝隙
- 如果父级盒子装不下浮动,就会挤到下一行
8.5 浮动技巧
- 可以给浮动添加标准流的父盒子,可以最大化减少对其它标准流的影响
8.6 浮动元素和其它盒子的关系
8.6.1 与父盒子的关系
- 子盒子在父盒子的内容部分
- 不会超过边框和内边距
8.6.2 与兄弟盒子的关系
- 注意浮动与不浮动
- 上一个盒子不浮动,下一个盒子浮动=上一个盒子不浮动,下一个盒子不浮动
- 浮动只会只会影响其后面的浮动,不会影响前面的浮动
9. 清除浮动
9.1 为什么要清除浮动
- 左右排列时,父盒子是不方便给高度
- 在标准流中,子盒子是可以撑开父盒子的高度,但是浮动流时是不能撑开的
9.2 清除浮动的本质
- 为了解决子盒子浮动而导致父盒子(未设置高度)的高度为0的情况
9.3 清除浮动的方法
clear:left/right/both
- 额外标签法
- 在浮动元素的末尾加上空的标签,来清除两侧的浮动
- 如:
<div style="clear:both"></div>
- 书写简单,但是增加了额外的标签
- 父级添加overflow属性
- 给父级添加
overflow:hidden;
- 代码简单,但是,内容增多时容易造成不会自动换行导致内容被隐藏掉,无法显示出溢出的元素
- 给父级添加
- 使用after伪元素清除浮动
.clear:after{content:””;display:block;height:0;visibility:hidden;clear:both};
.clear{*zoom:1;}
专门清除IE6、7的浮动- 符合闭合浮动思想,结构语义化正确,但是,书写复杂,还要兼顾IE6,7
- 使用双伪元素清除浮动
.clear:before,.clear:after{content=“”;display:table}
.clear:after{clear:both;}
.clear{*zoom:1;}
专门清除IE6、7的浮动
10. 定位
10.1 描述
- 定位是用来布局的
- 定位=定位模式+边偏移
10.2 边偏移属性
属性 | 描述 |
---|---|
top | 顶端偏移量,定位元素相对于其父元素的上边线距离 |
bottom | 底端偏移量,定位元素相对于其父元素的下边线距离 |
left | 左侧偏移量,定位元素相对于其父元素的左边线距离 |
right | 右侧偏移量,定位元素相对于其父元素的右边线距离 |
10.4 定位模式
position
模式 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
-
static——静态定位
- 默认定位,无定位
- 静态定位按照标准流原来位置,没有边偏移
-
relative——相对定位
- 相对于其原来的位置来说的
- 原来在标准流中的区域继续占有,移动之后仍然为标准流
-
absolute——绝对定位
-
以==带有定位(!static)==的父级元素来定位
-
不保留位置,完全脱标
-
一般来说,子盒子为绝对定位,父盒子为相对定位
display:inline-block
-
-
fixed——固定定位(特殊absolute)
- 以浏览器的可是窗口来定位
- 不保留位置,完全脱标
10.5 绝对定位盒子居中
- 绝对定位,margin:auto…不能让盒子水平居中对齐
left:50%
再margin-left:-box_width/2
10.6 堆叠顺序
- 对于绝对定位和固定定位,可能会发生堆叠
z-index
- z-index的属性值开始正负整数和0,0是默认值,数值越大,盒子越上
- z-index的属性值要是相同的话,后来者居上
10.7 定位改变display属性
display:inline-block
folat:~
position:absoute
10.8 注意
- 浮动元素和绝对定位都不会触发外边距合并问题
11. 网页布局总结(标准流、浮动、定位)
11.1 标准流
- 可以让盒子上下左右排序,但是标准流和标准流是不能够发上重叠的
11.2 浮动(会影响display)
-
可以要多个多个块级元素一行显示,可以左右来对齐盒子
有定位的浮动流可以层叠
11.3 定位(可能会会影响float&display)
- 多个盒子层叠显示
12. 元素的显示和隐藏
12.1 display
- 隐藏对象
display:none
- 隐藏并不保留位置
- 显示元素
display:block
使之显示&使之成为块级
12.2 visibility
- 隐藏
visibility:hidden
- 隐藏并保留位置
- 显示
visibility:visible
12.3 overflow
- 设置当前内容超过指定宽高如何管理内容
属性 | 描述 |
---|---|
visible | 默认,不剪切内容不加滚动条 |
hidden | 超出的部分隐藏 |
scroll | 不管是否超出,都加滚动条 |
auto | 不超出不加滚动条,超出添加滚动条 |
13. 用户界面样式
13.1 鼠标样式cursor
属性值 | 描述 |
---|---|
default | 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
…… | …… |
13.2 轮廓outline
- 设置轮廓线
outline:outline-color||outline-style||outline-width
- 取消轮廓线
outline:0;
outline:none;
13.3 防止拖拽文本域resize
resize:none
14. 垂直对齐 vertical-align
- 文字居中对齐
text-align:center
vertical-align
只对行内元素和行内块元素有效
属性 | 描述 |
---|---|
baseline | 默认 |
top | 顶对齐 |
middle | 中线对齐 |
bottom | 底线对齐 |
14.1 图片、表单和文字对齐
14.2 去除图片底侧空白缝隙
- div中放图片标签,底部会有空隙,原因是默认的是基线对齐
- 解决方法是,不要使图片基线对齐
15. 溢出的文字省略号显示
15.1 white-space
white-space:normal
默认处理方式,如果超过一行会强制换行white-space:nowrap
如果超过一行不会强制换行,一行中显示所有的文本
overflow:hidden
15.2 隐藏文字 15.3 文字溢出显示方式
text-overflow:clip
对于超出部分,直接剪掉,不显示省略号text-overflow:ellipsis
对于超出部分,显示省略号
16. 精灵技术
16.1 为什么使用精灵技术
- 一个网页中会用到许多图片,不使用精灵技术,一张图片要请求一次服务器。使用精灵技术,将多长小图放到一张图中,可以有效减少服务器的处理压力,提高性能
16.2 使用原理
- 对盒子加上精灵图的背景图片
- 再将要使用的精灵图的一部分移动到盒子的位置,让该部分在盒子中显示(类似于PS图层的处理)
- 主要利用background-position来调整图片
16.3 精灵图的制作
- 制作精灵图,就是将小图放到一张图中
- 一般背景图片不是用精灵图
17. 浮动门
- 左侧和右侧两个门是利用不同盒子来做的
- 右侧的盒子要右对齐
- 两个盒子要实现自由拉伸的效果,要用到inline-block
18. margin负值
- 负边距+定位=水平垂直居中
- 压住盒子的边框(浮动是紧贴在一起的,所以可以实现)
- 突出效果:由于压住盒子的边框时,border改变时会出现一条变压住,所以可以使用定位,定位的盒子在最上层
- 突出效果:如果都有浮动,会出现被压住线的情况,这时候就要使用
z-index
19. 三角形
- 用边框可以模拟三角
- 宽度高度都为0
- 四个边框都要指定
- 为了照顾低版本浏览器,要使用
font-size:0;
line-height:0;
20. 2D转换
20.1 移动
transform:translate(x,y)
x,y方向移动transform:translateX(x)
x方向移动transform:translateY(y)
y方向移动- 不会影响其它盒子的位置(浮动和定位会影响其它盒子位置)
- 相对于原来位置移动
- x,y=value|percent(参照与盒子自身的宽高)
- 使盒子垂直居中这样可以不用计算,更准确,可以响应式布局
- 对于行内元素是无效的
20.2 旋转
transform:rotate(deg)
顺时针旋转- 设置转换的中心点
transfrom-origin:x y
(x,y=direction|value)(默认50% 50%)
20.3 缩放
- transform:scale(x,y)
- x,y=数字
- 一个参数,实现等比例缩放
- 修改宽高会影响其它的盒子
- 设置缩放的中心点
transfrom-origin:x y
(x,y=direction|value)(默认50% 50%)
20.4 综合写法
- transform:translate(…) rotate(…) origin(…)
- 执行是有顺序的
- 同时位移和其他属性时,建议将位移放在前面
21. CSS3动画
21.1 使用流程
- 定义动画
- 调用动画
21.2 定义动画
@keyframes name{
0%{
}
.
.
.
100%{
}
}
/*from=0%,to=100%*/
21.3 调用动画
animation-name:name;
animation-duration: ;
...
21.4 动画属性
属性 | 描述 | 属性值 |
---|---|---|
@keyframes | 规定动画 | - |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性 | - |
animation-name | 规定 @keyframes 动画的名称(必写*) | name |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0(必写*) | time |
animation-timing-function | 规定动画的速度曲线。默认是 “ease” | linear(动画从头到尾的速度是相同的)|ease(默认。动画以低速开始,然后加快,在结束前变慢)|ease-in(动画以低速开始)|ease-out(动画以低速结束)|ease-in-out(动画以低速开始和结束)|cubic-bezier(n,n,n,n)(在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值) |
animation-delay | 规定动画何时开始。默认是 0 | time |
animation-iteration-count | 规定动画被播放的次数。默认是 1 | count(默认为1)|infinite(指定动画应该播放无限次(永远)) |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal” | normal(默认值。动画按正常播放)|reverse(动画反向播放)|alternate(动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放)|alternate-reverse(动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放)|initial(设置该属性为它的默认值)|inherit(从父元素继承该属性) |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running” | paused(指定暂停动画)|running(指定正在运行的动画) |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式 | none(默认值。动画在动画执行之前和之后不会应用任何样式到目标元素)|forwards(在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值)|backwards(动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时))|both(动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性)|initial(设置该属性为它的默认值)|inherit(从父元素继承该属性) |
- 简写: animation:名称 持续时间 运动曲线 开始时间 播放次数 是否反方向 动画起始或结束的状态
22. CSS3 3D转换
22.1 3D移动
transform:translate3d(x,y,z)
x,y,z方向移动transform:translateX(x)
x方向移动transform:translateY(y)
y方向移动transform:translateZ(z)
z方向移动(一般是value)- x,y,z是不能省略的
22.2 3D透视
- 透视写在被观察元素的父盒子上
perspective:value
- 透视的value是眼睛到屏幕的距离,z是物体距离屏幕的距离
22.3 3D旋转
transform:rotate3d(x,y,z,deg)
自定义轴旋转(x,y,z以矢量的计算法则)transform:rotateX(deg)
transform:rotateY(deg)
transform:rotateZ(deg)
- 左手法则:大拇指超正方向,四指弯曲的方向为正旋转方向
22.4 3D呈现
- 控制子元素是否开启三维立体环境
- 不开启保持三维立体环境
transform-style:flat
(不开启的话,其它的兄弟级子盒子不保持3D立体空间) - 开启保持三维立体环境
transform-style:preserve-3d
23. 浏览器的私有前缀
- 为了兼容浏览器
-moz-
firefox-ms-
IE-webkit-
safari&chrome-o-
opera
案例&案例中的知识点学习和总结
1. 简单导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单导航栏</title>
<style>
div{
background-color: aliceblue;
height: 50px;
width: 600px;
margin: auto;
text-align: center;
}
a{
text-decoration: none;
background-color: #DEB887;
margin: auto;
display: inline-block;
height: 50px;
width: 100px;
text-align: center;
color: white;
line-height: 50px;
}
a:hover{
background-color: #FBBC05;
color: #000000;
}
</style>
</head>
<body>
<div>
<a href="#">新闻</a>
<a href="#">体育</a>
<a href="#">娱乐</a>
<a href="#">教育</a>
<a href="#">美食</a>
</div>
</body>
</html>
2. 小盒子左侧对齐盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小盒子左侧的对其盒子</title>
<style>
div{
width: 100px;
height: 50px;
background-color: wheat;
margin: auto;
background-image: url(./点.png);
background-size: 20IIpx;
background-repeat: no-repeat;
background-position: left center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3. 新浪导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新浪导航栏</title>
<style>
div{
border-top: #DEB887 solid 3px;
border-bottom: #EA4335 solid 3px;
display: inline-block;
}
a{
display: inline-block;
height: 50px;
padding: 0 20px;
text-align: center;
line-height: 50px;
text-decoration: none;
font-size: 15px;
}
a:hover{
background-color: #ccc;
color: white;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
4. 新闻列表
- 取消列表样式
list-style: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻列表</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 298px;
height: 198px;
border: 1px solid #ccc;
margin: 100px auto;
background-image: url(line.jpg);
padding: 15px;
}
.big h2{
font-size: 18px;
padding: 5px 0;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.big ul li{
list-style: none;
height: 30px;
border-bottom: 1px dashed #ccc;
background-image: url(arr.jpg);
background-repeat: no-repeat;
background-position: center left;
}
.big ul li a{
color: #333;
font-size: 15px;
text-decoration: none;
line-height: 30px;
/* margin-left: 20px; */
/* 没有宽度padding不会撑开盒子 */
padding-left: 20px;
}
.big ul li:hover{
background-color: #ccc;
background-image: none;
}
</style>
</head>
<body>
<div class="big">
<h2 class="title">最新文章/New Articles</h2>
<ul>
<li><a href="#">前端工程师教程</a></li>
<li><a href="#">Python教程</a></li>
<li><a href="#">Java教程</a></li>
<li><a href="#">PHP教程</a></li>
<li><a href="#">C/C++教程</a></li>
</ul>
</div>
</body>
</html>
5. 小米案例(仿小米官网20-7-16内容,右侧盒子为图片,而且未设置动画效果)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米案例</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 1226px;
height: 615px;
background-color: #00FFFF;
margin: auto;
}
.left{
width: 234px;
height: 615px;
background-color: #0000FF;
float: left;
background-image: url(left.webp);
background-size: 234px 615px;
}
.right{
width: 992px;
height: 615px;
background-color: floralwhite;
float: left;
}
.right li{
width: 234px;
height: 293.5px;
list-style: none;
margin-left: 14px;
margin-bottom: 14px;
float: left;
background-repeat: no-repeat;
background-image: url(1.png);
background-size: 234px 293.5px;
}
</style>
</head>
<body>
<div class="big">
<div class="left">
</div>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
6. 上面有图片的导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上面有图片的导航栏</title>
<style>
*{
margin: 0;
padding: 0;
}
.banner{
margin: auto;
width: 612.8px;
height: 60px;
}
.banner img{
width: 612.8px;
height: 60px;
}
.nav{
margin: auto;
width: 612.8px;
height: 60px;
background-color: #ccc;
}
.nav li{
list-style: none;
float: left;
height: 60px;
text-align: center;
line-height: 60px;
width: 122.56px;
}
.nav li a:hover{
background-image: url(end.jpg);
color: ghostwhite;
}
.nav li a{
display: inline-block;
text-decoration: none;
color: orange;
background-image: url(begin.jpg);
height: 60px;
width: 122.56px;
}
</style>
</head>
<body>
<div class="banner">
<img src="banner.webp" />
</div>
<ul class="nav">
<li><a href="#">娱乐</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">学习</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">宠物</a></li>
</ul>
</body>
</html>
7. 两侧的广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两侧的广告</title>
<style>
.left{
position: fixed;
background-color: #008000;
top: 50px;
width: 125px;
height: 571px;
background-size: 250px 571px;
background-image: url(ea357761c1a951a3bc1c417012cabb47.jpg);
}
.right{
position: fixed;
background-color: #008000;
top: 50px;
right: 0;
width: 125px;
height: 571px;
background-size: 250px 571px;
background-image: url(ea357761c1a951a3bc1c417012cabb47.jpg);
background-position: right;
}
.content{
margin: auto;
height: 2000px;
width: 100px;
background-color: #FBBC05;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>
8. 哈根达斯案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哈根达斯案例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: auto;
width: 310px;
height: 190px;
}
.box .adv{
position: absolute;
}
.box .top{
position: relative;
}
</style>
</head>
<body>
<div class="box">
<img class="adv" src="adv.jpg"/>
<img class="top" src="top_tu.gif">
</div>
</body>
</html>
9. 土豆网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>土豆网</title>
<style>
.box{
width: 310px;
height: 190px;
margin: 100px auto;
}
img{
position: absolute;
}
.black{
width: 310px;
height: 190px;
position: relative;
}
.black:hover{
background-color: rgba(0,0,0,.3);
background: url(arr.png) no-repeat center center;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<img src="../哈根达斯案例/adv.jpg" />
<div class="black"></div>
</a>
</div>
</body>
</html>
10. 微信导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信导航栏</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(wx.jpg) repeat-x;
}
.nav ul{
margin-top: 20px;
}
.nav ul li{
float: left;
list-style: none;
margin-left: 13px;
/* display: inline-block; */
}
.nav ul li a{
display: inline-block;
height: 33px;
padding-left: 15px;
text-decoration: none;
background: url(to.png) no-repeat;
}
.nav ul li a span{
display: inline-block;
padding-right: 15px;
height: 33px;
line-height: 33px;
color: white;
background: url(to.png) no-repeat right center;
}
.nav ul li a:hover,
.nav ul li a span:hover{
background-image: url(ao.png);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
<li>
<a href="#">
<span>公众平台</span>
</a>
</li>
<li>
<a href="#">
<span>开放平台</span>
</a>
</li>
<li>
<a href="#">
<span>微信支付</span>
</a>
</li>
<li>
<a href="#">
<span>微信广告</span>
</a>
</li>
<li>
<a href="#">
<span>企业微信</span>
</a>
</li>
<li>
<a href="#">
<span>表情包开放平台</span>
</a>
</li>
<li>
<a href="#">
<span>微信网页版</span>
</a>
</li>
</ul>
</div>
</body>
</html>
11. 京东三角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东三角</title>
<style>
*{
margin: 0;
padding: 0;
}
.frist{
width: 0;
height: 0;
border-style: solid;
border-width: 40px;
border-color: #0000FF #A52A2A #FBBC05 aqua;
}
.second{
width: 0;
height: 0;
border-style: solid;
border-width: 40px;
border-color: transparent #A52A2A transparent transparent;
}
</style>
</head>
<body>
<div class="frist"></div>
<div class="second"></div>
</body>
</html>
12. 旋转生成三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转生成三角形</title>
<style>
div{
width: 200px;
height: 50px;
border: #ccc solid 1.5px;
position: relative;
}
div::after{
content: "";
position: absolute;
width: 10px;
height: 10px;
border-color: #ccc;
border-width: 0 2px 2px 0;
border-style: solid;
right: 20px;
top: 15px;
transform: rotate(45deg);
transition: all 0.2s;
}
div:hover::after{
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13. 旋转显示其它内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转显示其它内容</title>
<style>
div{
margin: auto;
margin-top: 200px;
width: 100px;
height: 100px;
background-color: #F5DEB3;
overflow: hidden;
}
div::before{
content: "";
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
position: relative;
transform-origin: left bottom;
transform: rotate(90deg);
transition: all 1s;
}
div:hover::before{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
14. 分页按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页按钮</title>
<style type="text/css">
li{
list-style: none;
float: left;
margin-right: 15px;
border: #CCCCCC solid 1px;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
li:hover{
transform: scale(1.2);
color: #FBBC05;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
15. 热点图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热点图</title>
</head>
<style type="text/css">
body{
background-color: #333;
}
.map{
width: 747px;
height: 614px;
background: url(map.png) no-repeat;
margin: 0 auto;
position: relative;
}
.city{
position: absolute;
top: 227px;
right: 193px;
}
.dot{
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"]{
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%,-50%);
animation: pulse linear 1.2s infinite;
}
.pulse2{
animation-delay: 0.4s !important;
}
.pulse2{
animation-delay: 0.8s !important;
}
@keyframes pulse{
from{
}
60%{
width: 40px;
height: 40px;
opacity: 1;
}
to{
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
<body>
<div class="map">
<div class="city">
<div class="dot"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
16. 奔跑的熊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奔跑的熊</title>
<style type="text/css">
body{
background-color: #ccc;
}
div{
position: absolute;
width: 200px;
height: 100px;
background: url(bear.png);
animation: bear 0.5s steps(8) infinite,move 3s forwards;
}
@keyframes bear{
from{
background-position: 0 0;
}
to{
background-position: -1600px 0;
}
}
@keyframes move{
from{
left: 0;
}
to{
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
17. 两面翻转的盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两面翻转的盒子</title>
<style type="text/css">
body{
perspective: 2000px;
}
.box{
position: relative;
height: 300px;
width: 300px;
margin: 200px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.front,.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
color: white;
line-height: 300px;
font-size: 50px;
}
.front{
background-color: #FBBC05;
}
.back{
transform: rotateY(180deg);
background-color: darkgray;
}
.box:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">Hello</div>
<div class="back">This is me</div>
</div>
</body>
</html>
18. 3D导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D导航栏</title>
<style type="text/css">
ul li{
width: 120px;
height: 40px;
list-style: none;
perspective: 500px;
}
.box{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
.box:hover{
transform: rotateX(90deg);
}
.front,.bottom{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
color: ghostwhite;
}
.front{
background-color: #F5DEB3;
z-index: 1;
transform: translateZ(20px);
}
.bottom{
background-color: darkgoldenrod;
transform: translateY(20px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">翻翻看</div>
<div class="bottom">首页</div>
</div>
</li>
</ul>
</body>
</html>
19. 旋转木马
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转木马</title>
<style type="text/css">
body{
perspective: 5000px;
}
section{
width: 432px;
height: 432px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 7s linear infinite;
background-image: url(pic.jpg);
}
section:hover{
animation-play-state: paused;
}
section div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(pika.jpg) no-repeat;
}
section div:nth-child(1){
transform: translateZ(600px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(600px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(600px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(600px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(600px);
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(600px);
}
@keyframes rotate{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
100%;
text-align: center;
line-height: 40px;
color: ghostwhite;
}
.front{
background-color: #F5DEB3;
z-index: 1;
transform: translateZ(20px);
}
.bottom{
background-color: darkgoldenrod;
transform: translateY(20px) rotateX(-90deg);
}
翻翻看
首页
```
19. 旋转木马
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转木马</title>
<style type="text/css">
body{
perspective: 5000px;
}
section{
width: 432px;
height: 432px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 7s linear infinite;
background-image: url(pic.jpg);
}
section:hover{
animation-play-state: paused;
}
section div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(pika.jpg) no-repeat;
}
section div:nth-child(1){
transform: translateZ(600px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(600px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(600px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(600px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(600px);
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(600px);
}
@keyframes rotate{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>