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"
<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效果就必须给父元素这只此属性。
练习案例
持续运动的红色方块
持续运动的红色方块
<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 反转盒子
<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 反转导航栏
<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>
走马灯画册
<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>
图书反转 浮现效果
<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>