html5 css3 知识 案例
Posted 暑假过期le
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 css3 知识 案例相关的知识，希望对你有一定的参考价值。
html5 css3
1.HTML5简介
HTML是一种用符号来创建结构文档的语义。比如标题、章节、列表、链接、引用和其他各种元素都可以包含在结构文档中。
HTML5在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML万维网不等同于互联网，HTML是万维网最核心的超文本标记语言。但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网的帮助下，访问由许多互相链接的超文本组成的系统。
2.HTML5新增标签
1.语义化标签
| 标签 | 作用 |
|---|---|
| header | 头部标签 |
| nav | 导航标签 |
| article | 内容标签 |
| section | 块级标签 |
| aside | 侧边栏标签 |
| footer | 尾部标签 |
2.多媒体音频标签
| 标签 | 作用 |
|---|---|
| audio | 音频 |
| video | 视频 |
音频
格式 ogg mp3 wav
参数
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 进入页面就播放 |
| controls | controls | 显示控件 |
| loop | loop | 循环播放 |
| src | url | 路径 |
视频
格式 ogg mp4 webM
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 进入页面就播放 |
| controls | controls | 显示控件 |
| loop | loop | 循环播放 |
| src | url | 路径 |
| preload | auto/none | 是否预加载视频 |
| poster | 图片lu’j | 加载画面等待图片 |
| muted | muted | 静音播放 |
3.css3简介
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷 动画 圆角 阴影 边框图片 …
1.属性选择器 权重10
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute=value] | 匹配属性值中包含指定值的每个元素。 |
练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 属性为type并且值为text的 */
input[type="text"]
background-color: mediumblue;
/* 以n开头的 */
input[type^='n']
width: 80px;
/* 以e结尾的 */
input[type$='e']
width: 80px;
/* 包含t的 */
input[type*='t']
background-color: red;
</style>
<body>
<input type="text" disabled>
<input type="date" name="tate">
<input type="number" checked>
<input type="text">
</body>
</html>
2.结构为类选择器
| 选择符 | 简介 |
|---|---|
| li:first-child | 父元素中的第一个子元素 |
| li:last-child | 父元素中的最后一个子元素 |
| li:nth-child(n) | 父元素中的第n个元素 |
| li:first-of-type(n) | 指定类型中的第n个 |
练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 第一个子元素 */
li:first-child
color:red;
/* 最后一个子元素 */
li:last-child
color:yellow;
/* 第2/3个子元素(从一开始) */
li:nth-child(2)
color: pink;
li:nth-child(3)
color:green;
/* 偶数 */
li:nth-child(2n)
color: blue;
li:nth-child(even)
color:coral;
/* 奇数 */
li:nth-child(2n+1)
color:darkorchid;
li:nth-child(odd)
color:hotpink;
/* 3的倍数 */
li:nth-child(3n)
font-size: 50px;
/* 从第2个开始 */
li:nth-child(n+2)
background-color: lightblue;
/* 前三个 */
li:nth-child(-n+3)
background-color: lime;
li:nth-child(1)
font-size: 30px;
background-color: magenta;
li:first-of-type
font-size: 30px;
background-color: magenta;
</style>
<body>
<ul>
<h5>c3</h5>
<li>h8</li>
<li>t</li>
<li>m</li>
<li>l</li>
<li>1+x</li>
<li>php</li>
</ul>
</body>
</html>
动画
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 |
白熊奔跑案例
动图效果
代码注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*
margin: 0;
padding: 0;
html,
body
width: 100%;
height: 100%;
background-color: #000;
article
margin: 0 auto;
width: 165px;
height: 500px;
border: 1px solid red;
background-image: url(./images/xiong.png);
background-repeat: no-repeat;/* 去掉重复 */
animation: move 8s steps(4) infinite ;/* 调用move 8秒完成间隔步长为4 一直播放 */
@keyframes move
0%
background-position: 0px 0px;
25%
background-position: -221px 0px;
50%
background-position: -442px 0px;
75%
background-position: -884px 0px;
100%
background-position: -1768px 0px;
</style>
<body>
<div>
<article></article>
</div>
</body>
</html>
悬浮暂停案例
动图效果
代码注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*
margin: 0;
padding: 0;
html,
body
width: 100%;
height: 100%;
div
position: relative;
width: 1200px;
height: 100%;
background-image: url(./images/jin.jpg);
article
position: absolute;
top: 50%;
left: 50%;
margin-top: -73px;
margin-left: -77px;
width: 93px;
height: 93px;
background-image: url(./images/play.png);
background-position: -744px -819px;
animation: move 1.5s infinite linear;/* 调用move函数， 执行完花费1.5s 循环播放 匀速 */
article:hover
animation-play-state: paused;/* 动画暂停 */
section
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
margin-left: -47px;
margin-top: -45px;
background-image: url(./images/play.png);
background-position: -1015px -684px;
@keyframes move
0%
transform: rotate(0deg);
100%
transform: rotate(360deg);
</style>
<body>
<div>
<article>
</article>
<section></section>
</div>
</body>
</html>
transform 2d 3d 转换
2d方法
| 函数 | 描述 |
|---|---|
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
3d方法
| 函数 | 描述 |
|---|---|
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
文字滚动案例
动图效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*
margin: 0;
padding: 0;
.overflow
width: 100%;
height: 100px;
line-height: 100px;
background: #eee;
perspective: 1500px;
white-space: nowrap;
.line
width: 1400px;
height: 100px;
margin: 0 auto;
/* border: 1px solid red; */
overflow: hidden;
position: relative;
/* border: 1px solid red; */
.line span
/* border: 1px solid red; */
position: absolute;
top: 0;
left: 100%;
height: 100%;
.sp
animation: move 12s linear infinite ;
.an
animation: move 12s linear 6s infinite ;
@keyframes move
0%
transform: translateX(0px);
100%
transform: translateX(-460%);
</style>
</head>
<body>
<div class="overflow">
<p class="line">
<span class="sp">
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</span>
<span class="an">
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</span>
</p>
</div>
</body>
</html>
书架案例
动图效果
代码注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*
margin: 0;
padding: 0;
body
perspective: 1500px;/* 3D透视 值越大盒子越小，值越小盒子越大 */
.frame
margin: 0 auto;
width: 1200px;
height: 400px;
/* background-color: yellow; */
position: relative;
transform-style: preserve-3d;/* 3D呈现 给本身添加，保持子元素的3D效果 */
transform: rotateY(50deg);/* 沿y周转动50度 */
transition: 1s;/* 过渡时间为1秒 */
/* 鼠标悬浮在盒子上时触发 */
.frame:hover
transform: rotateY(0);
transition: .6s;
.frame .yy
margin: 100px 0 0 25px;
position:absolute;
/* border: 1px solid red; */
width: 400px;
height: 400px;
background-image: url(./images/jsbook2.jpg);
background-repeat: no-repeat;
background-size:contain ;/* 背景图铺满盒子 */
z-index: 1;/* 显示层级 */
transition: 1s;
/* 鼠标悬浮在盒子上时触发*/
.yy:hover
transform: translateZ(75px);
transition: 1s;
.frame .xx
position: absolute;
margin: 100px 0 0 25px;
width: 400px;
height: 400px;
/* border: 1px solid yellow; */
background: url(./images/jsbook1.jpg) no-repeat ;
transform: translateY(120px) translateZ(60px)translateX(80px);
z-index: 9;
</style>
<body>
<div class="frame">
<div class="yy"></div>
<div class="xx"></div>
<div></div>
</div>
</body>
</html>以上是关于html5 css3 知识 案例的主要内容，如果未能解决你的问题，请参考以下文章