HTML5新增特性:
新的（标签、表单、表单属性）
div对于搜索引擎来说是没有语义的。但是HTML5新增的是有的。
在IE9中，需要把这些元素转化为块级元素。
新增的标签可以使用多次。
移动端更喜欢用这些标签，因为没有兼容性的问题。
新增语义化标签：
header：头部标签
nav：导航标签
article：内容标签
section：定义文档某个区域
aside：侧边栏标签
footer：尾部标签
视频video常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels | 设置播放宽度 |
| height | pixels（像素） | 设置播放高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto (预加载视频) none（不加载视频） | 规定是否预加载视频（如果有了autoplay，就忽略该属性） |
| src | url | 视频URL地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
音频audio元素支持的三中音频格式：
语法格式：
<audio src=|"文件地址" controls="controls"></audio>属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | 如果出现该属性，则音频在就绪后马上播放 | |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 | |
| loop | 如果显示该属性，则当每次音频结束时重新播放 | |
| src | 要播放的音频URL |
多媒体标签总结：
音频标签和视频标签使用方式一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放功能禁止了
我们可以给视频标签muted属性来静音静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签时重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性。
新增的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 | 当用户字段开始键入时，浏览器基于之前键入的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=“on”，关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交。 |
| multiple | multiple | 可以多选文件提交 |
可以通过以下方式修改placeholder里面的字体颜色：
input::placeholder {color：pink；}
CSS3新增特性:
属性选择器
可以根据元素特定属性的来选择元素，这样就可以不用借助于类或者id选择器。
比如：必须是input但是同时具有value这个属性，选择这个元素 []。
input[value]{color:pink;}
<body>
<input type="text" value="请输入用户名">
<input type="text">
</body>
| 选择符 | 简介 |
|---|---|
| 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元素 |
**注意：**类选择器、属性选择器、伪类选择器你、权重为10。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| 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 | 指定类型E的第n个 |
-
nth-child(n)选择某个父元素的一个或多个特定的子元素
(会把所有的孩子排上序号,执行的时候先看 :nth-child(1)之后回去看前面的的标签是否对应) -
nth-of-type会把指定的盒子排列序号。
-
n可以是数字，关键字和公式。
-
n如果是数字，就是选择第n个子元素，里面数字从1开始…
-
n可以是关键字：even偶数，odd奇数
-
n可以是公式：常见的公式如下（如果是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第五个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第五个）… |
nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后再看看是否和E匹配。
nth-of-type对父元素里面指定元素进行排列选择。先去匹配E，然后再根据E找到第n个孩子。
伪元素选择器
伪元素选择器可以帮助我们利用CSS 创建新标签元素，而不需要HTML表签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法:
element::before{} - before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样权重为1
伪元素选择器使用场景1：伪元素字体图标
<style>
@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?8zxptb");
src: url("fonts/icomoon.eot?8zxptb#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?8zxptb") format("truetype"),
url("fonts/icomoon.woff?8zxptb") format("woff"),
url("fonts/icomoon.svg?8zxptb#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
padding: 0;
margin: 0;
}
div {
position: relative;
width: 200px;
height: 20px;
background-color: pink;
border: 1px solid red;
margin: auto;
}
div::after {
position: absolute;
font-family: "icomoon";
content: "";
padding: 2px 0;
right: 8px;
}
</style>
</head>
<body>
<div></div>
</body>
**伪元素使用场景2：**充当遮罩层
<style>
* {
margin: 0;
padding: 0;
}
.tudou {
position: relative;
width: 300px;
height: 300px;
background-color: aqua;
margin: 20px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: "";
display: none;//隐藏遮罩层
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
/*当鼠标经过土豆这个盒子，就让里面before遮罩层显示出来*/
.tudou:hover::before {
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/nvnv.jpg" alt="" />
</div>
</body>
伪元素选择器使用场景3：伪元素清除浮动
1、额外标签法，2、为父级添加overflow属性，3、父级添加after伪元素，4、父级添加双伪元素
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix:brfore,.clearfix::after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
2、盒子模型：
CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box、
分为两种情况：
1、box-sizing：content-box 盒子大小 ：(width+padding+border) 默认的
2、box-sizing：border-box 盒子大小：width
（盒子大小不被撑大的前提padding和border不会超过width宽度）
CSS3 弹性盒子(flex box)
弹性盒子( flex box ) 是 CSS3 的一种新的布局模式
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
- 弹性容器通过设置 display 属性的值为
flex或inline-flex将其定义为弹性容器 - 弹性容器内包含了一个或多个弹性子元素
- 弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行
- 弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局
flex-direction：
CSS flex-direction 顺序指定了弹性子元素在父容器中的位置
语法：
flex-direction: row | row-reverse | column | column-reverse
值说明：flex-direction 的值有
| 值 | 说明 |
|---|---|
| row | 横向从左到右排列（左对齐），默认的排列方式 |
| row-reverse | 反转横向排列（右对齐，从后往前排，最后一项排在最前面） |
| column | 纵向排列 |
| column-reverse | 反转纵向排列，从后往前排，最后一项排在最上面 |
justify-content 属性
可以在弹性容器上设置内容对齐方式 ( justify-content ) ，让把弹性项沿着弹性容器的主轴线（main axis）对齐
语法
justify-content: flex-start | flex-end | center | space-between | space-around
值说明
| 值 | 描述 |
|---|---|
| flex-start | 弹性项目向行头紧挨着填充 这个是默认值 第一个弹性项的main-start外边距边线被放置在该行的 main-start 边线，而后续弹性项依次平齐摆放。 |
| flex-end | 弹性项目向行尾紧挨着填充 第一个弹性项的 main-end 外边距边线被放置在该行的 main-end 边线，而后续弹性项依次平齐摆放 |
| center | 弹性项目居中紧挨着填充 如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出 |
| space-between | 弹性项目平均分布在该行上 如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start 否则，第1 个弹性项的外边距和行的main-start边线对齐，而最后 1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等 |
| space-around | 弹性项目平均分布在该行上，两边留有一半的间隔空间 如果剩余空间为负或者只有一个弹性项，则该值等同于 center 否则，弹性项目沿该行分布，且彼此间隔相等（比如是 20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px） |
align-items 属性
CSS align-items 属性用于设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
语法
align-items: flex-start | flex-end | center | baseline | stretch
值说明
| 值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素的纵轴起始位置的边界紧靠住该行的侧轴起始边界 |
| flex-end | 弹性盒子元素的纵轴起始位置的边界紧靠住该行的侧轴结束边界 |
| center | 弹性盒子元素在该行的纵轴上居中放置 如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效 其它情况下，该值将参与基线对齐 |
| stretch | 如果指定侧轴大小的属性值为 ‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 ‘min/max-width/height’ 属性的限制 |
CSS flex-wrap 属性
CSS flex-wrap 属性用于指定弹性盒子的子元素换行方式
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
值说明
| 值 | 描述 |
|---|---|
| nowrap | 默认，弹性容器为单行 该情况下弹性子项可能会溢出容器 |
| wrap | 弹性容器为多行 该情况下弹性子项溢出的部分会被放置到新行 子项内部会发生断行 |
| wrap-reverse | 反转 wrap 排列 |
CSS align-content 属性
CSS align-content 属性用于修改 flex-wrap 属性的行为
类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
值说明
| 值 | 描述 |
|---|---|
| stretch | 默认。各行将会伸展以占用剩余的空间 |
| flex-start | 各行向弹性盒容器的起始位置堆叠 |
| flex-end | 各行向弹性盒容器的结束位置堆叠 |
| center | 各行向弹性盒容器的中间位置堆叠 |
| space-between | 各行在弹性盒容器中平均分布 |
| space-around | 各行在弹性盒容器中平均分布 两端保留子元素与子元素之间间距大小的一半 |
弹性子元素排序属性 order
CSS order 属性使用整数值来定义弹性盒子子元素的顺序
语法
order: 1 | -1
值说明
| 值 | 描述 |
|---|---|
| 1 | 数值小的排在前面 |
| -1 | 数字能够大的排在前面 |
弹性子元素对齐属性 margin
设置 “margin” 值为 “auto” 值，自动获取弹性容器中剩余的空间
所以设置垂直方向 margin 值为 “auto” ，可以使弹性子元素在弹性容器的两上轴方向都完全集中
下面的范例在第一个弹性子元素上设置了 margin-right: auto;，它将剩余的空间放置在元素的右侧
CSS align-self
CSS align-self 属性用于设置弹性元素自身在纵轴方向上的对齐方式
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
值说明
| 值 | 描述 |
|---|---|
| auto | 如果 ‘align-self’ 的值为 ‘auto’，则其计算值为元素的父元素的 ‘align-items’ 值，如果其没有父元素，则计算值为’stretch’ |
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与 ‘flex-start’ 等效。其它情况下，该值将参与基线对齐 |
| stretch | 如果指定侧轴大小的属性值为 ‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’ 属性的限制 |
CSS flex 属性
CSS flex 属性用于指定弹性子元素如何分配空间
语法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
值说明
| 值 | 说明 |
|---|---|
| auto | 计算值为 1 1 auto |
| initial | 计算值为 0 1 auto |
| none | 计算值为 0 0 auto |
| inherit | 从父元素继承 |
| [ flex-grow ] | 定义弹性盒子元素的扩展比率 |
| [ flex-shrink ] | 定义弹性盒子元素的收缩比率 |
| [ flex-basis ] | 定义弹性盒子元素的默认基准值 |
CSS3 弹性盒子属性
下表列出了在弹性盒子中常用到的属性
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子的子元素如何分配空间 |
3、WEB服务器
将自己的作品上传到远程服务器：远程服务器（免费空间）http://free.3v.do/
1、去免费空间网站注册账号
2、记录下主机名，用户名，密码，域名
3、利用cutftp 软件上传网站到服务器
4、在浏览器中输入域名，即可访问我们的品优购网站。
4、2D转换
2D转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的 位移、旋转、缩放等效果。
transform：translate(x,y);
transform：translateX;
transform：translateY;
移动：translate
- translate最大的优点：不会影响到其他元素的位置。
- translate中的百分比单位是相对于自身元素的
translate：(50%,50%) - 对行内标签没有效果。
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 400px;
height: 400px;
transform: translate(30px, 30px);
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
/* margin: -100px 0 0 -100px; */
width: 200px;
height: 200px;
background-color: green;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
旋转：rotate
2D旋转:
- rotate里面的度数，单位是deg比如：rotate（45deg）
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点。
transition: all 0.5s 0.8s;过渡效果，谁过度跟谁加。
实现鼠标移动到一个图片上时，图片会有一个360度的旋转效果。
img {
width: 200px;
height: 200px;
border: 5px solid pink;
border-radius: 50%;
transition: all 0.5s 0.8s;
}
img:hover {
transform: rotate(360deg);
}
用伪元素做表单的下三角符号：鼠标指在div上，下三角符号旋转225度，即为角朝上。
div {
position: relative;
width: 300px;
height: 30px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 5px;
right: 10px;
height: 10px;
width: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.5s 0.5s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
2D转换中心点：transform-origin
transform-origin：x y;
重点：
- 注意后面的参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心的（50% 50%）
- 还可以给x y 设置像素或者方位名词（top bottom left right center）
鼠标经过返回原来的位置（即为0度）
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
div::after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: pink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.5s 0.5s;
}
div:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
缩放：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缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
**优势：**不会影响其他的盒子，而且可以设置缩放的中心点。 transform-origin: left bottom;
鼠标经过图片呈现放大效果，且不会撑大盒子，因为超出的部分被隐藏了。
div {
overflow: hidden;
float: left;
margin: 2px;
}
div img {
transition: all 1s 0.5s;
}
div img:hover {
transform: scale(1.1);
}
<div>
<a href="#"><img src="../网页布局/images/course02.png" alt="" /></a>
</div>
2D转换综合性写法：
- 同房时使用多个转换，其格式为：transform：translate() rotate() scale() …等
- 其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
5、CSS动画（animation）
是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过度，动画可以实现更多的变化，连续自动播放等效果。
制作动画分为两步：
1、先定义动画。
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
from/0% {
transform: translateX(0px);
}
to/100% {
transform: translateX(1000px);
}
动画序列：
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐转化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%。
2、再调用动画。
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 30s;
}
划分时间多状态变化，位置相当于坐标。
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 10s;
}
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| [@keyframes] | 规定动画。 | 3 |
| [animation] | 所有动画属性的简写属性。 | 3 |
| [animation-name] | 规定 @keyframes 动画的名称。 | 3 |
| [animation-duration] | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| [animation-timing-function] | 规定动画的速度曲线。默认是 "ease"动画以低速开始，然后加快，在结束前变慢。 ease-in动画以低速开始。 ease-out动画以低速结束。 ease-in-out动画以低速开始和结束。 steps()指定了时间函数中的间隔数量（步长）。 动画匀速是linear。 | 3 |
| [animation-fill-mode] | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。（forwards 盒子动画结束后，停在结束位置） | 3 |
| [animation-delay] | 规定动画何时开始。默认是 0。 | 3 |
| [animation-iteration-count] | 规定动画被播放的次数。默认是 1。 infinite（无限次） | 3 |
| [animation-direction] | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 alternate(逆向返回) | 3 |
| [animation-play-state] | 规定动画是否正在运行或暂停。默认是 “running”。paused是鼠标经过停止，离开继续动画,经常和鼠标经过等其他属性配合使用。（简写中不包含它） | 3 |
动画简写属性：
animation： 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或者结束的状态；
**速度曲线步长：**打字机的效果。
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让文字强制一行显示 */
white-space: nowrap;
/* steps就是分几步来完成我们的动画，有了steps就不要写ease或者linear了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>地狱魔爵人地狱魔爵人</div>
</body>
大数据热点图的做法：
<style>
.map {
position: relative;
width: 500px;
height: 500px;
background: url(../CSS3/images/nvnv.jpg) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 200px;
right: 300px;
}
/* 由于下边有共同的类则上边的先执行，此处不易更换，top，right */
.sh {
position: absolute;
top: 300px;
right: 200px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 4px;
}
.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%;
animation: pulse 1.2s linear infinite;
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.6s;
}
.city div.pulse4 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% {
}
70% {
/* transform: scale(5); 我们不要用scale，因为它会让盒子的阴影变大。 */
width: 40px;
height: 40px;
/* 透明度 */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
<div class="pulse4"></div>
</div>
<div class="city sh">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
<div class="pulse4"></div>
</div>
</div>
</body>
小熊奔跑：
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/* 我们的元素可以添加多个动画，用逗号分隔开 */
animation: bear 1s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
CSS3 3D转换
特点：1、近大远小。2、物体后面遮挡不可见。
三维坐标系：
x轴：水平向右 注意：x的右边是正值，左边是负值。
y轴：垂直向下 注意：y的下边是正值，上边是负值。
z轴：垂直屏幕 注意：往里边是正值，往外边是负值。
主要知识点：
-
3D位移：translate3d(x,y,z)
-
3D旋转：rotate3d(x,y,z)
-
透视：perspective
-
3D呈现transfrom-style
透视写在被观察元素的父盒子上面的。
d:就是视距，视距就是一个距离人们的眼睛到屏幕的距离。
z:就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
语法：perspective: *number*|none;**注意：**perspective 属性只影响 3D 转换元素。
提示: 请与 perspective-origin属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
值 描述 number 元素距离视图的距离，以像素计。 none 默认值。与 0 相同。不设置透视。 语法: perspective-origin: x-axis y-axis
值 描述 x-axis 定义该视图在 x 轴上的位置。默认值：50%。可能的值：leftcenterrightlength**% y-axis 定义该视图在 y 轴上的位置。默认值：50%。可能的值：topcenterbottomlength**%
转换属性:
下表列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| [transform] | 向元素应用 2D 或 3D 转换。 | 3 |
| [transform-origin] | 允许你改变被转换元素的位置。 | 3 |
| [transform-style] | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| [perspective] | 规定 3D 元素的透视效果。 | 3 |
| [perspective-origin] | 规定 3D 元素的底部位置。 | 3 |
| [backface-visibility] | 定义元素在不面对屏幕时是否可见。 | 3 |
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 (如果没有就填0) |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 (后边单位一般跟px，加透视后才有效果) |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,deg) | 定义 3D 旋转。 |
| 例如：scale3d(1,1,0,45deg) | 就是沿着对角线旋转45度（xyz是表示旋转轴的矢量，是标志你是否希望沿着该轴旋转，最后标注旋转角度。） |
| rotateX(deg) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(deg) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(deg) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
transfrom-style
- 控制子元素是否开启三维立体环境。
- transfrom-style：flat子元素不开启3d立体空间，默认的
- transfrom-style：preserve-3d；子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
浏览器私有前缀：
- -moz-:代表Firefox浏览器私有属性
- -ms-：代表ie浏览器私有属性
- -webkit-:代表Safari、Chrome私有属性
- -o-:代表Opera私有属性
扫一扫
8008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
