HTML5学习：第一阶段12
作者：互联网
一、逐帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:180px;
height:300px;
margin:100px auto;
background:url(../images/bg.png) no-repeat;
animation:dong 1s step-start infinite;
}
@keyframes dong{
0%{
background-position:0 0;
}
14%{
background-position:-180px 0;
}
28%{
background-position:-360px 0;
}
42%{
background-position:-540px 0;
}
56%{
background-position:-720px 0;
}
70%{
background-position:-900px 0;
}
84%{
background-position:-1080px 0;
}
100%{
background-position:0 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!--
animation-timing-function:
linear
ease
。。。
step-start 从上一帧直接跳到下一帧，不会显示中间的过渡状态
-->二、旋转相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
background:url(../images/bg2.jpg) no-repeat;
/* 背景图的大小 水平方向 垂直方向 */
background-size:100% 100%;
/* 景深 */
perspective: 2200px;
/* 溢出隐藏 */
overflow:hidden;
}
.box{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:200px;
height:300px;
background:url(../images/a.gif) no-repeat center center;
/* 形成3d空间 */
transform-style:preserve-3d;
/* 旋转3d空间 */
transform:rotateX(30deg) rotateY(30deg);
/* 调用动画 */
animation:donghua 10s linear infinite;
}
.box div{
position:absolute;
width:200px;
height:300px;
/* 设置变形原点 */
transform-origin:center center -600px;
}
img{
display:block;
width:100%;
height:100%;
}
.child1{
transform:translateZ(600px);
}
.child2{
transform:translateZ(600px) rotateY(36deg);
}
.child3{
transform:translateZ(600px) rotateY(72deg);
}
.child4{
transform:translateZ(600px) rotateY(108deg);
}
.child5{
transform:translateZ(600px) rotateY(144deg);
}
.child6{
transform:translateZ(600px) rotateY(180deg);
}
.child7{
transform:translateZ(600px) rotateY(216deg);
}
.child8{
transform:translateZ(600px) rotateY(252deg);
}
.child9{
transform:translateZ(600px) rotateY(288deg);
}
.child10{
transform:translateZ(600px) rotateY(324deg);
}
@keyframes donghua{
0%{
transform:rotateX(0) rotateY(0);
}
25%{
transform:rotateX(10deg) rotateY(90deg);
}
50%{
transform:rotateX(0deg) rotateY(180deg);
}
75%{
transform:rotateX(-10deg) rotateY(270deg);
}
100%{
transform:rotateX(0deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="child1"><img src="../images/pic1.jpg" alt=""></div>
<div class="child2"><img src="../images/pic2.png" alt=""></div>
<div class="child3"><img src="../images/pic3.png" alt=""></div>
<div class="child4"><img src="../images/pic4.png" alt=""></div>
<div class="child5"><img src="../images/pic5.jpg" alt=""></div>
<div class="child6"><img src="../images/pic6.png" alt=""></div>
<div class="child7"><img src="../images/pic7.png" alt=""></div>
<div class="child8"><img src="../images/pic8.png" alt=""></div>
<div class="child9"><img src="../images/pic9.png" alt=""></div>
<div class="child10"><img src="../images/pic10.png" alt=""></div>
</div>
</body>
</html>三、h5基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body,figure{
margin:0;
padding:0;
}
dialog{
display:block;
}
</style>
</head>
<body>
<section>我是section</section>
<article>我是article</article>
<aside>我是aside</aside>
<header>我是头部</header>
<footer>我是尾部</footer>
<nav>我是导航</nav>
<figure>
<img src="../images/a.gif" alt="">
<figcaption>我是萌萌哒</figcaption>
</figure>
<main>我是主体内容</main>
<hgroup>标题的分组</hgroup>
<mark>我是mark</mark>
<time>时间</time>
<dialog>我是对话框</dialog>
hello
</body>
</html>
<!--
section元素 表示页面中的一个区块
article元素 表示一块与上下文无关的独立的内容,偏向内容的展示
aside元素 在article之外的，与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容
hgroup标题的一个分组
mark定义高亮显示的文本(span),默认有黄色的背景，是内联元素
time时间，内联元素
dialog标记定义一个对话框(会话框)类似微信
-->四、多媒体标准
<!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>
<body>
<!-- 视频 -->
<!-- <video controls loop poster="../images/a.gif">
<source type="video/mp4" src="">
</video> -->
<!-- 音频 -->
<audio controls loop>
<source type="audio/mpeg" src="">
</audio>
</body>
</html>
<!--
视频：
<video></video>:
src:资源路径
controls:如果设置了这个属性，那么用户就能看到播放按钮
autoplay:自动播放
muted :静音属性
loop:重复播放
poster:规定视频正在下载时显示的图像，直到用户点击播放按钮
音频:
<audio></audio>:
src:资源路径
controls:如果设置了这个属性，那么用户就能看到播放按钮
autoplay:自动播放
muted :静音属性
loop:重复播放
source标签：定义媒介资源的
type属性：
视频：
video/mp4 video/ogg video/webm
音频：
audio/mpeg audio/ogg
-->五、h5表单
<!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>
<body>
<form action="" method="" autocomplete="off" novalidate>
<!-- <input type="email"> -->
<!-- <input type="url"> -->
<!-- <input type="range"> -->
<!-- <input type="number" min="10" max="20" step="3" name="num"> -->
<!-- <input type="color"> -->
<!-- <input type="time"> -->
<!-- <input type="month"> -->
<!-- <input type="week"> -->
<!-- <input type="date"> -->
<!-- <input type="text" name="phone" pattern="^1[3|5|6|7|8|9]\d{9}$"> -->
<!-- <input type="file" multiple> -->
<!-- <input type="url" list="datalist">
<datalist id="datalist">
<option value="百度"></option>
<option value="淘宝"></option>
<option value="京东"></option>
</datalist>
<input type="submit"> -->
</form>
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
<!--
新增type类型
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“number”
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
type=”date”
新增的表单属性
required 监测是否为空。
min 最小
max 最大
step 步幅 确定一个法定值。 -3 0 3 6 9
***autocomplete 是否自动提示信息 属性值 on off
***placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能由一个。
**pattern 后面的属性值是一个正则表达式。
novalidate 取消验证
multiple 选择（上传）多个
list 必须结合datalist标签，绑定datalist id名称。
新增表单标签
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">=
<output name="x" for="a b"></output>
</form>
-->六、css3
<!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>
<body>
</body>
</html>
<!--
css3属性：渐变、2d、3d、文本阴影...
渐进增强：
煤油灯 蜡烛 钨丝灯 白炽灯 led灯
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级：
劳斯莱斯 奥迪 雪佛兰 五菱 公交车
针对高版本浏览器进行构建页面，保证最佳的功能、用户体验，然后再针对低级浏览器进行效果、交互兼容
-->七、知识点梳理
<!--
1.逐帧动画
animation-timing-function:step-start;
2.h5:
语义化标签：
section
main
header
footer
nav
article
figure+figcaption
aside
time
mark
dialog
...
3.多媒体标签：
视频：
<video controls loop autoplay muted poster="图片路径">
<source type="" src="">
</video>
音频：
<audio controls loop autoplay muted >
<source type="" src="">
</audio>
4.h5表单：
type新增：
email
range
url
number
date
color
month
....
新增属性：
required
autocompelete="on / off"
placeholder=""
min
max
step
pattern
list
...
新增的标签：
<datalist>
<option></option>
</datalist>
output
5.渐进增强
优雅降级
-->
标签：12,translateZ,--,transform,rotateY,HTML5,background,600px,第一阶段 来源： https://blog.csdn.net/weixin_44202489/article/details/111364809