目录
一.HTML5(取代 HTML4 + XHTML)
- 广义上的 HTML5:拥有强大的技术集,这些技术是指:
HTML5
、CSS3
、javascript
1.语义化标签
- 新增语义化标签:
语义化标签:针对搜索引擎,可多次使用,移动端支持比较友好
在“IE9”浏览器中,需要把语义化标签转换成 块级元素
header, nav, section { <!-- IE9 中,语义标签需要转换成 块级元素 --> display: block; ... } <body> <!-- 可以书写多个语义标签 --> <header> header </header> <header> header </header> ... </body>
2.音/视频标签
- audio 音频标签:
- 不同浏览器 支持 不同格式,所以要准备多个音频文件,会按照资源给的顺序 播放音频
- 一般 .ogg .mp3 可以支持绝大部分浏览器
- chrome 禁用了 autoplay 属性,除非静音播放,muted 属性(静音播放)
- controls:显示播放按钮等控件
- loop:循环播放
- poster:未播放时展示的海报
<audio src="media/snow.mp3" controls autoplay></audio> <audio controls> <source src="media/snow.mp3" type="audio/mpeg" /> <source src="media/snow.ogg" type="audio/ogg" /> 您的浏览器不支持播放声音( 此文字在上述两种音频均不可用时出现 ) </audio>
- video 视频标签:
<!-- <video src="media/video.mp4" controls="controls"></video> --> <video controls="controls" autoplay muted loop poster="media/pig.jpg"> <source src="media/video.mp4" type="video/mp4"> <source src="media/video.ogg" type="video/ogg"> </video>
3.input 标签
- type="email" :限制用户输入必须为Email类型
- type="url" :限制用户输入必须为URL类型
- type="date / time" :限制用户输入必须为日期 / 时间类型
- type="number" :限制用户输入必须为数字类型
- type="tel" :限制用户输入必须为手机号码
- type="search" :搜索框 会出现 x 方便一次删除输入内容
- type="color" :生成一个颜色选择表单
4.表单属性
- required :内容不能为空
- placeholder :提示文本,存在默认值将不显示
- autofocus :自动聚焦
- autocomplete :"off / on" 浏览器会提示历史输入,为了隐私一般设置为off
- multiple :多选文件提交,file默认选一个文件
用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上传头像: <input type="file" name="" id="" multiple="multiple">
二.CSS3选择器
- CSS3现状:浏览器支持度差,需要添加 私有前缀,移动端优于PC端
1.属性选择器 [ ]
- 类选择器、属性选择器、权重为 10
/* 选择的是: 既是button 又有 disabled 这个属性的元素 */ button[disabled] {} /* 1.直接写属性 */ input[type="search"] {} /* 2. 属性等于值 */ div[class^="icon"] {} /* 3. 以某个值开头的 属性值 */ div[class$="icon"] {} /* 4. 以某个值结尾的 */ div[class*="icon"] {} /* 5. 可以在任意位置的 */ <body> <button disabled="disabled">按钮</button> <div class="icon1">图标1</div> <div class="iicon3">图标4</div> <div class="absicon">图标5</div> </body>
2.结构伪类选择器 :
- 类选择器、属性选择器、权重为 10
<style> ul li:first-child {} /* 父元素中第一个子元素 */ ul li:last-child {} /* 父元素中最后一个子元素 */ ul li:nth-child(8) {} /* 父元素中第n个子元素 */ /* n 可是关键词 even 是偶数 odd 是奇数 */ /* n 可是公式 2n 是偶数 2n+1 是奇数 5n 是5的倍数 */ ul li:nth-child(even/2n) {} ul li:nth-child(-n+5) {} /* -n + 5 就是选择前面5个 */ /* div span:nth-child(1) {选不到span 会选择出p 因为p是div的第一个子元素} */ /* 总结: :nth-child(n) 选择父元素里面的 第n个孩子, 它不管里面的孩子 是span还是p */ /*选择 span 的方法 */ div span:first-of-type {} div span:last-of-type {} div span:nth-of-type(2) {} </style> <body> <div> <p>我是一个p标签</p> <span>我是span标签</span> <span>我是span标签</span> </div> <!-- ul 里面我们只允许放li 所以 nth-child = nth-of-type --> <ul> <li>1</li> ... <li>8</li> <li>9</li> <li>10</li> </ul> </body>
- 区分
nth-child
和nth-of-type
:
nth-child
选择父元素里面的第几个子元素,子元素可能不是同种类型,如span p同等看待nth-of-type
选择指定类型的元素3.伪元素选择器 ::
- 伪类选择器,权重为 1
div::before { content: "我"; /* before 和 after 必须有 content 属性,可以为空 */ /* before 和 after 创建的是一个行内元素,要转换类型设置宽高 */ display: inline-block; width: 100px; ...} div::after { content: "小猪佩奇"; ...} <body> <div>是</div> </body>
- 伪类选择器注意事项:
before
和after
必须有content
属性before
在内容前面,after 在内容后面before
和after
创建的是一个行内元素,要转换为行内块元素设置宽高- 创建出来的元素在 DOM 中查找不到,所以称为伪元素
- 伪元素权重为 1
- 应用:伪元素字体图标:
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?cv013x'); ...} p::after { content: '\ea50'; /* 字体图标代码,可自行查看 */ position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* 务必务必务必不要忘记字体图标需要引用自定义字体! */ } <body> <p></p> </body>
三.2D 转换(transform)
1.定义
2D
转换:改变标签在二维平面上的位置和形状,元素如下:
- 移动:
translate
- 旋转:
rotate
- 缩放:
scale
2.translate 语法(移动)
2D
移动指:水平X、垂直Y方向上的移动,类似 定位- transform: translate(x, y); :transform: translate(100px, 100px);
- transform:translate:(50%,50%);:%是相对于 本身 的宽高计算的
- 只移动x坐标:
- transform: translate(100px, 0);
- transform: translateX(100px);
- translate 对 行内元素 是无效的,比如给 <span>设置,不会生效
- 拓展:让盒子实现水平垂直居中,使用 translate 就不需要计算了
- translate(-50%, -50%) :盒子往上往左走,自己高度的一半
3.rotate 语法(旋转)
rotate()
里面跟度数,单位是deg
- 角度为正时,顺时针,角度为负时,逆时针
- 默认旋转的中心点是:元素中心点
- CSS书写三角形并旋转:
div { position: relative; ...} div::after {/* 伪类选择器相当于 添加行内元素 absolute自动使之变成块元素 */ content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; /* 只让右边和底边显示 构造一个直角 */ border-bottom: 1px solid #000; transform: rotate(45deg); /* 顺时针旋转直角45° 使之看起来向下 */ transition: all 0.2s; /* 过渡写到本身上,谁做动画给谁加 */ } /* 鼠标经过div 里面的三角旋转 */ div:hover::after { transform: rotate(225deg); /* 使直角向上旋转 注意旋转角度225 = 45 + 180 */ } <body> <div></div> </body>
- 设置旋转中心点:transform-origin:x y
- 注意:x 和 y 用 空格 隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%),等价于
center
center
- 可以给 x y 设置像素:transform-origin: 50px 50px;
- 可以给 x y 设置方位名词:transform-origin: left bottom;
4.scale 语法(缩放)
- 注意:x 与 y使用 逗号 进行分隔
transform: scale(2)
: 只写一个参数,第二个参数就和第一个参数一致,宽高都放大两倍transform:scale(0.5, 1)
: 宽缩小一倍,高保持不变scale
最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子- 分页按钮实例:
li { float: left;width: 30px;height: 30px; border: 1px solid pink;margin: 10px; text-align: center;line-height: 30px;list-style: none; border-radius: 50%; cursor: pointer; transition: all .4s; } li:hover { transform: scale(1.2);} <body> <ul> <li>1</li> ... <li>7</li> </ul> </body>
5.2D 转换综合写法
- 同时使用多个转换,其格式为
transform: translate() rotate() scale()
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向),位移放到最前面
四.动画(animation)
1.动画使用步骤
- 定义动画:@keyframes...
- 调用定义好的动画
/* 1. 定义动画 */ @keyframes move { 0% {transform: translateX(0px); /* 开始状态 */} 100% { transform: translateX(1000px); /* 结束状态 */} } div { width: 200px; height: 200px; background-color: pink; /* 2. 调用动画 */ animation-name: move; /* 动画名称 */ animation-duration: 2s; /* 持续时间 */ }
2.动画序列
- 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列
- from to 等价于 0% 和 100%
/* @keyframes move { from { transform: translate(0, 0);} to { transform: translate(1000px, 0);} } */ @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; }
3.动画常见属性
- @keyframes :规定动画,关键帧
- animation :所有动画属性的简写属性,除了 animation-play-state 属性
- animation-name(必写):规定 @keyframes 动画的名称
- animation-duration(必写) :规定动画完成一个周期所花费的秒或毫秒,默认是0
- animation-timing-function :规定动画的速度曲线,默认是“ease”先快后慢再快 “linear”匀速
- animation-delay:规定动画何时开始,默认是0
- animation-iteration-count :规定动画重复播放的次数,默认是1,还有 infinite"无限循环"
- animation-direction :规定动画是否在下一周期逆向播放,默认是 “normal“, alternate"逆播放”
- animation-play-state :规定动画是否播放或暂停,默认是 "running", 还有 "pause",鼠标经过暂停
- animation-fill-mode :规定动画结束后状态,保持现状 forwards 回到起始 backwards
4.动画简写
- animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态
- animation: name duration timing-function delay iteration-count direction fill-mode
- 简写属性里面不包含
animation-paly-state
- 暂停动画
animation-paly-state: paused
; 经常和鼠标经过等其他配合使用- 要想动画走回来,而不是直接调回来:
animation-direction: alternate
- 盒子动画结束后,停在结束位置:
animation-fill-mode: forwards
动画实例之大数据热点图:
5.速度曲线 steps()
- 模仿打印机打字效果用到 steps():分几步来完成动画
div { font-size: 20px; width: 0; height: 30px; white-space: nowrap; /* 让文字强制一行内显示*/ overflow: hidden; /* steps 就是分几步来完成动画 有了steps 就不写 ease / linear */ animation: w 4s steps(10) forwards停留在打印完的样子; } @keyframes w { 0% { width: 0;} 100% { width: 200px;} /* 总共10个字,每个字像素20px,10*20=200 模仿打印 */ } <body> <div>世纪佳缘我在这里等你</div> </body>
6.奔跑的熊
- 结论:元素可以添加多个动画, 用逗号分隔
div { position: absolute; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 元素可以添加多个动画, 用逗号分隔 */ animation: bear .4s steps(8) infinite, move 3s forwards; } @keyframes bear {/* 这个动画是实现熊的跑步动作 通过让背景图左移实现 */ 0% {background-position: 0 0; } 100% {/* 熊的背景图片是向左走的 所以是负值 左上负 右下正 */ background-position: -1600px 0; }} @keyframes move {/* 这个动画是实现熊的位移 */ 0% { left: 0; } /* 左移自身的 50% 实现居中效果 */ transform: translateX(-50%);}} <body> <div></div> </body>
五.3D 转换
1.三维坐标系
- x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值
- y 轴:垂直向下 -- 注意:y 轴下面是正值,上面是负值
- z 轴:垂直屏幕 -- 注意:往外边的是正值,往里面的是负值
2.3D 转换元素
3D
位移:translate3d(x, y, z)
3D
旋转:rotate3d(x, y, z)
- 透视:
perspctive
3D
呈现:transfrom-style
3.3D 位移 translate3d()
3D
位移:在2D
移动的基础上多加了 z 轴移动方向transform: translateX(100px)
:仅在 x 轴上移动transform: translateZ(100px)
:仅仅是在 z 轴上移动,此处只能跟 px单位transform: translate3d(x, y, z)
:x, y, z 对应的值不能省略,可用 0 进行填充- 因为z轴是垂直屏幕,由里指向外面,所以默认 看不到 元素在z轴的方向上移动,除非设置透视
4.透视 perspective
- 想要网页产生
3D
效果需要 透视,单位:像素- 透视也称视距,即人的眼睛到屏幕的距离
- 视距越小成像越大,越大成像越小
- 注意:透视 需要写在 被视察元素 的 父盒子 上面
body { perspective: 200px; /* 透视写到被观察元素的父盒子上面 */ } div { width: 200px; height: 200px; background-color: pink; transform: translate3d(100px, 100px, 0); /* xyz是不能省略的,没有就写0 */ }
translateZ
与perspecitve
的区别:perspecitve
给 父级 进行设置,translateZ
给 子元素 进行设置- translateZ(100px):仅仅是在Z轴上移动,看不到变化;有了透视,就能看到translateZ 引起的变化
5.3D 旋转 rotate3d()
- 左手准则:左手的手拇指指向 x 轴的正方向,其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
transform: rotateX(45deg)
:沿着 x轴正方向旋转 45 度transform: rotateY(45deg)
:沿着 y轴正方向旋转 45 度- 两面翻转盒子实例:
- 用大盒子 box 包裹住子盒子 front + back,给 body 设置透视
- 大盒子 box 在鼠标经过时会绕着 y轴旋转180°
- 子盒子 back 本身需要旋转180° 和 front 实现背靠背的效果
- 为保证子盒子本身旋转实现,要给父盒子添加 transform-style 属性来保留子盒子立体空间
transform: rotate3d(x, y, z, deg)
:沿着自定义轴旋转, deg 为角度- x, y, z 表示旋转轴的矢量,表示是否沿着该轴进行旋转,最后一个标识旋转的角度
transform: rotate3d(1, 1, 0, 45deg)
-- 沿着对角线旋转 45degtransform: rotate3d(1, 0, 0, 45deg)
-- 沿着 x 轴旋转 45deg6.3D 呈现 transform-style(重要)
transform-style: preserve-3d
子元素开启立体空间,默认的值是 flat 不开启- 代码写给 父级,但是影响的是 子盒子
<style> body { perspective: 500px; /* 透视效果 */ } .box { position: relative; ... transition: all 2s; /* 让子元素保持3d立体空间环境 */ transform-style: preserve-3d; /* 若不设置 紫色盒子就无法绕着 x轴旋转60° */ } .box:hover { transform: rotateY(60deg); /* 父亲盒子绕着 y轴转60° */} .box div { position: absolute; ... background-color: pink; } .box div:last-child { background-color: purple; /* 紫色盒子绕着x轴转60° */ transform: rotateX(60deg); } </style> </head> <body> <div class="box"> <div></div> <div></div> </div> </body>
7.3D 导航栏
- 用父盒子 ul-li 包裹住 子盒子box ,box 再包住 front 和 bottom
- 给 li 设置透视,box 设置 transf-style 来保持 front 和 bottom 的立体空间, 动画效果(鼠标经过 box 沿着x轴转9.°)
- front 盒子 设置 z-index: 1保持永远在上,transform: translateZ(17.5px); 保证旋转中心在屏幕里面17.5px处
- bottom 盒子设置transform: translateY(17.5px) rotateX(-90deg); 保证顶部对齐front 且面朝下 先移动 再旋转
ul li { /* 需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */ perspective: 500px;} .box { position: relative; transform-style: preserve-3d; ... transition: all .4s; } .box:hover { transform: rotateX(90deg); } .front, .bottom { position: absolute; ...} .front { background-color: pink; z-index: 1; transform: translateZ(17.5px); } .bottom { background-color: purple; /* x轴一定是负值 */ /* 如果有移动 或者其他样式,必须先写我们的移动 */ transform: translateY(17.5px) rotateX(-90deg); } <ul> <li> <div class="box"> <div class="front">第五人格</div> <div class="bottom">茶茶子等你</div> </div> </li> ...
8.3D 旋转木马
- 搭建HTML结构:
- <section>
- <div></div>...<div></div>
- </section>
- 里面的6个div 分别是 6个狗狗图片 ,注意最终旋转是 section标签 旋转
- CSS样式:
- ① 给body添加 透视效果 perspective: 1000px;
- ② 给section 添加 大小,一定不要忘记添加 3d呈现效果 控制里面的6个div
- 注意:别忘记子绝父相,section要加相对定位
- ③ 里面6个div 全部绝对定位叠到一起,然后旋转不同角度 和 移动距离
- 注意:旋转角度用rotateY 距离 用translateZ
- ④ 给section 添加动画 animation ,让它可以自动旋转即可
- 源码展示:
<style> body { perspective: 1000px;} section { position: relative; width: 300px; height: 200px; margin: 150px auto; transform-style: preserve-3d; /*保持子盒子div 3D立体空间*/ /* 添加动画效果 */ animation: rotate 10s linear infinite; } section:hover { animation-play-state: paused; /* 鼠标放入section 停止动画 */ } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { /* 先旋转好了再 移动距离 */ transform: rotateY(0) translateZ(300px); } section div:nth-child(2) { /* 先旋转好了再 移动距离 */ transform: rotateY(60deg) translateZ(300px); } ... section div:nth-child(6) { /* 先旋转好了再 移动距离 */ transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <!-- 6个div盒子 --> </section> </body>
9.浏览器私有前缀
- 浏览器私有前缀是 兼容老版本 的写法,比较新版本的浏览器无须添加
- -moz-:代表 firefox 浏览器私有属性
- -ms-:代表 ie 浏览器私有属性
- -webkit-:代表 safari、chrome 私有属性
- -o-:代表 Opera 私有属性
- 提倡写法:
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;