目录
速度曲线细节 animation-timing-function
语义化标签
以前布局，我们基本用div来做，div对于搜索引擎来说，是没有语义的。
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
新增：
<header></header> 头部标签
<nav></nav> 导航标签
<article></article> 内容标签
<section></section> 块级标签
<aside></aside> 侧边栏标签
<footer></footer> 尾部标签
注意：
1.这种语义化标准主要针对搜索引擎的
2.这些新标签页面中可以使用多次的
3.在IE9中，需要把这些元素转换为块级元素
4.其实，我们移动端更喜欢使用这些标签
新增多媒体标签
音频：
<audio src=""></audio>
语法：
<audio src="文件地址" controls="controls"></audio>
常见属性
视频：
<video src=""></video>
语法：
<video src="文件地址" controls="controls"></vidio>
<video controls="controls" width="300">
<source src="move.ogg" tupe="video/ogg">
<source src="move.mp4" tupe="video/mp4">
您的浏览器暂不支持video标签,播放视频
</video>常见属性：
音频视频总结
1.音频标签和视频标签使用基本一致
2.浏览器支持情况不同
3.谷歌浏览器把音频和视频自动播放禁止了
4.我们可以给视频标签添加muted 属性可以自定播放视频，音频不可以视频标签是重点，我们经常5.设置自动播放，不使用controls控件，循环和设置大小属性
新增input表单、表单属性
表单标签
例如:
<form action="">
邮箱：<input type="email">
<input type="submit" value="提交">
</form> 
表单属性
CSS3 属性选择器
注意：类选择器、属性选择器、伪类选择器，权重为10
CSS3结构伪类选择器
nth-child(n)
1.n 可以是数字、关键字 和 公式
2.n 如果是数字，就是选择第几个
3.常见的关键词有 even偶数 odd奇数
4.常见的公式如下(如果n是公式，则从0开始计算)
5.但是第0个元素或者超出了元素的个数会被忽略)
结构伪类选择器总结
1.结构伪类选择器就是选择第n个元素
2.nth-child 是从所有子级开始算的，可能不是同一种类型
3.nth-of-type 是指定同一种类型的子级，比如 ulli:nth-of-type(2)是选择第2个li
4.关于nthchild(n)我们要知道n是从0开始计算的，要记住常用的公式
5.如果是无序列表，我们肯定用nth-child 更多
CSS3伪元素选择器
注意
1.before 和 after 必须有 content 属性
2.before 在内容的前面，after 在内容的后面
3.before 和 after 创建一个元素，但是属于行内元素
4.因为在dom 里面看不见刚才创建的元素，所以我们称为伪元素
5.伪元素和标签选择器一样，权重为1
CSS3 2D转换
二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
2D转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
语法：
transform:translate(x,y);
transform:translateX(n); 分开写
transform:transelateY(n);
重点：
1.定义2D转换中的移动，沿着X和Y轴移动元素
2.translate最大的优点:不会影响到其他元素的位置
3.translate中的百分比单位是相对于自身元素的translate:(50%50%)
4.对行内标签没有效果
2D准换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法
transform:rotate(度数）
重点
1.rotate里面跟度数，单位是 deg 比如 rotate(45deg)
2.角度为正时，顺时针，负时，为逆时针
3.默认旋转的中心点是元素的中心点
2D转换中心点 transform-origin
设置元素转换的中心点
语法
transform-origin: X Y;
重点
1.注意后面的参数x和y用空格隔开
2.xy默认转换的中心点是元素的中心点(50% 50%)
3.可以给x y设置像素或者 方位名词 (top bottom left right center)
2D转换之缩放 scale
可以放大和缩小
语法
transform: scale(X,Y)
注意
1.注意其中的x和y用逗号分隔
2.transform:scale(1,1):宽和高都放大一倍，相对于没有放大
3.transform:scale(2,2) : 宽和高都放大了2倍
4.transform:scale(2) :只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
5.transform:scale(0.5,0.5):缩小
6.sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
<!-- 鼠标选中放大效果 -->
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
/* 取消li前面的小圆点 */
list-style: none;
/* 圆角 */
border-radius: 50%;
/* 鼠标经过变成小手 */
cursor: pointer;
/* 过渡动画 */
transition: all 0.4s;
}
li :hover {
transform: scale(1.2);
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
2D转换综合写法
注意
1.同时使用多个转换，其格式为transform:translate() rotate () scale()等
2.其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
2D转换总结
1.转换transform 我们简单理解就是变形有2D和3D之分
2.我们暂且学了三个分别是位移、旋转和缩放
3.2D 移动 translate(x,y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
4.可以分开写比如 translateX(x)和translateY(y)
5.2D旋转rotate(度数) 可以实现旋转元素 度数的单位是deg
6.2D缩放 sacle(x,y) 里面参数是数字不跟单位可以是小数 最大的优势不影响其他盒子
7.设置转换中心点transform-origin:xy; 参数可以百分比、像素或者是方位名词
8.当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
CSS3动画
动画的基本使用
动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
制作动画分为两步:
1.先定义动画
2.再使用(调用)动画
1.用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width:100px;}
100%{
width:200px;}
}
2.元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;/* 调用动画 */
animation-name:动画名称;/* 持续时间 *
animation-duration: 持续时间；}
动画序列
1.0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
2.在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
3.动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
4.请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和 100%.
动画常用属性
动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
比如
animation: myfirst 5s linear 2s infinite alternate;注意：前两个属性 name durtion 一定要写
1.简写属性里面不包含animation-play-state
2.暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
3.想要动画走回来，而不是直接跳回来:animation-direction : alternate
4.盒子动画结束后，停在结束位置: animation-fill-mode : forwards
速度曲线细节 animation-timing-function
规定动画的速度曲线，默认是“ease”
steps() 一步一步走的 ，括号里写几，就是走几步
案例
1.大数据热点图案例
<style>
body {
background-color: #dedede;
}
.map {
position: relative;
width: 1000px;
height: 750px;
background: url(map.png) no-repeat;
}
.city {
position: absolute;
top: 304px;
left: 668px;
}
.tb {
top: 609px;
left: 764px;
}
.fj {
top: 594px;
left: 722px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
/* 属性选择器 选择city里面的div 以pulse开头的元素 ^表示开头 */
.city div[class^="pulse"] {
position: absolute;
/* 不管父盒子多大，子盒子在最中央显示 */
top: 50%;
left: 50%;
/* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散*/
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
/* 阴影 */
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
/* 调用动画 linear 匀速 infinite循环播放*/
animation: pulse 0.6s linear infinite;
}
/* 注意权重 */
.city div.pulse2 {
/* 表示动画何时开始，这里是0.4秒开始，相当于pulse2延迟0.4s开始 */
animation-delay: 0.4s;
}
.city div.pulse3 {
/* 表示动画何时开始，这里是0.8秒开始，相当于pulse3延迟0.8s开始 */
animation-delay: 0.8s;
}
@keyframes pulse {
0% {
}
70% {
width: 40px;
height: 40px;
/* 透明度不变 为1 */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
em {
position: absolute;
color: #009dfd;
top: 277px;
left: 683px;
}
</style>
<body>
<div class="map">
<em>北京</em>
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city fj">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
2.奔跑的小熊
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(bear.png) no-repeat;
/* 熊大走八步， infinite无限循环 forwards停留在最后一刻 */
animation: bear 1s steps(8) infinite,move 3s forwards;
/* 我们元素可以添加多个动画，用逗号分隔 */
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
/* x轴向前走1600px */
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* 第一种写法：再往后走100像素，才是在画面的中间（熊大是200px宽） */
/* margin-left: -100px; */
/* 第二种写法：走自身的50% 完美写法*/
transfrom: translateX(-50%)
}
}
</style>
<body>
<div></div>
</body>
重点：
animation: bear 1s steps(8) infinite,move 3s forwards;
/* 我们元素可以添加多个动画，用逗号分隔 */
100% {
left: 50%;
/* 第一种写法：再往后走100像素，才是在画面的中间（熊大是200px宽） */
/* margin-left: -100px; */
/* 第二种写法：走自身的50% 完美写法*/
transfrom: translateX(-50%)
}
CSS33D转换
特点
- 进大远小
- 物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。
三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
1. x轴:水平向右 注意: x 右边是正值，左边是负值
2. y轴:垂直向下 注意: y下面是正值，上面是负值
3. z轴:垂直屏幕 注意: 往外面是正值，往里面是负值
3D转换
3D移动 translate3d
3D移动是在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
translform: translateX(100px); 仅仅实在X轴上移动
translform: translateY(100px); 仅仅实在Y轴上移动
translform: translateZ(100px); 仅仅实在Z轴上移动
translform: translate3d(x,y,z); 其中x、y、z分别指要移动的轴的方向和距离
1.既有x轴又有y轴的写法
translform: translateX(100px) , translateY(100px);
2.既有x轴又有y轴和z轴的分开写法
translform: translateX(100px) , translateY(100px) , translateZ(100px);
3.xyz是不能省略的，如果没有就写0
translform: translate3d(0,100px,100px);
3D转换
透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
1.如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
2.模拟人类的视觉位置，可认为安排一只眼睛去看
3.透视我们也称为视距:视距就是人的眼睛到屏幕的距离
4.距离视觉点越近的在电脑平面成像越大，越远成像越小
5.透视的单位是像素
透视写在被观察元素的父盒子上面的
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离
z:就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大
translateZ
translform:translateZ(100px);仅仅是在Z轴上移动有了透视，就能看到translatez引起的变化了
3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法：
transfrom：rotateX(45deg); 沿着X轴正方向旋转45度
transfrom：rotateY(45deg); 沿着Y轴正方向旋转45度
transfrom：rotateZ(45deg); 沿着Z轴正方向旋转45度
transfrom：rotate3d(x,y,z,deg); 沿着自定义轴旋转deg为角度
案例
<style>
body {
/* 3d动画，给父盒子添加透视 */
perspective: 500px;
}
img {
/* 转换为块级元素 */
display: block;
margin: 100px auto;
/* 动画过渡 全部 时间为1秒 */
transition: all 1s;
}
img:hover {
/* 沿着x轴旋转180度 */
/* transform: rotateX(180deg); */
/* 沿着y轴旋转180度 */
/* transform: rotateY(180deg); */
/* 沿着z轴旋转180度 */
transform: rotateZ(180deg);
}
</style>
<body>
<img src="pig,jpg" alt="">
</body>transform：rotate3d(x,y,z,deg); 沿着自定义轴旋转deg为角度
xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴旋转，最后一个表示旋转的角度
/* 合并写法 沿着x轴旋转45deg*/
transform: scale3d(1,0,0,45deg);
3D呈现transform-style
1.控制子元素是否开启三维立体环境。
2.transform-style:flat子元素不开启3d立体空间 默认的
3.transform-style: preserve-3d;子元素开启立体空间
4.代码写给父级，但是影响的是子盒子
5.这个属性很重要，后面必用
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让box的子元素保持3d立体空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(-60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
}
/* 选中box里面的最后一个div盒子 */
.box div:last-child {
background-color: blue;
transform: rotateX(60deg);
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
案例
1.两面翻转的盒子
<style>
body {
perspective: 600px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .6s;
/* 让背面的紫色盒子保留立体空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 圆角 */
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
/* 加权重 */
z-index: 1;
/* 要给第一个盒子或者是最先显示的盒子加上2D 沿着Z轴移动几个像素，不然两个子盒子会重叠在一起 */
transform: translateZ(1px);
}
.back {
background-color: purple;
/* 第二个子盒子先沿着y轴旋转180度 这样才像背靠背一样的效果 */
transform: rotateY(180deg);
}
</style>
<body>
<div class="box">
<div class="front">黑马程序员</div>
<div class="back">我在这里等你</div>
</div>
</body>
2.3D导航栏
重点：
/* 沿着Y轴向下移动30px 注意：如果有移动或者其他样式，必须先写移动 */
transform: translateY(30px);
/* 沿着X轴旋转90度 这个X轴一定是负值 */
transform: rotateX(-90deg);
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
width: 200px;
height: 60px;
/* 去掉小圆点 */
list-style: none;
/* 加透视 */
perspective: 400px;
/* 加浮动 */
float: left;
margin: 0 20px;
}
.box {
position: relative;
width: 100%;
height: 100%;
/* 父盒子保留3D空间 */
transform-style: preserve-3d;
/* 加动画过渡 */
transition: all .4s;
font-size: 20px;
color: #fff;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 60px;
}
.front {
background-color: pink;
/* 加权重 */
z-index: 1;
/* 沿着z轴向前移动30px */
transform: translateZ(30px);
}
.bottom {
background-color: purple;
/* 沿着Y轴向下移动30px 注意：如果有移动或者其他样式，必须先写移动 */
transform: translateY(30px);
/* 沿着X轴旋转90度 这个X轴一定是负值 */
transform: rotateX(-90deg);
}
</style>
<body>
<ul>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
</ul>
</body>
3.旋转木马 H5C3综合案例
重点：
针对不同的动画，元素，确定是先移动，还是先旋转，本案例是先旋转好了，再移动
<style>
body {
perspective: 800px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* 添加动画效果 linear匀速 infinite无限循环 */
animation: rotate 10s linear infinite;
}
section:hover {
/* 鼠标放上去暂停 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 200px;
}
section div:nth-child(1) {
transform: translateZ(300px);
background-color: gold;
}
section div:nth-child(2) {
/* 沿着Y轴旋转60度 沿着Z轴移动300像素 先旋转好了 再移动 */
transform: rotateY(60deg) translateZ(300px);
background-color: rgb(231, 101, 26);
}
section div:nth-child(3) {
/* 沿着Y轴旋转120度 沿着Z轴移动300像素 先旋转好了 再移动 */
transform: rotateY(120deg) translateZ(300px);
background-color: rgb(17, 247, 25);
}
section div:nth-child(4) {
/* 沿着Y轴旋转180度 沿着Z轴移动300像素 先旋转好了 再移动 */
transform: rotateY(180deg) translateZ(300px);
background-color: rgb(0, 255, 200);
}
section div:nth-child(5) {
/* 沿着Y轴旋转180度 沿着Z轴移动300像素 先旋转好了 再移动 */
transform: rotateY(240deg) translateZ(300px);
background-color: rgb(0, 119, 255);
}
section div:nth-child(6) {
/* 沿着Y轴旋转180度 沿着Z轴移动300像素 先旋转好了 再移动 */
transform: rotateY(300deg) translateZ(300px);
background-color: rgb(255, 0, 247);
}
section div:nth-child(7) {
background-color: rgb(226, 43, 43);
}
</style>
<body>
<section>
<div>照片1</div>
<div>照片2</div>
<div>照片3</div>
<div>照片4</div>
<div>照片5</div>
<div>照片6</div>
<div>照片7</div>
</section>
</body>
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1.私有前缀
-moz-:代表firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safari、chrome私有属性
-o-:代表Opera 私有属性
2.提倡写法
先把三个浏览器的私有前缀写完，再写一个没有加前缀的
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
