1 精灵图
（1）定义：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图。
（2）优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度。
（3）使用步骤：
①创建一个盒子，盒子的标签用行内标签 span/b/i 等
②设置盒子大小为图片大小
③设置精灵图为盒子的背景图片
④用background-position属性移动精灵图，使想要显示的图片正确地显示在盒子里
<!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>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(./images/xxx.png);
background-position: -3px 0;
}
</style>
</head>
<body>
<span></span>
</body>
</html>2 背景图大小
属性名：background-size，属性值如下
用数字+px或百分比的时候如果只写一个数，那么就是在控制图片的宽，而高度自适应，如果写两个数就是同时控制图片的宽高。而contain是保证背景图片在不变形、不超出盒子的情况下尽可能地占满整个盒子，因此有可能会留下空白位置，cover是保证背景图片在不变形的情况下以最低的缩放比占满整个盒子，因此有可能会出现图片显示不全的情况。
<!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: 400px;
height:300px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-size: 300px; */
/* background-size: 300px 100px; */
/* background-size: 50%; */
background-size: contain;
/* background-size: cover; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>3 字体图标
字体图标在人眼里是图标（图片），但浏览器会把它当做字体来渲染，本质上还是字体。
1.优点
（1）灵活性：灵活地修改样式，例如：尺寸、颜色等。
（2）轻量级：体积小、渲染快、降低服务器请求次数
（3）兼容性：几乎兼容所有主流浏览器
（4）使用方便：①下载字体包 ②使用字体图标
2.使用方式
（1）Unicode编码引入
①引入样式表：iconfont.css
②复制粘贴图标对应的Unicode编码
③设置文字字体
<link rel="stylesheet" href="./iconfont/iconfont.css">
span{
font-family: 'iconfont';
}（2） 类名引入
①引入字体图标样式表
②调用图标对应的类名，必须调用2个类名。一个是iconfont类，基本样式，包含字体的使用等；另一个是icon-xxx，图标对应的类名。
<link rel="stylesheet" href="./iconfont/iconfont.css"><span class="iconfont icon-cart-Empty-fill orange"></span>
如果想要修改字体样式，那么只需要对 .iconfont 类或者是 .icon-xxx 类进行修改即可。
.iconfont{
font-size: 200px;
}
.icon-cart-Empty-fill{
font-size: 100px;
}4 平面转换
平面转换是指使用 transform 属性在二维的平面内实现对元素的位移、旋转和缩放等效果。
1.元素的位移
要实现元素的位移就要用到 translate(x,y); ，x/y分别是在水平方向和竖直方向上的位移，可以是像素（px）也可以是百分比（参照物为元素自身尺寸）。translate的括号内只写一个数字的话，则表示沿x轴方向移动。如果想要单独设置水平方向或者垂直方向的话，使用 translateX()/translateY()。
移动时的参考系如下，原点为元素左上角。
2.元素的旋转
使用 rotate(角度); 实现元素的旋转，角度的单位为deg，数值可正可负，取正表示顺时针旋转，取负表示逆时针旋转，旋转时的圆心默认是元素的中心点。如果想要改变圆心的位置，则可以使用transform-origin 属性。
<!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>转换原点</title>
<style>
img {
margin: 200px 400px;
width: 250px;
border: 1px solid #000;
transition: all 2s;
/* 类型一 方位名词*/
/* 以左边中点为圆心 */
transform-origin: left;
/* 以右下角为圆心 */
transform-origin: right bottom;
/* 类型二 数值+px */
/* 原点（0,0）在元素的左上角，水平向右为正，垂直向下为正 */
transform-origin: 100px 800px ;
/* 类型三 百分比 */
/* 原点（0,0）在元素的左上角，水平向右为正，垂直向下为正 */
/* 以元素自身宽高为参考 */
transform-origin: 50% 100%;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>3.改变元素的尺寸
使用 transform: scale(x轴缩放倍数, y轴缩放倍数); 来改变元素的尺寸，x和y分别为元素宽和高的缩放倍数，大于1为放大，小于1为缩小，但一般情况下, 只会为scale设置一个值, 表示x轴和y轴等比例缩放（transform:scale(缩放倍数);）。
5 空间转换
1.元素的位移
代码：
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）：①像素单位数值 ②百分比
2.元素的旋转
代码：
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。
3.元素的缩放
代码：
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
4.透视
透视简单来说就是在空间转换时，呈现出近大远小、近实远虚的视觉效果。此时需要给父级元素添加perspective属性，属性取值为像素单位数值，一般在800 – 1200。
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
5.立体呈现
perspective属性不能使子元素处于真正的三维空间内，如果想要子元素呈现出立体的效果，就要给父元素加上transform-style: preserve-3d属性。具体步骤为：①盒子父元素添加transform-style: preserve-3d；②按需求设置子盒子的位置（位移或旋转）。
注意：空间内，转换元素都有自已独立的坐标轴，互不干扰
6 动画效果
一个好看的网页少不了动态效果，而 transition 和 animation 就是CSS里用来制作动画效果的属性。一般来说，transition是过渡属性，它只有两个关键帧（开始--结束），需要触发一个事件才执行动画；而animation是动画属性，它可以有多个关键帧，在执行时不需要触发事件，而是在设定好时间之后自动执行，并且可以循环执行。
transition有以下属性，可与animation属性作对比。
transition-property: 动画展示哪些属性，可以使用all关键字;
transition-duration: 持续时间;
transition-timing-function: 动画速度曲线linear, ease, ease-in, ease-out, ease-in-out;
transition-delay: 动画延迟执行时间;1.定义动画
定义动画的关键就是定义关键帧。关键帧通俗来讲就是被描绘对象在某一刻的状态，将这些状态连在一起就实现了动画效果。
/* from--开始状态 to--结束状态 */
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}2.调用动画
调用动画需要用到 animation 属性，其后可以跟多个属性值，分别是动画名称、动画时长、速度曲线、延迟时间、重复次数、动画方向、执行完毕状态。这些属性值不分先后顺序，但动画名称和动画时长必须赋值，如果有两个时间，则第一个表示动画时长，第二个表示延迟时间。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
