什么是HTML5
HTML5新增标签
HTML5新增表单元素属性
CSS3结构选择器
CSS3结构伪类选择器
CSS3伪元素
CSS3-2D转换(translate)
CSS3-2D转换(rotate、scale)
2D转换的案例
CSS3-3D转换(位移,缩放,旋转)
转换的其他属性(保留3D,透视)
网页中的坐标,旋转中心轴
完成3D导航案例
CSS3-动画的使用
CSS3-动画的属性
动画的案例
浏览器私有前缀
HTML5
定义了 HTML
标准的最新版本,是对 HTML
的第五次重大修改,号称下一代的 HTML
HTML
语言,定义了新的标签、特性和属性HTML5
、CSS3
、javascript
, 这也是广义上的 HTML5
2D
、3D
CSS3
特性HTML5 的现状
绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,
总的来说:HTML5
已经是大势所趋
什么是语义化
新增了那些语义化标签
header
— 头部标签nav
— 导航标签article
— 内容标签section
— 块级标签aside
— 侧边栏标签footer
— 尾部标签IE9
浏览器中,需要把语义化标签都转换为块级元素HTML5
新增的了很多的语义化标签。了解更多:HTML5audio
video
audio
标签说明audio 支持的音频格式
5、audio 代码演示
<video src="./media/video.mp4" controls="controls">video>
<body>
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
video>
body>
什么是 CSS3
CSS2
的基础上拓展、新增的样式CSS3
发展现状
PC
端CSS3
目前还草案,在不断改进中CSS3
相对 H5
,应用非常广泛属性选择器列表
button {
cursor: pointer;
}
button[disabled] {
cursor: default
}
input[type=search] {
color: skyblue;
}
span[class^=black] {
color: lightgreen;
}
span[class$=black] {
color: lightsalmon;
}
span[class*=black] {
color: lightseagreen;
}
ul li:first-child {
background-color: lightseagreen;
}
ul li:last-child {
background-color: lightcoral;
}
ul li:nth-child(3) {
background-color: aqua;
}
nth-child 详解
注意:本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字,就是选中第几个
常见的关键字有 even
偶数、odd
奇数
常见的公式如下(如果 n 是公式,则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略
区别
nth-child
选择父元素里面的第几个子元素,不管是第几个类型nt-of-type
选择指定类型的元素伪类选择器注意事项
before
和 after
必须有 content
属性before
在内容前面,after 在内容后面before
和 after
创建的是一个元素,但是属于行内元素
Dom
中查找不到,所以称为伪元素代码演示
p {
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
position: relative;
}
p::after {
content: '\ea50';
font-family: 'icomoon';
position: absolute;
top: -1px;
right: 10px;
}
2D
转换2D
转换是改变标签在二维平面上的位置和形状
移动: translate
旋转: rotate
缩放: scale
translate
语法 transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
重点知识点
2D
的移动主要是指 水平、垂直方向上的移动translate
最大的优点就是不影响其他元素的位置translate
中的100%单位,是相对于本身的宽度和高度来进行计算的,经常用于使盒子水平垂直居中代码演示
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px)
}
rotate 旋转
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
rotate 语法
/* 单位是:deg */
transform: rotate(度数)
rotate
里面跟度数,单位是 deg
img:hover {
transform: rotate(360deg)
}
div::after {
content: "";
display: block;
width: 5px;
height: 5px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
transform: rotate(45deg);
}
transform-origin: x y;
center
center
top
、bottom
、left
、right
、center
)scale
的作用
语法
transform: scale(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)
}
transform: translate() rotate() scale()
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
3D
的特点
三维坐标系
x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值
y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值
z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值
3D
转换知识要点
3D
位移:translate3d(x, y, z)
3D
旋转:rotate3d(x, y, z)
perspctive
3D
呈现 transfrom-style
3D
移动 translate3d
3D
移动就是在 2D
移动的基础上多加了一个可以移动的方向,就是 z 轴方向transform: translateX(100px)
:仅仅是在 x 轴上移动transform: translateY(100px)
:仅仅是在 y 轴上移动transform: translateZ(100px)
:仅仅是在 z 轴上移动transform: translate3d(x, y, z)
:其中x、y、z 分别指要移动的轴的方向的距离 transform: translate3d(x, y, z)
transform: translate3d(100px, 100px, 100px)
/* 注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)
何为透视
3D
效果需要透视(理解成 3D
物体投影的 2D
平面上知识要点
d:就是视距,视距就是指人的眼睛到屏幕的距离
z:就是 z 轴,z 轴越大(正值),我们看到的物体就越大
body {
perspective: 1000px;
}
translateZ
与 perspecitve
的区别perspecitve
给父级进行设置,translateZ
给 子元素进行设置不同的大小3D 旋转指可以让元素在三维平面内沿着 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 为角度代码案例
div {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(-45deg)
}
左手准则
左手的手拇指指向 x 轴的正方向
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(180deg)
}
左手准则
左手的拇指指向 y 轴的正方向
其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(180deg)
}
transform: rotate3d(x, y, z, deg)
– 沿着自定义轴旋转 deg 为角度transform: rotate3d(1, 1, 0, 180deg)
– 沿着对角线旋转 45degtransform: rotate3d(1, 0, 0, 180deg)
– 沿着 x 轴旋转 45deg div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotate3d(1, 1, 0, 180deg)
}
transform-style
transform-style: flat
代表子元素不开启 3D
立体空间,默认的transform-style: preserve-3d
子元素开启立体空间
-
"befor">陈稳
"after">很酷
-
"befor">陈稳
"after">很酷
-
"befor">陈稳
"after">很酷
-
"befor">陈稳
"after">很酷
-
"befor">陈稳
"after">很酷
-
"befor">陈稳
"after">很酷
注意:对于3D呈现,一定要写给亲爸爸。
什么是动画
CSS3
中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果动画的基本使用
语法格式(定义动画)
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
动画序列
from
和 to
,等同于 0% 和 100% 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: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
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
: 规定动画的速度曲线,默认是ease
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;
}
100% {
width: 480px;
}
}
注意:steps()
可让动画一步步推进
"father">
"box">
注意:动画想要做的更加细腻,还要结合图片的大小进行相应的调整。
注意:动画跟旋转的结合往往可以胜任简单的js效果
浏览器的私有前缀,是为了兼容老版本的写法,比起新版本浏览器无需添加
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
注意:兼容性写法中必须有常规写法的存在
还有好多好多新特性,本文就列举些web开发中常用的一些特性,希望可以帮助大家巩固基础。
最后希望大家可以不断突破,成为一名合格的程序猿。Come on baby