导图社区编程基础5：HTML5CSS3进阶

编程基础5：HTML5CSS3进阶

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列；在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果。

编辑于2022-12-01 20:08:58 四川省

思维导图小能手

他的近期作品查看更多>>

编程基础5：HTML5CSS3进阶

社区模板帮助中心，点此进入>>

思维导图小能手

他的近期作品查看更多>>

相似推荐
大纲

英语词性
- 58.5k
- 6.4k
- 2.4k
- 581
- 0
Ethan
互联网9大思维
- 34.5k
- 939
- 2.4k
- 396
- 0
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 14.8k
- 3
- 185
- 9
- 0
Kacyun
法理
- 25.2k
- 65
- 371
- 52
- 0
Dasein
刑法总则
- 34.2k
- 147
- 958
- 158
- 0
Dasein
【华政插班生】文学常识-先秦
- 1.3k
- 4
- 70
- 2
- 0
Dasein
【华政插班生】文学常识-秦汉
- 846
- 0
- 54
- 10
- 0
Dasein
文学常识：魏晋南北朝
- 2.3k
- 3
- 90
- 20
- 0
Dasein
【华政插班生】文学常识-隋唐五代
- 2.0k
- 8
- 98
- 6
- 0
Dasein
民法分论
- 6.0k
- 37
- 290
- 29
- 0
Dasein

HTML5+CSS3进阶

1：HTML5(复习)

新增语义标签

header --- 头部标签

nav --- 导航标签

article --- 内容标签

section --- 块级标签

aside --- 侧边栏标签

footer --- 尾部标签

新增多媒体标签

音频 -- audio

可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，

视频 -- video

总结

音频标签与视频标签使用基本一致

多媒体标签在不同浏览器下情况不同，存在兼容性问题

谷歌浏览器把音频和视频标签的自动播放都禁止了

谷歌浏览器中视频添加 muted 标签可以自己播放

注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

新增表单属性及type类型

新增 input 标签类型

type="email" 限制用户输入必须为Emd类型

type="url" 限制用户输入必须为URL类型

type="date" 限制用户输入必须为日期类型

type= "time" 限制用户输入必须为时间类型

type="month" 限制用户输入必须为月类型

type="week" 限制用户输入必须为周类型

type="number" 限制用户输入必须为数字类型

type="tel" 手机号码

type="search" 搜索框

type="color" 生成一个颜色选择表单

新增表达属性

required="required" 表单拥有该属性表示其内容不能为空，必填

placeholder="提示文本(占位符)" 表单的提示信息，存在默认值将不显示

autofocus="autofocus" 自动聚焦属性，页面加载完成自动聚焦到指定表单

autocomplete="on/off" 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项；默认已经打开，需要放在表单内同时加上name属性,并成功提交

multiple="multiple" 可以多选文件提交

2：CSS3(复习)

属性选择器

E[ata] 选择具有att属性的E元素

E[att="val"] 选择具有 att 属性且属性值等于 val 的 E 元素

/* 只选择 type =text 文本框的input 选取出来 */ input[type=text] { color: pink; }

E[att^="val"] 匹配具有 att 属性且值以 val 开头的 E 元素

/* 选择首先是div 然后具有class属性并且属性值必须是 icon开头的这些元素 */ div[class^=icon] { color: red; }

E[att$="val"] 匹配具有 att 属性目值以 val 结尾的 E 元素

/* 选择首先是section 然后具有class属性并且属性值必须是 data结尾的这些元素 */ section[class$=data] { color: blue; }

E[att*="val"] 匹配具有 att 属性且值中含有 val 的 E 元素

结构伪类选择器

E:first-child

匹配父元素的第一个子元素E

列表项一列表项二列表项三列表项四

E:nth-child(n)

ul li:nth-child(2){} 匹配到父元素的第2个子元素

ul li:nth-child(odd){} 匹配到父元素的序号为奇数的子元素

ul li:nth-child(-n+3){} 匹配到父元素的前3个子元素

伪元素选择器

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

3：CSS3-2D转换

2D 转换是改变标签在二维平面上的位置和形状

移动 translate

旋转 rotate

旋转中心点 transform-origin

缩放 scale

translate

transform: translate(x, y)

transform: translateX(n)

transfrom: translateY(n)

x 就是 x 轴上水平移动

y 就是 y 轴上水平移动

不影响其他元素的位置

100%单位，是相对于本身的宽度和高度来进行计算的

rotate

让元素在二维平面内顺时针或者逆时针旋转

transform: rotate(度数) /* 单位是：deg */

角度为正时，顺时针，角度为负时，逆时针

默认旋转的中心点是元素的中心点

transform-origin

transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开

x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center

还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

scale

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

transform: scale(2,3);

scale（2,3：转变宽度为原来的大小的2倍，高度为原来大小3倍的。

4：CSS3-动画(animation)

定义动画

@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%

1.可以做多个状态的变化 keyframe 关键帧 2.里面的百分比要是整数 3.里面的百分比就是总的时间（这个案例10s）的划分

使用动画

div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间； }

动画常见属性

@keyframes 规定动画 ;

animation 所有动画属性的简写属性，除了 animation-play- state属性；

animation-name 规定 keyframes动画的名称。（必须的）；

animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）；

animation-timing-function 规定动画的速度曲线，默认是"ease” ；

animation-delay 规定动画何时开始，默认是0 ;

animation-iteration-count 规定动画被播放的次数，默认是1，还有 infinite

animation-direction 规定动画是否在下一周期逆向播放，默认是“ normal" alternate 逆播放

animation-play-state 规定动画是否正在运行或暂停。默认是 running，还有" paused"

animation-fill-mode 规定动画结束后状态，保持 forwards回到起始 backwards

动画简写方式

/* animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode

简写属性里面不包含 animation-paly-state

暂停动画 animation-paly-state: paused ; 经常和鼠标经过等其他配合使用

要想动画走回来，而不是直接调回来：animation-direction: alternate

盒子动画结束后，停在结束位置：animation-fill-mode: forwards

代码演示：animation: move 2s linear 1s infinite alternate forwards;

速度曲线细节 animation-timing-function

animation-timing-function : 规定动画的速度曲线，默认是`ease`

linear 从头到尾的速度是相同的。匀速

ease 默认。动画以低速开始，然后加快，在结束前变慢

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束。

steps() 指定了时间函数中的间隔数量（步长）

5：CSS3-3D旋转

三位坐标

x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值

3D位移 - translate3d(x, y, z)

语法： transform: translate3d(x, y, z)

/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */ transform: translate3d(100px, 100px, 0)

3D透视 - perspctive

- 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离； - 距离视觉点越近的在电脑平面成像越大，越远成像越小； - 透视的单位是像素；

透视需要写在被视察元素的父盒子上面

perspecitve 给父级进行设置，translateZ 给子元素进行设置不同的大小

3D旋转 - rotate3d(x, y, z)

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度

transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度

transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

3D呈现 - transfrom-style

控制子元素是否开启三维立体环境

transform-style: flat 代表子元素不开启 3D 立体空间，默认的

transform-style: preserve-3d 子元素开启立体空间

代码写给父级，但是影响的是子盒子