HTML5新属性+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	限制用户输入必须为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;}
}

HTML5新属性+CSS3动画相关推荐

8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
纯html css动画效果,8个超震撼的HTML5和纯CSS3动画源码
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
HTML5新属性 Canves的整体学习
大家好.好久没见了,萍子也已经好久都没更新博文了,嘻嘻,有没有想念萍子啊.最近有点事情需要处理,所以大致请了半个月的假,呼呼~这半个月的假期过去再回来摸键盘码代码,感觉脑子一片空白啊,多尴尬啊,这个& ...
html animation 属性,CSS3动画属性：动画(animation)
一:动画(animation)的参数详解由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
HTML5 新属性contenteditable
今天偶然看见这个属性,可以把一个div,span,td等元素聚焦的时候可以直接变成输入框,改里面的数值,失焦的时候变成原来的元素,内部的值改了 <div contenteditable=&qu ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
html5新标签和css3的新属性
html5新特性较为常用的有:<artical></artical>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,总之久是可以连接外部类似文章的东西.< ...

HTML5新属性+CSS3动画

HTML5

一、什么是HTML5

1.1 HTML5 的概念与定义

1.1.1 HTML5拓展内容

1.1.2 HTML5新增标签

1.1.3 多媒体音频标签

1.1.3.1 audio

1.1.3.1 video

1.1.4 新增input标签

1.1.5 新增input表单属性

1.1.6 属性/结构伪类选择器

1.1.7 伪元素选择器

1.1.8 2D转换

1.1.8.1 translate

1.1.8.2 rotate

1.1.8.3 scale

1.1.9 元素旋转中心点

1.1.10 2D 转换综合写法以及顺序问题

1.1.11 动画

HTML5新属性+CSS3动画相关推荐

最新文章

热门文章