2.CSS3.(4).html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 示例</title>
<!-- 下面引用了字体图标CSS文件 -->
<link rel="stylesheet" href="./font/iconfont.css">
<style>
/* 动画
动画是使元素从一种样式逐渐变化为另一种样式的效果
您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成。 */
.a {
width: 300px;
height: 300px;
background-color: red;
animation: anima 5s linear 5s infinite;
/* animation执行动画
animation: name duration timing-function delay iteration-count direction;
name: 动画名称，这里对应@keyframes的名称anima
duration: 动画持续时间
timing-function: 规定动画的速度曲线（如下）
delay: 动画延迟时间
iteration-count: 动画播放次数
direction: 动画播放方向（如下）*/
/* timing-function值：
1.linear: 规定动画以相同的速度开始到结束
2.ease: 规定动画以慢速开始，然后加快，在结束时变慢（默认值）
3.ease-in: 规定动画以慢速开始
4.ease-out: 规定动画以慢速结束
5.ease-in-out: 规定动画以慢速开始和结束*/
/* direction值
1.normal: 动画正常播放（默认值）
2.reverse: 动画正常播放，但顺序是相反的
3.alternate: 动画正常播放，然后顺序是相反的，再正常播放，以此类推
4.alternate-reverse: 动画正常播放，然后顺序是相反的，再正常播放，然后顺序是相反的，以此类推
5.initial: 设置该属性为初始值 */
}
.a:hover {
animation-play-state: paused;
}
/* :hover 是一个伪类，它表示当用户将鼠标悬停在选中的元素上时触发的状态。 */
/* animation-play-state 是一个 CSS 属性，用于控制动画的播放状态。
它有两个主要取值：
running：表示动画正在运行。
paused：表示动画暂停。 */
@keyframes anima {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blueviolet;
}
}
/* 用动画实现呼吸效果 */
.box {
width: 500px;
height: 400px;
margin: 40px auto;
background-color: #2b92d4;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
animation: breathe 2700ms ease-in-out infinite alternate;
/* 为盒子应用名为 breathe 的动画，动画持续时间为 2700 毫秒（即 2.7 秒），
动画的速度曲线是 ease-in-out（先慢后快再慢），
动画无限循环播放，并且每次循环结束后反向播放。 */
}
@keyframes breathe {
0% {
opacity: .2;
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)
}
50% {
opacity: .5;
box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)
}
100% {
opacity: 1;
box-shadow: 0 1px 30px rgba(59, 255, 255, 1)
}
}
/* 0%：动画开始时的状态。此时盒子的不透明度为 0.2（即 20% 透明），
盒子的阴影颜色为半透明白色，阴影效果微弱。
50%：动画进行到一半时的状态。盒子的不透明度变为 0.5（即 50% 透明），
阴影颜色变为半透明绿色。
100%：动画结束时的状态。盒子完全不透明（不透明度为 1），
阴影颜色变为青色，并且阴影的模糊半径增大到 30 像素，阴影效果更明显。 */
/* 媒体查询
媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式 */
/* 设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在 `<head>`标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
* `width = device-width` 宽度等于当前设备的宽度
* `initial-scale` 初始的缩放比例（默认设置为1.0）
* `maximum-scale` 允许用户缩放到的最大比例（默认设置为1.0）
* `user-scalable` 用户是否可以手动缩放（默认设置为no）*/
/* 媒体查询语法 */
@media screen and (max-width: 768px) {
/* 设备小于768px加载样式 */
body{
background-color: red;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
/* 设备小于768px但小于992px加载样式 */
body{
background-color: pink;
}
}
@media screen and (min-width: 992px) {
/* 设备大于992px加载样式 */
body{
background-color: green;
}
}
/* 雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，
然后通过CSS的background-position属性来显示大图中的某一部分，
从而达到减少HTTP请求次数，提高页面加载速度的目的。 */
/* 优点
1. 减少图片的字节
2. 减少网页的http请求，从而大大的提高页面的性能 */
/* 原理
1. 通过background-image引入背景图片
2. 通过background-position把背景图片移动到自己需要的位置 */
.icon1 {
display: block;
background-image: url(1.png);
background-position: -20px 0;
width: 45px;
height: 70px;
}
.icon2 {
display: block;
background-image: url(1.png);
background-position: -93px -84px;
width: 45px;
height: 70px;
}
/* 字体图标
我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。
所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题
常用字体图标库：[阿里字体图标库](https://iconfont.cn/)*/
/* 优点
1. 轻量性：加载速度快，减少http请求
2. 灵活性：可以利用CSS设置大小颜色等
3. 兼容性：网页字体支持所有现代浏览器，包括IE低版本 */
/* 使用字体图标
1. 注册账号并登录
2. 选取图标或搜索图标
3. 添加购物车
4. 下载代码
5. 选择 `font-class`引用 */
.home{
font-size: 100px;
color: #e1251b;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="box"></div>
<i class="icon1"></i>
<i class="icon2"></i>
<span class="iconfont icon-home home"></span>
<span class="iconfont icon-dizhi home"></span>
</body>
</html>