css3学习重学习笔记，简易走马灯案例、3D导航栏案例、

html5概念

html5定义html标准的最新版本，是html的第五次重大修改。增加了离线储存机制。
html5拓展：语义化标签、本地储存、兼容特性、2D、3D、动画、过渡、css3特性、性能与集成、
html5的现状：
绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，
并不是所有浏览器都支持html5.

html5新增语义化结构标签

header --头部标签
nav --导航标签
article --内容标签
section --块级标签
aside --侧边栏标签
footer --尾部标签

多媒体音频标签

音频标签audio

可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
但是：播放格式是有限的

支持三种格式

	格式	IE9	Firefox3.5	Opera10.5	safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

zudio标签的参数：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
src	src	要播放的音频的URL。

练习代码：

<audio controls="controls" autoplay="autoplay" loop="loop">
			<source src="./1.mp3">
			<source src="./1.wav">
			<source src="./1.ogg">
			您的浏览器不支持此类型
</audio>

多媒体标签video

支持三种格式

格式	IE	FIREFOX	OPERA	CHERA	SAFARI
Ogg		3.5+	10.5+	5.0+
MPEG4	9.0+			5.0+	3.0+
WedM		4.0+	10.6+	6.0+

标签参数

属性	值	叙述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	width	设置播放器宽度
height	height	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	preload	规定是否预加载视频(如果有了autoplay就忽略该属性)
src	src	视频url地址
poster	poster	加载等待的画面图片
muted	muted	静音播放

练习代码：

<video controls="controls" autoplay="autoplay" loop="loop" preload="auto"    <!-- none -->  
poster="./1.png" muted="muted">
			<source src="./2.mp3">
			<!-- <source src="./2.wav"> -->
			<source src="./2.ogg">
			您的浏览器不支持此类型文件
</video>

新增的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	可以多选文件提交

css3属性选择器

是在css2基础上拓展、新增的样式,权重值：10

选择符	简介
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	匹配父元素中的第一个子元素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个

nth-child参数:

本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、 odd 奇数
n从0开始算

2n 偶数
2n+1 奇数
5n 5的倍数
n+5 从第五个开始到最后
-n+5 前五个…

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

伪元素选择器

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

before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个元素，但是属于行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1

2D转换

2D 转换是改变标签在二维平面上的位置和形状
移动： translate
旋转： rotate
缩放： scale

translate 语法

translateX 就是 x 轴上水平移动
translateY 就是 y 轴上水平移动

transform: translate(x, y)
 transform: translateX(n)
 transfrom: translateY(n)

translate 最大的优点就是不影响其他元素的位置,translate 中的100%单位，是相对于本身的宽度和高度来进行计算的,行内标签没有效果

rotate 语法

rotate 旋转就是2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

 transform: rotate(度数)
/* 单位是：deg */

角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点

设置元素旋转中心点(transform-origin)

语法：

transform-origin: x y;

x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词( top 、 bottom 、 left 、 right 、 center )

scale’ 语法

用来控制元素的放大与缩小

transform: scale(x, y)

x 与 y 之间使用逗号进行分隔
transform: scale(1, 1) : 宽高都放大一倍，相当于没有放大
transform: scale(2, 2) : 宽和高都放大了二倍
transform: scale(2) : 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5) : 缩小
可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

动画 animation

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

动画的定义：

@keyframes 动画名称{
  0% {
	width: 100px;
 }
  100% {
	width: 200px
 }
}

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to ，等同于 0% 和 100%

动画的调用有两种方式：

1.各个属性分开设置
div{
	animation: 动画名称;
	animation-duration: 周期时间;
	...
}

属性	叙述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的)
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的)
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

动画曲线值：

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

2.简写方式

 /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
 animation: name duration timing-function delay iteration-count direction fill-mod

简写属性里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused ; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来： animation-direction: alternate
盒子动画结束后，停在结束位置： animation-fill-mode: forwards

3D 转换

特点：

近大远小
物体和面遮挡不可见

三位坐标系：

x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

属性代码：

• 3D 位移： translate3d(x, y, z)
• 3D 旋转： rotate3d(x, y, z)
• 透视： perspctive
• 3D 呈现 transfrom-style

translate3d(x, y, z)

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
transform: translateX(100px) ：仅仅是在 x 轴上移动
transform: translateY(100px) ：仅仅是在 y 轴上移动

语法：

transform: translate3d(x, y, z)
transform: translate3dX(x)
transform: translate3dY(y)
transform: translate3dZ(z)

透视 prespective

