欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5新属性+CSS3动画

程序员文章站 2022-06-24 10:40:34
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 --- 尾部标签

HTML5新属性+CSS3动画
语义化标签的注意点

  • 语义化标签主要针对搜索引擎
  • 新标签可以使用一次或者多次
  • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
  • 语义化标签，在移动端支持比较友好，
1.1.3 多媒体音频标签

  1. 多媒体标签有两个，分别是
    音频 – audio
    视频 – video

  2. 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 限制用户输入必须为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 属性/结构伪类选择器

HTML5新属性+CSS3动画
HTML5新属性+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>
    <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)

注意:

  1. 2D 的移动主要是指 水平、垂直方向上的移动
  2. translate 最大的优点就是不影响其他元素的位置
  3. translate中的100%单位，是相对于本身的宽度和高度来进行计算的
  4. 行内标签没有效果
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

相关标签： web前端 css html基础 html5 html css3

上一篇： Laravel中批量赋值Mass-Assignment的真正含义详解

下一篇： Powershell实现获取电脑序列号功能脚本分享

推荐阅读