本文详细介绍了HTML5的新特性，包括新增的语义化标签如<header>、<nav>等，视频和音频标签<video>、<audio>，新的input类型和表单属性。此外，还深入探讨了CSS3的过渡效果、2D和3D转换，如旋转、缩放和移动，以及如何使用属性选择器、结构伪类和伪元素选择器。最后，文章展示了如何创建动画和使用3D转换实现更复杂的效果。
目录
1 HTML5新特性🔥
HTML5添加了新标签、表单、表单属性；都有兼容性问题，支持IE9+以上版本浏览器
1.1 新增语义化标签
<body>
<!-- <header></header>头部标签 -->
<!-- <nav></nav>导航标签 -->
<!-- <article></article>内容标签 -->
<!-- <section></section>定义文档某个区域 -->
<!-- <aside></aside>侧边栏标签 -->
<!-- <footer></footer>尾部标签 -->
</body>
1.2 视频标签<video>
<body>
<video width="320px" height="240px" autoplay="true" muted="muted" controls="true"
loop="loop" poster="">
<source src="20.mp4" type="video/mp4" ></source>
<source src="20.ogg" type="video/ogg" ></source>
</video>
</body>
1.3 音频<audio>
<body>
<audio autoplay="true" loop="loop" controls="true">
<source src="huibao.mp3" ></source>
</audio>
</body>
1.4 新增input类型
<form action="#">
邮箱：<input type="email" name="" id=""><br>
号码：<input type="tel" name="" id=""><br>
日期：<input type="time" name="" id=""><br>
时间：<input type="date" name="" id=""><br>
搜索：<input type="search" name="" id=""><br>
<input type="submit" value="submit">
</form>
他会自己省查元素！
1.5 新增表单属性
<style>
input::placeholder {
color: skyblue;
}
</style>
</head>
<body>
<form action="#">
<input type="search" name="ser" id=""
required="required" placeholder="abcde"
autofocus="true" autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="submit">
</form>
</body> 
2 CSS新特性 🔥
1.属性选择器 2.结构伪类选择器 3.伪元素选择器
2.1 属性选择器
<style>
input[value] {
color: pink;
}
div[class=icon1] {
color: purple;
}
div[class^=ico]{
color: skyblue;
}
div[class$=on3] {
color: springgreen;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="ABCD">
<input type="text" name="" id="">
<div class="icon1">icon1</div>
<div class="icon2">icon2</div>
<div class="icon3">icon3</div>
<div class="iicon3">iicon3</div>
<div class="icon4">icon4</div>
<div class="nav">navnav</div>
</body> 
2.2 结构伪类选择器
| first-chid | 第一个孩子 |
| last-child | 最后一个孩子 |
| nth-child(n) | 选择第n个孩子 |
| nth-child(n+3) | 从第三个孩子开始 |
| nth-child(-n+3) | 前三个孩子 |
| nth-child(even) | 偶数孩子 |
| nth-child(odd) | 奇数孩子 |
| nth-of-type(n) | 选择第n个孩子 |
| nth-of-type(even) | 偶数孩子 |
| nth-of-type(odd) | 奇数孩子 |
<style>
li {
list-style: none;
}
/* ul li:first-child {
color: pink;
}
ul li:last-child {
color: purple;
}
ul li:nth-child(2) {
color: skyblue;
} */
/* 偶数 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 奇数 */
ul li:nth-child(odd) {
background-color: pink;
}
/* ol li:nth-child(n) {
color: skyblue;
} */
/* 偶数 */
/* ol li:nth-child(2n) {
color: skyblue;
} */
/* 奇数 */
ol li:nth-child(2n-1) {
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
</ul>
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
</ol>
</body>
2.3 伪元素选择器
before after是在父元素里面创建的，他们都是盒子，且不能直接设置大小（行内元素要转换）且再body里是找不到滴。权重为1。必须有content属性，内容写到’ '内。
<style>
.box::before {
content: '我';
color: skyblue;
}
.box::after {
content: '你';
color: pink;
}
</style>
</head>
<body>
<div class="box">
是
</div>
</body>
注意：
before和after其实都是父元素的孩子都是伪元素；
before和after创建的元素都是行内元素；
before和after必须有centent属性；
before是父元素前面插入，after是父元素后面插入；
伪元素和标签元素的权重一样都是1；
伪元素清除浮动的本质
2.4 过渡
transition: 要过渡的属性 花费的时间 运动曲线 何时开始;
运动曲线默认是ease(逐渐缓慢下来)、linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速).
<style>
.box {
margin: auto;
width: 200px;
height: 200px;
background-color: skyblue;
transition: all 1s;
}
.box:hover {
width: 250px;
height: 250px;
background-color: pink;
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
3 2D转换🔥
3.1 移动transform
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
x和y是根据网页的坐标轴移动的。
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* margin: 100px auto; */
transition: all 1s;
}
.box:hover {
/* transform: translate(100px,100px); */
/* transform: translateX(100px); */
transform: translateY(100px);
}
.boxb {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="boxb"></div>
</body>
鼠标点击后： 
由上图可见transform移动不影响其他盒子的布局。
transform的参数可以是百分比的形式，代表是该盒子长度和宽度的百分比值。
子盒子垂直居中
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
/* margin: 100px auto; */
transition: all 1s;
}
.boxb {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%,-50%);
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="boxb"></div>
</div>
</body> 
3.2 旋转
transform: rotate(45deg);
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
运行后：
当他的参数是负值时，它会逆时针旋转。
3.3 2D转换中心transform-origin
transform-origin: left bottom;
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
}
.box:hover {
transform-origin: left bottom;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>中心点为左下。
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点（50% 50%）
- 还可以给 x y 设置像素或者方位名词（top bottom left right center）
3.4 2D转换之缩放
transform: scale(x, y);
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
}
.box:hover {
transform: scale(1.5,1.5);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
3.5 2D转换综合写法
transform: translateX(300px) rotate(360deg) scale(1,1);
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
transition: all 1s;
}
.box:hover {
transform: translateX(300px) rotate(360deg) scale(1,1);
}
.boxb {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"> </div>
<div class="boxb"></div>
</body>
4 动画🔥
动画( animation ) 是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
4.1 基本使用
<style>
/* 1.定义动画 */
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和“to”，等同于0%和100%。
4.2 动画常用属性
<style>
/* 1.定义动画 */
@keyframes move {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(1000px);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0px,500px);
}
100% {
transform: translate(0px,0px);
}
}
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 10s;
/* 动画的速度曲线 */
animation-timing-function: ease;
/* 动画何时开始 */
animation-delay: 0s;
/* 动画被播放的次数 */
/* animation-iteration-count: infinite; */
/* 动画是否在下一周期逆向播放 默认是 "normal",alternate逆播放 */
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>4.3 动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: move 5s linear 2s infinite alternate;
简写属性里面不包含 animation-play-state
暂停动画: animation-play-state: puased;
经常和鼠标经过等其他配合使用想要动画走回来，而不是直接跳回来: animation-direction: alternate
盒子动画结束后，停在结束位置: animation-fill-mode: fo
5 3D转换🔥
5.1 移动
3D移动是根据x、y、z轴移动的，就像高中数学的三维坐标系一样。
3D的移动与2D的相似。
transform: translate3d(100px,100px,100px);
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/*
X轴移动100px
transform: translateX(100px);
Y轴移动100px
transform: translateY(100px);
Z轴移动100px
transform: translateZ(100px); */
transform: translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
因为沿Z轴移动好比如是向我们眼前移动所以无明显变化。
5.2 透视
perspective(n)
定义 3D 转换元素的透视视图。
当perspective(n)，n的值越小盒子离我们越近，所以看到的盒子就越大。
注意：perspective要往它的父盒子上加。
body {
perspective: 200px;
}
5.3 旋转
与2D旋转的道理一样。
transform: rotate3d(1,1,0,45deg);
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
}
.box:hover {
/*
沿X轴旋转
transform: rotateX(45deg);
沿Y轴旋转
transform: rotateY(45deg);
沿Z轴旋转
transform: rotateZ(45deg); */
transform: rotate3d(1,1,0,45deg);
}
body {
perspective: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>使用 rotate3d(1,1,0,45deg);时注意因为沿x、y、z轴旋转时是矢量所以他会计算。
5.4 3D呈现
当要给父盒子和子盒子都添加旋转效果需要用到3D呈现。
transform-style: preserve-3d;
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(45deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: skyblue;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body> 
6 结束
CSSweb篇完美结束！如有问题请多指教！
完结撒花！！！
扫一扫
5320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