想要网页产生 3D 效果需要透视
实际上模仿人类的视觉位置，可视为安排一直眼睛去看
透视也称为视距，就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素
透视需要写在被视察元素的父盒子上面

 perspective: 1000px；

旋转 rotate

3d 旋转可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

语法：

transform: rotateX(xdeg) -- 沿着 x 轴正方向旋转 x 度
transform: rotateY(ydeg) -- 沿着 y 轴正方向旋转 y 度
transform: rotateZ(zdeg) -- 沿着 z 轴正方向旋转 z 度

3D 呈现 transform-style

控制子元素是否开启三维立体环境
transform-style: flat 代表子元素不开启 3D 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子
给子元素设置3d效果就必须给父元素这只此属性。

练习案例

持续运动的红色方块

持续运动的红色方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				background-color: red;
				/* 调用动画 周期1s 匀速 等待时间 周期次数	是否逆周期 */
				animation: move 1s linear 0s infinite alternate;
			}
			/* 设计动画效果 */
			@keyframes move{
				0%{
					margin-left: 0;
					/* 初始位置  */
				}
				100%{
					margin-left: 500px;
					/* 结束位置 */
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

3D 反转盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				width: 100%;
				height: 200px;
				margin: 200px;
			}

			ul li {
				float: left;
				width: 200px;
				height: 200px;
				margin-left: 50px;
				/* 设置3d透视效果 */
				perspective: 1200px;
				list-style: none;
			}

			.box {
				/* 旋转的盒子不能给定位的位置属性,否则旋转的中心点就会发生偏移 */
				position: relative;
				height: 200px;
				width: 200px;
				transition: all 0.5s;
				/* 设置3d呈现 */
				transform-style: preserve-3d;
			}

			.box:hover {
				/* 设置鼠标悬浮样式 */
				transform: rotateX(90deg);
			}

			.front,
			.bottom {
				position: absolute;
				top: 0;
				left: 0;
				height: 200px;
				width: 200px;
				font-size: 20px;
				text-align: center;
				line-height: 200px;
			}

			.front {
				background-color: pink;
				/* 这里要将前面的向前移动不能移动bottom的Z轴 */
				transform: translateZ(100px);
			}

			.bottom {
				background-color: purple;
				/* 设置底面下移和反转 */
				transform: translateY(100px) rotateX(-90deg);
			}
		</style>
	</head>
	<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>
		</ul>

	</body>
</html>

3D 反转导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0; padding:0;}
			li{
				list-style-type: none;
			}
			ul{
				/* border: 1px solid black; */
				width: 600px;
				height: 30px;
				line-height: 30px;
			}
			ul li{
				width: 100px;
				height: 30px;
				/* box-sizing: border-box; */
				text-align: center;
				display: inline-block;
				float: left;
				font-size: 18px;
				/* border: 1px solid red; */
				/* perspective: 800px; */
				position: relative;
				transition: all 1s;
				transform-style: preserve-3d;
			}
			span{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100px;
				height: 30px;
			}
			ul li:hover{
				transform: rotateX(90deg);
			}
			.list-one{
				background-color: pink;
				transform: translateZ(15px);
				z-index: 1;
			}
			.list-two{
				background-color: aquamarine;
				transform: translateY(15px) rotateX(-90deg);
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span class="list-one">首页</span>
				<span class="list-two">详情</span>
			</li>
			<li>
				<span class="list-one">热销</span>
				<span class="list-two">详情</span>
			</li>
			<li>
				<span class="list-one">海外</span>
				<span class="list-two">详情</span>
			</li>
			<li>
				<span class="list-one">补贴</span>
				<span class="list-two">详情</span>
			</li>
		</ul>
	</body>
</html>

走马灯画册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			html,body{background-color: #e1e1e1;}
			body{
                /* 给父元素设置3D透视效果 */
				perspective: 1800px;
			}
			.box{
				width: 300px;
				height: 200px;
				margin: 200px auto;
				/* border: 1px solid black; */
				position: relative;
                /* 3D 效果呈现 */
				transform-style: preserve-3d;
                /* 调用动画 设置相关属性 */
				animation: move 16s linear 0s infinite;
			}
			.box div{
                /* 设置统一样式 */
				width: 300px;
				height: 200px;
				background-color: #000000;
				position: absolute;
				background-size: 300px 200px;
			}
            /* 设置画册绕Y轴转动动画 */
			@keyframes move {
			    0% {
			        transform: rotateY(0);
			    }
			    100% {
			        transform: rotateY(360deg);
			    }
			}
            /* 设置鼠标悬浮停止动画 */
			.box:hover{
				animation-play-state: paused;
			}
			
            /* 给各个div画框设置图片 3d视图中的位置 */
			.box div:nth-child(1) {
			    background-image: url(./image/1.jpg);
			    transform: rotateY(0) translateZ(300px);
			}
			
			.box div:nth-child(2) {
			    background-image: url(./image/2.jpg);
			    transform: rotateY(60deg) translateZ(300px);
			}
			
			.box div:nth-child(3) {
			    background-image: url(./image/3.jpg);
			    transform: rotateY(120deg) translateZ(300px);
			}
			
			.box div:nth-child(4) {
			    background-image: url(./image/4.jpg);
			    transform: rotateY(180deg) translateZ(300px);
			}
			
			.box div:nth-child(5) {
			    background-image: url(./image/5.jpg);
			    transform: rotateY(240deg) translateZ(300px);
			}
			
			.box div:nth-child(6) {
			    background-image: url(./image/6.jpg);
			    transform: rotateY(300deg) translateZ(300px);
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div></div>
		    <div></div>
		    <div></div>
		    <div></div>
		    <div></div>
		    <div></div>
		</div>
	</body>
</html>

图书反转 浮现效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			html,body{background-color: #ECECEC;}
			.box{
				width: 1300px;
				min-height: 600px;
				/* border: 1px solid black; */
				transform-style: preserve-3d;
				perspective: 1200px;
			}
			.box .ban{
				width: 300px;
				height: 350px;
				/* border: 1px solid black; */
				display: inline-block;
				position: relative;
				background-color: #ECECEC;
				transform-style: preserve-3d;
				/* transform: rotateY(30deg); */
				perspective: transform 0.5s;
			}
            /* 统一设置旋转角度会有误差分开精准设置 */
			.ban1{
				transform: rotateY(60deg);
			}
			.ban2{
				transform: rotateY(50deg);
			}
			.ban3{
				transform: rotateY(40deg);
			}
			.ban4{
				transform: rotateY(30deg);
			}
            /* 先设置鼠标悬浮相应位置书本像表面悬浮显示动画 */
			.box .ban .mi:hover{
				/* z-index: 1; */
				animation: movb 1s ease forwards;
			} 
            /* 后设置鼠标悬浮书本旋转动画 */
			.box .ban:hover{
				/* transform: rotate(0deg); */
				animation: mova 0.5s ease forwards;
			}
            /* 设置书本向表面浮动显示的动画 */
			@keyframes movb{
				0%{
					
				}
				100%{
					
					transform: translateX(30px) translateZ(70px);
				}
			}
            /* 设置书本旋转至正面的动画 */
			@keyframes mova{
				0%{}
				100%{
					transform: rotate(0deg);
				}
			}
			.ban div:nth-child(1){
				width: 200px;
				height: 200px;
				box-shadow: 1px 1px 2px #5f5f5f;
				position: absolute;
				background-repeat: no-repeat;
				/* background-color: #aaffff; */
				border: 10px solid #94c0c8;
				top: 30px;
				left: 30px;
			}
			.ban div:nth-child(2){
				width: 200px;
				height: 200px;
				box-shadow: 1px 1px 2px #5f5f5f;
				position: absolute;
				top: 100px;
				left: 70px;
				background-repeat: no-repeat;
				border: 10px solid #cff9e3;
				transform: translateZ(60px);
			}
			
			/* 设置图片 */
			.ban1 div:nth-child(1){
				background-image: url(shhu/01.jpg);
			}
			.ban2 div:nth-child(1){
				background-image: url(shhu/02.jpg);
			}
			.ban3 div:nth-child(1){
				background-image: url(./shhu/03.jpg);
			}
			.ban4 div:nth-child(1){
				background-image: url(./shhu/04.jpg);
			}
			
			.ban1 div:nth-child(2){
				
				background-image: url(shhu/01.jpg);
			}
			.ban2 div:nth-child(2){
				background-image: url(shhu/02.jpg);
			}
			.ban3 div:nth-child(2){
				background-image: url(./shhu/03.jpg);
			}
			.ban4 div:nth-child(2){
				background-image: url(./shhu/04.jpg);
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="ban ban1">
				<div class="mi"></div>
				<div class="di"></div>
			</div>
			<div class="ban ban2">
				<div class="mi"></div>
				<div></div>
			</div>
			<div class="ban ban3">
				<div class="mi"></div>
				<div></div>
			</div>
			<div class="ban ban4">
				<div class="mi"></div>
				<div></div>
			</div>
		</div>
	</body>
</html>