- CSS3 新特性
- 动画
- 媒体查询
- 雪碧图
- 字体图标
1. CSS3 新特性
1.1 圆角
使用CSS3 border-radius 属性，可以给任何元素制作“圆角”。border-radius属性，可以使用以下规则：
- 四个值：依次为左上角、右上角、右下角和左下角（顺时针）
- 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
- 两个值：第一个值为左上角和右下角，第二个值为右上角和左下角
- 一个值：四个圆角值相同
1.2 阴影
box-shadow向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
2. 动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%
2.1 @keyframes创建动画
@keyframes name{ // name：动画名称，开发人员自己命名
from|0%{
css样式
}
percent{ // 为百分比值，可添加多个百分比值
css样式
}
to|100%{
css样式
}
}
2.2 animation执行动画
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| name | 设置动画名称 |
| duration | 设置动画持续时间 |
| timing-function | 设置动画效果的速率（如下） |
| delay | 设置动画的开始时间（延时执行） |
| iteration-count | 设置动画循环的次数，infinite为无线次数的循环 |
| direction | 设置动画播放的方向（如下） |
| animation-play-state | 控制动画的播放状态：running代表播放，pause代表停止播放 |
| timing-function值 | 描述 |
| ease | 逐渐变慢（默认） |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| direction值 | 描述 |
| normal | 默认值为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次反方向播放 |
2.3 切换背景颜色
div{
width: 200px;
height: 200px;
background-color: red;
animation: myAnim 3s linear 0s infinite;
}
div:hover{
animation-play-state: paused; // 可用于更改背景颜色
}
@keyframes myAnim{
0%{
width: 200px;
background-color: red;
}
50%{
width: 400px;
background-color: green;
}
100%{
width: 200px;
background-color: red;
}
}
2.4 呼吸效果
.box{
width: 500px;
height: 500px;
margin: 40px auto;
background-color: #2b92d4;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
animation: breathe 1s ease-in-out infinite alternate;
}
@keyframes breathe{
0%{
opacity: 0.2;
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}
50%{
opacity: 0.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);
}
}
3. 媒体查询
媒体查询能使页面在不同终端设备下达到不同的效果。媒体查询会根据设备的大小自动识别加载不同的样式。
3.1 设置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）
3.2 媒体查询语法
<div class="box"></div>
<p class="p1">哈哈哈</p>
<p class="p2">呵呵呵</p>
@media screen and (max-width:768px) { /* 设备小于768px加载样式 */
.box{
background-color: aqua;
}
.p1{
display: none;
}
.p2{
display: none;
}
}
@media screen and (min-width:768px) and (max-width:996px) {
.box{
background-color: chartreuse;
}
.p1{
display: none;
}
.p2{
display: block;
}
}
@media screen and (min-width:996px) {
.box{
background-color: red;
}
.p1{
display: block;
}
.p2{
display: block;
}
}
4. 雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。
优点：
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
原理：
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到自己需要的位置
<i class="icon1"></i>
<i class="icon2"></i>
.icon{
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;
}
5. 字体图标
使用图标时，会遇到失真的情况，而且图片数量越多，页面加载就越慢。所以，可以使用字体图标的方式显示图标，既解决了失真问题，也解决了图片占用资源的问题。
常用字体图标库：阿里字体图标库
优点：
- 轻量性：加载速度快，减少http请求
- 灵活性：可利用CSS设置大小颜色等
- 兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标：
- 注册账号并登录
- 选取图标或搜索图标
- 添加购物车
- 下载代码
- 选择 font-class 引用
<span class="iconfont icon-add-circle"></span>
<link rel="stylesheet" href="./css/iconfont.css">
.iconfont{
font-size:35px;
background-color:#e1251b
}
