HTML5新属性+CSS3动画
程序员文章站
2022-03-13 21:34:33
HTML5一、什么是HTML51.1 HTML5 的概念与定义定义： HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、 CSS3 、javascript , 这也是广义上的 HTML51.1.1 HTML5拓展内容语义化标签本地存储兼容特性2D 、 3D动画、过渡CSS3 特性性能与集成绝对多数新...
HTML5
一、什么是HTML5
1.1 HTML5 的概念与定义
- 定义： HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
两个概念： - 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、 CSS3 、
javascript , 这也是广义上的 HTML5
1.1.1 HTML5拓展内容
- 语义化标签
- 本地存储
- 兼容特性
- 2D 、 3D
- 动画、过渡
- CSS3 特性
- 性能与集成
绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，
总的来说： HTML5 已经是大势所趋
1.1.2 HTML5新增标签
header --- 头部标签
nav --- 导航标签
article --- 内容标签
section --- 块级标签
aside --- 侧边栏标签
footer --- 尾部标签
语义化标签的注意点
- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在
IE9浏览器中，需要把语义化标签都转换为块级元素 - 语义化标签，在移动端支持比较友好，
1.1.3 多媒体音频标签
-
多媒体标签有两个，分别是
音频 – audio
视频 – video -
audio 标签说明
可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
但是：播放格式是有限的
1.1.3.1 audio
audio属性有:
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示控件，如播放暂停按钮 |
| loop | loop | 循环播放 |
| src | url | 需要播放音频的地址 |
示例：
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="./01.mp3">
<source src="./01.ogg">
您的浏览器不支持此格式
</audio>
1.1.3.1 video
video属性有:
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示控件，如播放暂停按钮 |
| loop | loop | 循环播放 |
| src | url | 视频的地址 |
| width | 像素 | 设置播放器宽度 |
| height | 像素 | 设置播放器高度 |
| preload | auto预加载视频 none不预加载 | 是否加载视频 有autoplay忽略该属性 |
| poster | 图片地址 | 等待加载时出现的图片 |
| muted | muted | 静音播放 |
代码示例：
<video controls="controls" autoplay="autoplay" loop="loop">
<source src="./01.mp4">
<source src="./01.ogg">
您的浏览器不支持此格式
</video>
注：
谷歌浏览器不支持自动播放
音频标签与视频标签使用基本一致
多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器中视频添加 muted 标签可以自己播放
1.1.4 新增input标签
| 属性值 | 说明 |
|---|---|
| 限制用户输入必须为email类型 | |
| url | 必须为url类型 |
| date | 必须为日期类型 |
| time | 必须为时间类型 |
| month | 必须为月份 |
| week | 必须为周 |
| number | 必须为数字类型 |
| tel | 手机号 |
| search | 搜索框 |
| color | 生成一个颜色选择表单 |
1.1.5 新增input表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 不能为空，必填 |
| placeholder | 提示文字 | 表单提示信息 |
| autofocus | autofocus | 自动聚焦 |
| autocomplete | off/on | 显示/隐藏历史记录 必须在表单内添加name属性 |
| multiple | multiple | 多文件上传 |
1.1.6 属性/结构伪类选择器
代码示例：
<!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>
/* 注意单引号不起作用 */
section[class="first"] {
color: blue;
}
/* 匹配开头为t的 */
section[class^="t"] {
color: green;
}
/* 匹配结束为d的 */
section[class$="d"] {
color: rgb(0, 217, 255);
}
/* 只要有r就可以匹配 */
section[class*="r"] {
font-weight: 900;
color: orange;
}
/* 找第一个section 因为第一个子元素不是section 所以无变化 */
article section:first-child {
color: red;
}
/* 找第一个为section的 */
article section:first-of-type {
color: red;
}
/* 不按照下标 第几个就是第几个 */
article section:nth-child(1) {
color: green;
}
/* 指定最后一个section */
article section:last-of-type {
color: red;
}
/* 指定第3个section */
article section:nth-of-type(3) {
color: skyblue;
}
/* 隔行变色 even为偶数 odd为奇数 */
article section:nth-child(even) {
color: red;
}
/* 前两个section变色 前几个*/
article section:nth-child(-n+2) {
color: skyblue;
}
/* 后两个section变色 从第几个开始 */
article section:nth-child(n+3) {
color: blue;
}
/* 取2的倍数变色 */
article section:nth-child(2n) {
color: red;
}
</style>
</head>
<body>
<article>
<!-- <h5>我是标题</h5> -->
<section class="first">我是第一个块</section>
<section class="second">我是第二个块</section>
<section class="third">我是第三个块</section>
<section class="forth">我是第四个块</section>
</article>
</body>
</html>
nth-child()详解
- 注意：本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字，就是选中第几个
- 常见的关键字有 even 偶数、 odd
奇数 - 常见的公式如下(如果 n 是公式，则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略
1.1.7 伪元素选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
- 伪类选择器注意事项
- before 和 after 必须有 content 属性
- before 在内容前面，after 在内容后面
- before 和 after
- 创建的是一个元素，但是属于行内元素
- 创建出来的元素在 Dom 中查找不到，所以称为伪元素
- 伪元素和标签选择器一样，权重为 1
1.1.8 2D转换
移动： translate
旋转： rotate
缩放： scale
1.1.8.1 translate
transform: translate(x, y) //x 就是 x 轴上水平移动 y 就是 y 轴上水平移动
transform: translateX(n)
transfrom: translateY(n)
注意:
- 2D 的移动主要是指 水平、垂直方向上的移动
- translate 最大的优点就是不影响其他元素的位置
- translate中的100%单位，是相对于本身的宽度和高度来进行计算的
- 行内标签没有效果
1.1.8.2 rotate
transform: rotate(度数) /* 单位是：deg */
注意:
- rotate 里面跟度数，单位是 deg
- 角度为正时，顺时针，角度为负时，逆时针
- 默认旋转的中心点是元素的中心点
1.1.8.3 scale
transform: scale(x, y)
注意:
- x 与 y 之间使用逗号进行分隔
- transform: scale(1, 1) : 宽高都放大一倍，相当于没有放大
- transform: scale(2, 2) : 宽和高都放大了二倍
- transform: scale(2) :如果只写了一个参数，第二个参数就和第一个参数一致
- transform:scale(0.5, 0.5) : 缩小
- scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
示例：
div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
transform: scale(2, 2)
/* 实现等比缩放，同时修改宽与高 */
transform: scale(2)
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
1.1.9 元素旋转中心点
transform-origin: x y;
注意:
- 注意后面的参数 x 和 y 用空格隔开 x y
- 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
- 还可以给 x y 设置像素或者方位名词( top 、 bottom 、 left 、 right 、 center)
1.1.10 2D 转换综合写法以及顺序问题
- 同时使用多个转换，其格式为 transform: translate() rotate() scale()
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
示例：
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
1.1.11 动画
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
动画的基本使用
先定义动画
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
在调用定义好的动画
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 from 和 to ，等同于 0% 和 100%
重点：
动画的常见属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性 除animation-play-state属性 |
| animation-name | 动画名称 （必须有） |
| animation-duration | 规定动画完成所花费的时间 默认为0 （必须有） |
| animation-timing-function | 规定动画的速度曲线 默认是 “ease” |
| animation-delay | 规定动画什么时候开始 默认为0 |
| animation-iteration-count | 规定播放的次数 默认为1 |
| animation-direction | 规定动画是否在下一周期逆行播放 默认normal alternate逆播放 |
| animation-play-state | 规定动画是否运行或停止 默认running 还有pushed |
| animation-fill-mode | 规定动画结束后的状态，保持forwas 回到起始backwards |
代码演示：
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
动画简写方式
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 1s ease-in-out 1s infinite alternate forwards;
/* 动画： 动画名 完成时间 运行曲线 等待时长 播放次数（infinite一直重复） 是否逆行播放 结束状态 */
}
速度运行曲线
animation-timing-function : 规定动画的速度曲线，默认是 ease
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 默认 动画以低速开始 然后加快 在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 制定了时间函数中的建个数量 即步长 |
代码示例
div {
width: 0px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
background-color: aquamarine;
animation: move 4s steps(24) forwards;
}
@keyframes move {
0% {
width: 0px;
}
}
本文地址：https://blog.csdn.net/Web_chicken/article/details/112275951