wed移动端
字体图标：
Iconfont：www.iconfont.cn/ 使用步骤： 1.选择图标库——选择图标——添加购物车——添加至项目——下载至本地 2.解压后打开文件夹，复制@font—face{ } ;代码 3.到相应的html里面复制代码即可
平面转换:
平面转换 transform 用处：transform属性可以实现元素的位移，旋转，缩放
也叫：2D转换
位移写法
语法：transform:translate(水平移动距离，垂直移动距离); 括号取值范围：正负均可，单位是像素px,也可以写百分比。 注意：1.写一个值的时候默认水平。 2.X轴正向为右移动，Y轴正向为向下移动 3.单独设置某个方向移动的时候：可以写translateX()；或者Y 小技巧：使用位移让绝对定位的元素快速居中 核心代码：position:absolute; left:50%; top:50%； transform:translate(-50% , -50%) 自身宽高的50%
.ganni {
position: relative;
width: 600px;
height: 600px;
background-color: pink;
margin: 150px auto;
}
.ganni .niang {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
background-color: blue;
第一种写法：
/*位移 transform: translate(-50%, -50%); */
transform: translate(-50%, -50%);
第二种写法：
/*位移方向 transform: translateX(-50%); */
/*位移方向 transform: translateY(-50%); */
}
</style>
</head>
<body>
<div class="ganni">
<div class="niang"></div>
</div>
</body>
</html>
旋转写法，改变旋转中心点
transform:rotate(角度) ；//单位是deg 取值为正时，则为顺时针旋转，取值为负时，则为逆时针旋转 旋转中心点设置 transform-origin: 原点水平位置 原点垂直位置； 取值：方位名词，像素单位，百分比；
复合写法：transform: translate() roatate(); //先位移后旋转
<style>
.xuanzhuang {
width: 300px;
height: 300px;
background-color: pink;
border: 1px solid #000;
transition: all 1s;
/* 右下 像素*/
transform-origin: 300px 300px;
/* 右下 方位名词*/
/* transform-origin: right bottom; */
/* 右下 百分比*/
/* transform-origin: 100% 100%; */
}
.xuanzhuang:hover {
/* transform: rotate(360deg); 旋转 单位deg */
/* transform: translate(1000px) rotate(3600deg);复合 写法 位移加旋转 */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="xuanzhuang"></div>
</body>
</html>
缩放写法
语法：transform: scale(X轴缩放倍数，y轴缩放倍数)； //不带单位 技巧：一般情况下，只为scale设置一个值，大于一是放大，小于一是缩小； opacity是透明度属性。
<style>
.box {
width: 350px;
height: 247px;
border: 1px solid #000;
margin: 150px auto;
/* 溢出隐藏 */
overflow: hidden;
}
.box img {
transition: all 2s;
}
.box:hover img {
/* 缩放 */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic3.png" alt="">
</div>
</body>
渐变
语法：background-image:linear-gradient(
颜色1, transparent,
颜色2 rgba(0, 0, 0, 0.3)
))；
渐变颜色方向：方位名词 ，角度
百分比写法：比较少用
