HTML5与CSS3的新特性
1、HTML5新特性
1.1、新特性的兼容问题
HTML5
的新增特性主要是针对以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是IE9+
以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。
1.2、HTML5新增的语义化标签
以前布局,我们基本使用div来做,div对于搜索引擎来说,是没有语义的。例如:
<!--指明导航链接, 头部, 以及尾部等,以前都是我们自定义,没有语义-->
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
所以为了使元素能够清楚的描述其意义给浏览器和开发者,HTML5
新增了语义元素,也叫语义化标签。常用的有以下几个:
<header>
:头部标签<nav>
:导航标签<article>
:内容标签<section>
:定义文档某个区域<aside>
:侧边栏标签<footer>
:尾部标签
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,nav {
width: 900px;
height: 90px;
background-color: rgb(120, 185, 21);
border-radius: 15px;
margin: 10px auto;
}
section {
width: 500px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>
效果图:
注意:
- 这种语义化标签主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中,需要把这些元素转换为块级元素,因为在IE9中新标签默认不是块级元素
- 其实,我们一定端更喜欢使用这些标签
- HTML5中还增加了很多其他的标签,以后接触到时,可自行学习
更多可查看菜鸟教程:https://www.runoob.com/html/html5-intro.html
1.3、HTML5新增的多媒体标签
新增的多媒体标签主要包含如下两个:
<video>
视频<audio>
音频
使用它们可以很方便的在页面中嵌入音频和视频,而不是再去使用flash和其他浏览器插件。
HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然支持的格式是有限的。
1、视频<video>
标签的使用:
<video>
标签定义视频,比如电影片段或其他视频流。
目前,<video>
元素支持三种视频格式:MP4、WebM、Ogg。
- MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
语法:
<video src="文件地址" controls="controls"></video>
<!--也可以这样书写,先看浏览器支不支持mp4,不支持再看ogg,在不支持就显示您的浏览器不支持 video 标签。 元素。-->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
可选属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
controls | controls | 向用户显示播放控件 |
width | pixels(像素) | 设置播放器宽度 |
height | pixels(像素) | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto(预先加载视频) none(不应加载视频) | 规定是否预加载视频(如果有了autoplay 就忽略该属性) |
src | url | 视频URL地址 |
poster | imgrul | 加载等待的画面图片 |
muted | muted | 静音播放 |
使用示例:小米官网小米11视频。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<video
src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.mp4"
autoplay="autoplay"
muted="muted"
controls="controls"
loop="loop"
poster="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.png"
></video>
</body>
</html>
2、音频<audio>
标签的使用:
<audio>·
标签定义声音,比如音乐或其他音频流。
目前,<audio>
元素支持的3种文件格式:MP3、Wav、Ogg。
语法:
<audio src="文件地址" controls="controls"></audio>
<!-- 另一种写法,依次判断浏览器支持的格式 -->
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
提示:可以在 <audio>
和 </audio>
之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio>
标签的浏览器中。
常见属性:
属性 | 值 | |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 |
muted | muted | 如果出现该属性,则音频输出为静音。 |
preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
src | URL | 规定音频文件的 URL |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
注意:谷歌浏览器吧音频和视频自动播放禁止了。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--注意此标签是行内元素-->
<audio
src="https://webfs.yun.kugou.com/202103031105/0e19f0d587042c37572df689e419d9ef/KGTX/CLTX001/f8784ebfbae36b324ec1e3441b6156b4.mp3"
autoplay="autoplay"
controls="controls"
></audio>
<audio
src="https://webfs.yun.kugou.com/202103031105/0e19f0d587042c37572df689e419d9ef/KGTX/CLTX001/f8784ebfbae36b324ec1e3441b6156b4.mp3"
autoplay="autoplay"
controls="controls"
></audio>
</body>
</html>
效果图:
多媒体标签总结:
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频或音频标签添加
muted
属性来静音播放视频或音频。 - 视频标签是重点,我们经常设置自动播放,不使用
controls控件
,循环和设置大小属性。
1.4、HTML5新增的 input 类型
在小米官网中搜索框里的type类型变成了search
,在 HTML5中, <input>
添加了几个属性,并且添加了对应的值。
更多属性可查看菜鸟教程:https://www.runoob.com/tags/tag-input.html
例如:新增加常用的属性值有
属性值 | 说明 |
---|---|
type=“email” | 限制用户输入必须为Email类型 |
type=“url” | 限制用户输入必须为URL类型 |
type=“date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“month” | 限制用户输入必须为月类型 |
type=“week” | 限制用户输入必须为周类型 |
type=“number” | 限制用户输入必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
案例:测试以上属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
list-style: none;
}
</style>
</head>
<body>
<!-- 我们验证的时候必须添加 form 表单域 -->
<form action="#" method="get">
<ul>
<li>
邮箱:<input type="email">
</li>
<li>
URL:<input type="url">
</li>
<li>
日期(年月日):<input type="date">
</li>
<li>
日期(时分):<input type="time">
</li>
<li>
月份:<input type="month">
</li>
<li>
星期:<input type="week">
</li>
<li>
数量:<input type="number">
</li>
<li>
搜索:<input type="search">
</li>
<li>
颜色表:<input type="color">
</li>
<li>
手机号码:<input type="tel">
</li>
<!-- 当我们提交时,即可验证输入类型是否正确 -->
<li>
<input type="submit" value="提交"></input>
</li>
</ul>
</form>
</body>
</html>
验证条件:
- 在form表单域内
- 提交时才会看到验证效果
1.5、HTML5新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off / on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如 autocomlete="on" ,关闭autocomlete="off" 需要放在表单内,同时加上name属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
/* 可以通过以下设置方式修改placeholder里面的字体颜色 */
input::placeholder {
color: blue;
}
测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input::placeholder {
color: blue;
}
</style>
</head>
<body>
<form action="" method="get">
<!--
required: 输入框内容必须书写
placeholder: 提示文本
autofocus: 自动获取聚焦
-->
<input type="search" required="required" placeholder="手机" autofocus="autofocus" autocomplete="off">
<input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html>
效果图:
2、CSS3新特性
2.1、CSS3的现状
首先需要注意的一点就是CSS3已完全向后兼容,所以我们就不必改变现有的设计。浏览器将永远支持CSS2。其次新增的CSS3特性有兼容性问题,IE9+的浏览器才支持。
CSS3被拆分为 “模块”。旧规范已拆分成小块,还增加了新的特性。
一些最重要CSS3新特性如下:
- 选择器
- 盒子模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
2.2、CSS3新增的选择器
CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
2.2.1、属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器。
语法:
选择符 | 描述 |
---|---|
E[attr] | 选择具有 attr属性 的 E 元素 |
E[attr=“value”] | 选择具有 attr属性 且属性值等于value的 E 元素 |
E[attr^=“value”] | 匹配具有 attr属性 且值以value开头的 E 元素 |
E[attr$=“value”] | 匹配具有 attr属性 且值以value结尾的 E 元素 |
E[attr*=“value”] | 匹配具有 attr属性 且值中含有value的 E 元素 |
注意:类选择器、属性选择器、伪类选择器,权重为10。
使用测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 属性选择器写法,选择input标签有value属性的元素 */
input[value] {
background-color: skyblue;
}
/* 选择input标签type属性等于password的元素 */
input[type="password"] {
color: red;
}
/* 选择div标签class属性值以icon开头的元素 */
div[class^="icon"] {
color: red; /* 统一设置为红色 */
}
</style>
</head>
<body>
<!-- 1.利用书写选择器可以不用借助于类或者id选择器 -->
<input type="text" value="hello">
<input type="text"><br>
<!-- 2.属性选择器还可以选择属性 = 值的某些元素 -->
<input type="text">
<input type="password" placeholder="密码">
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<!-- 可以自己测试 -->
</body>
</html>
效果图:
2.2.2、结构伪类选择器
结构伪类选择器主要根据文档结构
来选择元素,常用于根据父级元素里面的子元素。
语法:
选择符 | 描述 |
---|---|
E:first-child | 匹配父元素中的第一个子元素 E |
E:last-child | 匹配父元素中最后一个子元素 E |
E:nth-child(n) | 匹配父元素中的第 N 个子元素 E |
E:first-of-type | 指定类型 E 的第一个 |
E:last-of-type | 指定类型 E 的最后一个 |
E:nth-of-type(n) | 指定类型 E 的第 N 个 |
关于first-child
、last-child
、nth-child(n)
的测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择ul里的第1个子元素 */
ul li:first-child {
color: red;
}
/* 选择ul里的最后一个子元素 */
ul li:last-child {
color: blue;
}
/* 选择ul里的第3个子元素 */
ul li:nth-child(3) {
color: chartreuse;
}
</style>
</head>
<body>
<ul>
<li>我是ul的第1个孩子</li>
<li>我是ul的第2个孩子</li>
<li>我是ul的第3个孩子</li>
<li>我是ul的第4个孩子</li>
<li>我是ul的第5个孩子</li>
</ul>
</body>
</html>
效果图:
nth-child(n)
选择某个父元素的一个或多个特定的子元素。
- n 可以是数字,关键字和公式
- n 如果是数字,就是选择第n个子元素,里面数字从1开始。
- n 可以是关键字!例如
even
代表所有偶数,odd
代表所有奇数。 - n 可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式 | 取值 |
---|---|
2n | 偶数 |
2n + 1 | 奇数 |
5n | 5 10 15 … |
n + 5 | 从第5个开始(包含第5个)到最后 |
-n + 5 | 前5个(包含第5个)… |
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1、选择ul里的偶数子标签 */
ul li:nth-child(even) {
background-color: rgb(207, 202, 202);
}
/* 2、选择ul里的奇数子标签 */
ul li:nth-child(odd) {
background-color: rgb(167, 157, 157);
}
/* 3、nth-child(2n) 等效于 nth-child(even) 从0开始每次加1往后面计算。这里面必须是n 不能是其他的字母 */
ol li:nth-child(2n) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>我是ul的第1个孩子</li>
<li>我是ul的第2个孩子</li>
<li>我是ul的第3个孩子</li>
<li>我是ul的第4个孩子</li>
<li>我是ul的第5个孩子</li>
</ul>
<ol>
<li>我是ul的第1个孩子</li>
<li>我是ul的第2个孩子</li>
<li>我是ul的第3个孩子</li>
<li>我是ul的第4个孩子</li>
<li>我是ul的第5个孩子</li>
</ol>
</body>
</html>
效果图:
关于first-of-type
、last-of-type
、nth-of-type(n)
的测试:
值得注意的是。如果子元素类型都相同first-of-type
、last-of-type
、nth-of-type(n)
与first-of-type
、last-of-type
、nth-of-type(n)
最终呈现的效果是一样的。但是实现的方式有所区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* nth-child(n) 会把所有的盒子都排列序号。执行的时候首先看是第几个"孩子",之后回去看指定的元素div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type(n):会把指定元素(div)的盒子排列序号。执行的时候首先看指定的元素div,之后回去看是第几个"孩子" */
section div:nth-of-type(1) {
background-color: springgreen;
}
</style>
</head>
<body>
<section>
<p>Java</p>
<div>Python</div>
<div>C/C++</div>
</section>
</body>
</html>
效果图:
小结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child
对付元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和 E 匹配nth-of-type
对父元素里面指定子元素进行排序选择。先去匹配 E ,然后再根据 E找第 n 个孩子- 关于
nth-child(n)
我们要知道 n 是从0开始计算的,要记住常用的公式。 - 如果是无序列表,我们肯定用
nth-child
更多 - 类选择器、属性选择器、伪类选择器、权重为10
2.2.3、伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
常见的选择符:
选择符 | 描述 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
before
和after
创建一个元素,但是属于行内元素- 新创建的这个元素在文档树中是找不到的,所以我们称之为
伪元素
- 语法:
element::before { /* 样式 */}
before
和after
必须有content属性
before
在父元素内容的前面创建元素,after
在父元素内容的后面插入元素伪元素选择器
和标签选择器
一样,权重为1
伪元素选择器的基本使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
div::before {
content: "Java"; /* content属性必须要写 */
color: red;
}
div::after {
content: "JavaScript";
color: blue;
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
效果图:
伪元素选择器使用场景1:伪元素字体图标
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7mwi7k');
src: url('fonts/icomoon.eot?7mwi7k#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7mwi7k') format('truetype'),
url('fonts/icomoon.woff?7mwi7k') format('woff'),
url('fonts/icomoon.svg?7mwi7k#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid black;
margin: 50px auto;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
font-family: 'icomoon';
/* content: ""; */
content: "\e900";
}
</style>
</head>
<body>
<div></div>
</body>
</html>
伪元素选择器使用场景2:仿土豆遮罩层效果。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 402px;
height: 224px;
margin: 100px auto;
}
.box img {
width: 100%;
height: 100%;
}
.box::before {
content: "";
position: absolute;
display: none; /* 隐藏遮罩层 */
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5) url('./images/arr.png') no-repeat center;
}
/* 当鼠标经过这个盒子,就让里面的遮罩层显示出来 */
.box:hover::before {
display: block; /* 鼠标经过显示元素 */
}
</style>
</head>
<body>
<div class="box">
<img src="https://m.ykimg.com/054F010160226EA4047BD7AA7DE68228?x-oss-process=image/resize,w_490/crop,x_0,y_0,w_490,h_276" alt="熊出没">
</div>
</body>
</html>
伪元素选择器使用场景3:伪元素清除浮动
清除浮动的方法回顾:
- 父级添加 overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
- 额外标签法也称为隔墙法,是W3C推荐的做法
使用伪元素
清除浮动与额外标签法
清除浮动的原理是一样的,伪元素法算是额外标签法的一个升级与优化。
/* 单冒号是照顾低版本浏览器 */
.clearfix:after {
content: "";
display: block; /* 插入的元素必须是块级的 */
height: 0; /* 隐藏元素 */
clear: both; /* 核心代码 */
visibility: hidden; /* 隐藏元素 */
}
2.3、CSS3盒子模型
在CSS3之前,我们声明的盒子如果加了border
和padding
,都会撑大我们的盒子!此时我们需要适当的减去border
和padding
才能保证我们盒子原来的大小,这一过程非常的麻烦!
所以在css3中有了新的盒子模型
去解决这一问题。
CSS3中可以通过box-sizing
来指定盒子模型,有2个值:
content-box
border-box
这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
box-sizing: content-box;
盒子大小为 width + padding + border (以前默认的就是需要减去border与padding的方式)box-sizing: border-box;
盒子大小为width
如果盒子模型我们改为了box-sizing: border-box
,那padding和border就不会撑大盒子了(前提是padding和border相加不会超过width宽度)
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
border: 20px solid red;
padding: 10px;
box-sizing: content-box; /* 默认方式 */
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
border: 20px solid red;
padding: 10px;
box-sizing: border-box; /* 指定border-box方式,即width就是盒子大小 */
}
</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>
效果图:
2.4、CSS3图片模糊处理(了解)
css3中过滤属性filter
:
filter css属性将模糊或颜色偏移等图形效果应用于元素。
语法:
filter: 函数(); /* 例如:filter: blur(5px); blur模糊处理,数值越大越模糊*/
更多可使用函数可查看菜鸟教程:https://www.runoob.com/cssref/css3-pr-filter.html
例如:图片的模糊处理我们可以使用blur()
函数
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div img {
filter: blur(3px); /* 图片模糊处理,数值越大越模糊 */
}
</style>
</head>
<body>
<h5>处理前:</h5>
<img src="./image/c.jpg" alt="">
<h5>处理后:</h5>
<div>
<img src="./image/c.jpg" alt="">
</div>
</body>
</html>
2.5、计算盒子宽度calc()函数
calc()
此css函数让你在声明css属性值时执行一些计算。
例如:
width: calc(100% - 80px);
括号里可以使用+ - * /
来进行计算。
例如:有这样一个需求子盒子宽度永远比父盒子小30像素!我们就可以使用calc()
函数去计算子盒子的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: yellowgreen;
}
.son {
width: calc(100% - 30px);
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.6、CSS3过渡(重点)
过渡(transition)
是css3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或者 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态。
可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(IE9以下的版本),但是不会影响页面布局。
我们先在经常和:hover
一起搭配使用。
例如:在小米官网中的小米logo,当鼠标经过时会有一个过渡动画!
transition的使用语法:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
/* 默认值 */
transition: all 0 ease 0; /* 注意不可以继承 */
- 属性:想要变化的 css 属性,宽度高度 背景颜色 内外边距都可。如果想要所有的属性都变化过渡,写一个 all就可以了。
- 花费时间:单位是秒(必须填写单位)比如 0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须填写单位)可以设置延迟触发时间默认是 0s(可以省略)
那么过渡要加在哪里呢?记住一个口诀:谁做过渡给谁加
案例:将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 200px 到 400px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: skyblue;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
transition: width 0.5s; /* 后面两个可以省略 */
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
如果需要同时改变多个属性,可以这样书写(使用逗号隔):
div {
width: 200px;
height: 100px;
background-color: skyblue;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
transition: width 0.5s,height 0.5s;
/* transition: all 0.5s */
}
div:hover {
width: 400px;
height: 200px;
}
过渡(transition)的使用案例:实现进度条效果。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bar {
width: 200px;
height: 10px;
border: 1px solid red;
border-radius: 7px;
padding: 1px 0;
}
.bar .bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: width 0.7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in">
</div>
</div>
</body>
</html>
3、CSS3 新特性之动画属性
3.1、CSS3 2D转换
转换(transform
)是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
当然所谓的转换我们也可以理解为变形,具体的变形属性有:
- 移动
(translate)
- 旋转
(rotate)
- 缩放
(scale)
3.1、什么是2D转换?
2D转换是改变标签在二维平面上的位置和形状的一种技术,在这之前我们先要了解二维坐标系。
所谓的二维坐标系又与我们数学中的坐标系有点不一样!
2、2D 转换之移动(translate)
2D 移动是 2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
语法:
transform: translate(x,y);
/* 或者分开写 */
transform: translateX(n); /* n 也可以是百分比单位(相对于自身而言)*/
transform: translateY(n);
实例:
/*
移动一个盒子我们有三种选择方案:
1.定位
2.盒子的外边距
3.2D转换-移动
*/
.box {
width: 200px;
height: 200px;
background-color: skyblue;
transform: translate(100px,50px); /* x轴方向移动 100px,y轴方向移动 50px*/
/* 1.如果我们只移动 x坐标 */
transform: translate(20px,0);
/* 或者 */
transform: translateX(20px);
/* 2.移动 y坐标同理 */
}
小结:
- 定义 2D 转换中的移动,沿着 x 和 y 轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translae中的百分比单位是相对于自身元素的。如
transform: translate(50%,50%);
- 对行内标签没有效果
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
div:first-child {
transform: translate(30px,30px);
background-color: springgreen;
}
div:last-child {
background-color: violet;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
效果图:
3、2D 转换之旋转
2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转。
语法:
transform: rotate(ndeg); /* 旋转n度,deg为旋转单位 */
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
/* 顺时针旋转 45度,负值就是逆时针 */
transform: rotate(45deg);
margin: auto;
}
.box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="./image/pig.jpeg" alt="">
</div>
</body>
</html>
效果:
配合过渡属性,我们可以做出意想不到的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
/* 顺时针旋转 45度,负值就是逆时针 */
transform: rotate(45deg);
margin: auto;
}
.box img {
width: 100%;
height: 100%;
border: 2px solid purple;
border-radius: 50%;
}
.box:hover img {
transform: rotate(360deg);
/* 过渡写到本身上,谁做动画给谁加 */
transition: all 0.5s;
}
</style>
</head>
<body>
<div class="box">
<img src="./image/pig.jpeg" alt="">
</div>
</body>
</html>
鼠标移动图片上(旋转360度):
小结:
- rotate里面跟度数,单位是deg 比如
rotate(45deg)
。 - 角度为正时,顺时针。负值时,为逆时针。
- 默认旋转的中心点是元素的中心点。
实例:不使用字体图标实现盒子内的小三角形
(设置下边框和右边框、旋转45度)
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 30px;
border: 1px solid #000;
}
.box::after {
position: absolute;
content: "";
top: 6px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
/* 鼠标经过时,小三角倒转 */
.box:hover::after {
/* transition: all 0.5s; */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
4、设置旋转中心点(transform-origin)
经过上面的学习,2D旋转元素是,默认中心点就是元素的中心点,但是我们也可以通过transform-origin
属性设置元素旋转的中心点!
语法:
transform-origin: x y;
注意:
- 参数 x 和 y 是用空格隔开
- x y 默认转换的中心点是元素的中心点
(50% 50%)
- 还可以给 x y 设置像素、方位名词
(top bottom left right center)
实例1:把旋转中心点设置成左下角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
margin: auto;
transition: all 0.5s;
/* 1.可以是方位名词 */
transform-origin: left bottom; /* 左下角 */
/* 2.默认是 50% 50%等价于 center center */
/* 3.还可以是像素 */
}
.box:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
实例2:鼠标移到盒子后,实现动态切换效果。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid rebeccapurple;
margin: auto;
}
.box::after {
content: "alex";
display: block;
width: 100%;
height: 100%;
background-color: royalblue;
transform-origin: left bottom;
transform: rotate(180deg);
transition: all 0.5s;
}
.box:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
5、2D 转换之缩放 scale
缩放,顾明思议,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法:
transform: scale(x,y);
注意:
- 参数 x 和 y 用逗号分隔
transform: scale(1,1)
宽和高都放大一倍,相对于没有放大。transform: scale(2,2)
宽和高都放大了2倍transform: scale(2);
只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
transform: scale(0.5,0.5);
缩小- scale锁放最大的优势,可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
实例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: rebeccapurple;
margin: auto;
}
.box:hover {
/* 1.transform: scale(x,y); 里面写的数字不跟单位,就是倍数的意思 */
transform: scale(2); /* 等价于 transform: scale(2,2);*/
/* 2.修改了宽度为原来的2倍,高度不变 */
/* transform: scale(2,1); */
/* 3.我们可以进行缩小,小于1就是缩放 */
/* transform: scale(0.5,0.5); 或者 transform: scale(0.5); */
/*
4.scale()的优点:
1.不会影响其他的盒子
2.可以设置缩放的中心点
*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
实例2:鼠标经过后实现图片的缩放效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* overflow: hidden; */
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
div img {
width: 100%;
height: 100%;
border: 1px solid rebeccapurple;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<img src="./image/pig.jpeg" alt="">
</div>
<div>
<img src="./image/pig.jpeg" alt="">
</div>
<div>
<img src="./image/pig.jpeg" alt="">
</div>
</body>
</html>
实例3:分页按钮
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
float: left;
width: 30px;
height: 30px;
list-style: none;
border: 2px solid green;
border-radius: 50%;
font-size: 20px;
margin: 10px 10px;
text-align: center;
line-height: 30px;
}
ul li:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
6、2D 转换综合写法
综合写法注意点:
- 同时使用多个转换,其格式为
transform: translate() rotate() scale()
等 - 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: greenyellow;
transition: all 0.5s;
margin: auto;
}
.box:hover {
/* 我们同时有位移和其他属性,我们需要把位移放在最前面 */
transform: translate(150px,50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2D 转换总结:
- 转换
transform
我们简单理解就是变形有 2D 和 3D之分 - 我们暂且学了三个分别是 位移、旋转、缩放
- 2D移动
translate(x,y)
最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的 - 可以分开写比如
translateX(x)
和translateY(y)
- 2D转换
rotate(度数)
,可以实现旋转元素,度数的单位是deg
- 2D缩放
sacle(x,y)
,里面参数是数字 不跟单位、可以是小数,最大的优势不影响其他盒子 - 设置转换中心点
transform-origin: x y;
参数可以百分比,像素或者是方位名词 - 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前。
3.2、CSS3动画
动画(animation)
也是css3中具有颠覆性的特征之一,可通过设置多个节点精确控制一个或一组动画,常用来实现复杂的动画效果。
相较于过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
3.2.1、动画的基本使用
制作动画分为两步:
- 先定义动画
- 在使用(调用)动画
语法(定义):使用keyframes
定义动画(类似于定义类选择器)
@keyframes 动画名称 {
0% {
width: 100px; /* 0%:动画序列(总时间的划分) */
}
100% {
width: 200px; /* 也可以使用 from to 代替*/
}
}
语法(使用):元素使用动画
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
动画序列:
0%
是动画的开始,100%
是动画的完成。这样的规则就是动画序列。- 在
@keyframes
中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果 - 动画是使元素从一种样式逐渐变化为另一种样式的效果、我们可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间,或用关键字
from
和to
,等同于0%
和100%
实例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 我们想页面一打开,一个盒子就从左边走到右边 */
/* 定义动画 */
@keyframes move {
/* 开始状态 */
from {
transform: translate(0px,0px);
}
/* 动画结束状态 */
to {
transform: translate(1200px,0px);
}
}
.box {
width: 200px;
height: 200px;
background-color: greenyellow;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
实例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.可以做多个状态的变化 keyframe 译为 关键帧 */
/* 2.里面的百分比,必须是整数 */
/* 3.里面的百分比就是 总时间(我们这个案例10s) 的划分 */
@keyframes move {
0% {
transform: translate(0px,0px);
}
25% {
transform: translate(1200px,0px);
}
50% {
transform: translate(1200px,500px);
}
75% {
transform: translate(0px,500px);
}
100% {
transform: translate(0px,0px);
}
}
.box {
width: 200px;
height: 200px;
background-color: greenyellow;
/* 动画名称 */
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.2.2、动画的基本属性
1、常用属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性 ,除了animation-play-state |
animation-name | 规定@keyframes动画的名称(必须的) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0(必须的) |
animation-timing-function | 规定动画的速度曲线,默认是ease |
animaton-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的此时,默认是1,还有infinite |
animation-direction | 规定动画是否在下一个周期逆向播放,默认是normal ,alternate 是逆播放 |
animation-play-state | 规定动画是否正在运行或暂停,默认是running ,还有paused |
animation-fill-mode | 规定动画结束后保持状态,保持forwards 回到起始backwards |
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
/* animation-duration: 2s; */
/* 运动曲线 */
/* animation-timing-function: ease; */
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
/* animation-fill-mode: forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* animation: move 2s linear 0s 1 alternate forwards; */
/* 前面2个属性 name duration 一定要写 */
/* animation: move 2s linear alternate forwards; */
}
div:hover {
/* 鼠标经过div 让这个div 停止动画,鼠标离开就继续动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2、简写属性
语法:
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向播放 动画起始或者结束的状态;
/* 前面两个属性一定要写 */
如:
animation: myfirst 5s linear 2s infinite alternate;
注意:
- 简写属性里不包含
animation-play-state
- 暂停动画:
animation-play-state: puased;
经常和鼠标经过等其他配合使用 - 想要动画回来,而不是直接跳回来:
animation-direction: alternate
- 盒子动画结束后,停在结位置:
animation-fill-mode: forwards
实例:热点图
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: rgb(78, 76, 76);
}
.map {
position: relative;
width: 747px;
height: 616px;
background: url("image/map.png") no-repeat;
margin: auto;
}
.map .city {
position: absolute;
top: 227px;
right: 192px;
color: #fff;
}
.map .city .dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.map .city div[class^="pulse"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #09f;
border-radius: 50%;
animation: pulse 1s linear infinite;
}
@keyframes pulse {
0% {
}
70% {
width: 40px;
height: 40px;
opacity: 1; /* 透明度 */
}
100% {
width: 60px;
height: 60px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2" style="animation-delay: 0.4s;"></div>
<div class="pulse3" style="animation-delay: 0.8s;"></div>
</div>
</div>
</body>
</html>
3、速度曲线细节
animation-timing-function: 规定动画的速度曲线;
默认是ease
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。匀速 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 0;
height: 30px;
background-color: blueviolet;
font-size: 20px;
/* steps 就是分几步来完成我们的动画,有了steps 就不要在写 ease 或者 linear了 */
animation: w 4s steps(10) forwards;
overflow: hidden;
/* 让我们的文字强制一行内显示 */
white-space: nowrap;
}
@keyframes w {
0% {
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div class="box">我是乘风破浪的程序员</div>
</body>
</html>
实例1:奔跑的大熊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.box {
position: absolute;
width: 200px;
height: 100px;
margin: 100px auto;
background: url("image/bear.png") no-repeat;
/* 我们元素可以添加多个动画,用逗号分隔 */
animation: run 2s steps(8) infinite,move 3s forwards;
}
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
from {
left: 0;
}
to {
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3.3、CSS3 3D转换
我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。
3D特点:
- 近大远小
- 物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能制作出3D效果。3D转换我能主要学习工作中最常见的 3D位移和3D旋转,在此之前我们先要了解三维坐标系。
3.3.1、三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的:
- x轴:水平向右。注意:x右边是正直,左边是负值
- y轴:垂直向下。注意:y下面是正直,上面是负值
- z轴:垂直屏幕。注意:往外面是正直,往里面是负值
3.3.2、3D位移 translate3d(x,y,z)
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向:
transform: translateX(100px);
仅仅是在x轴上移动transform: translateY(100px);
仅仅是在y轴上移动transform: translateZ(100px);
仅仅是在z轴上移动(注意:translateZ 一般用px单位)transform: translate3d(x,y.z);
其中x,y,z分别指要移动的轴的方向的距离。
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1. translateZ() 沿着z轴移动 */
/* 2. translateZ() 后面的单位我们一般跟px*/
/* 3. translateZ() 向外移动100px */
/* 4. 3D移动的简写方法: transform: translate3d(x,y,z); xyz是不能省略的,如果没有就写0 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.3.3、3D旋转 rotate3d(x,y,z)
3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。
语法:
transform: rotateX(45deg); /* 沿着x轴正方向旋转45度*/
transform: rotateY(45deg); /* 沿着y轴正方向旋转45度*/
transform: rotateZ(45deg); /* 沿着Z轴正方向旋转45度*/
transform: rotate3d(x,y,z,deg); /* 沿着自定义轴旋转 deg 为角度(了解即可)*/
实例1:沿着x轴旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 200px;
}
.box img {
width: 100%;
height: 100%;
transition: all 1s;
}
.box:hover img {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="box">
<img src="image/pig.jpeg" alt="">
</div>
</body>
</html>
对于元素旋转的方向的判断,我们需要先学习一个左手准则。
左手准则:
- 左手的手拇指指向x轴的正方向
- 其余手指的弯曲方向就是该元素沿着 x轴旋转 的方向
实例2:沿着y轴旋转
我们的钢管舞就是沿着y轴旋转
旋转方向的判定还是遵循左手准则,不过在这里大拇指需要指向三维坐标系的y轴!
实例3:沿着z轴旋转,z轴的旋转与2D的旋转一样。
3.3.4、透视 perspective
在2D平面产生近大远小视觉立体,但是效果只是二维的:
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
- 模拟人类的视觉位置,可以认为安排一只眼睛去看。
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
注意:透视属性写在被观察元素的父盒子上面
d
就是视距,视据就是一个距离人的眼睛到屏幕的距离z
就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 500px; /* 透视也称视距,值越小,盒子就越大 */
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: greenyellow;
transform: translate3d(100px,50px,100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果就是,盒子因为视距的改变而撑大了盒子
3.3.5、3D 呈现 transform-style
transform-style CSS属性指定元素的子元素是定位在3d空间中还是在元素平面中被平铺。如果扁平化,子元素将不会在三维空间中独立存在。
- 控制子元素是否开启三维立体环境
transform-style: flat;
子元素不开启3d立体空间默认值transform-style: preserve-3d;
子元素开启立体空间- 代码写给父级,但是影响的是子盒子
- 这个属性和重要,后面必用
实例1:子元素开启立体空间
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 500px;
transform-style: preserve-3d; /* 子元素开启立体空间 */
transition: all 1s;
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: greenyellow;
}
.box div:last-child {
transform: rotateX(60deg);
background-color: rebeccapurple;
}
.box:hover {
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
实例2:两面翻转盒子案例。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 0.5s;
transform-style: preserve-3d;
}
.box .front,.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 20px;
color: cornsilk;
}
.box .front {
background-color: blueviolet;
z-index: 1;
}
.box .back {
background-color: rgb(231, 141, 38);
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">hello</div>
<div class="back">world</div>
</div>
</body>
</html>
实例3:3D导航栏
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
width: 120px;
height: 35px;
list-style: none;
text-align: center;
line-height: 35px;
font-size: 14px;
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s;
}
.box .front,.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .front {
background-color: gold;
z-index: 1;
transform: translateZ(17.5px);
}
.box .bottom {
background-color: rebeccapurple;
color: seashell;
/* 我们如果有移动或者其他样式,必须先写我们的移动 */
transform: translateY(17.5px) rotateX(-90deg); /* 这个x轴一定是负值 */
}
.box:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">首页</div>
<div class="bottom">点击进入</div>
</div>
</li>
<li>
<div class="box">
<div class="front">首页</div>
<div class="bottom">点击进入</div>
</div>
</li>
<li>
<div class="box">
<div class="front">首页</div>
<div class="bottom">点击进入</div>
</div>
</li>
<li>
<div class="box">
<div class="front">首页</div>
<div class="bottom">点击进入</div>
</div>
</li>
</ul>
</body>
</html>
3.4、动画属性综合案例:旋转木马
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
/* 添加动画 */
animation: rotate 15s linear infinite;
background: url("image/j.jpg");
}
section:hover {
/* 鼠标放入section 停止动画 */
animation-play-state: paused;
}
section div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
section div img {
width: 100%;
height: 100%;
}
section div:nth-child(1) {
transform: rotateY(0) translateZ(300px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<section>
<div>
<img src="./image/mj.jpg" alt="">
</div>
<div>
<img src="./image/mj.jpg" alt="">
</div>
<div>
<img src="./image/mj.jpg" alt="">
</div>
<div>
<img src="./image/mj.jpg" alt="">
</div>
<div>
<img src="./image/mj.jpg" alt="">
</div>
<div>
<img src="./image/mj.jpg" alt="">
</div>
</body>
</html>