移动web第一天（字体图标下载使用+平面转换+渐变）
一：国内iconfont字体图标下载使用：
1、下载
注册账号 => 登录 => 把需要的图标加入购物车 => 下载代码/添加到项目,再去下载
2、使用
2-1、引入 iconfont.css
2-2、调用类名 => 公共基础类名（iconfont）、 自己的特定类名（icon-xxx）
<style>
<!-- 第一步:先引入下载好字体图标库的 css 文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<!-- 第三步:修改字体文件，调用其特定类名 -->
.icon-favorites-fill{
color:red;
}
</style>
<!-- 第二步:调用一下对应图标的类名(公共类名 iconfont , 特定类名直接去复制) -->
<span class="iconfont icon-favorites-fill"></span>3、上传
SVG => 矢量图形 => 放大缩小都不会让图像变形失真
二、平面转换（2D）
属性名称 : transform
属性值
1、位移： transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
➢ 像素单位数值
➢ 百分比（参照物为盒子自身尺寸） 注意：X轴正向为右，Y轴正向为下
<style>
.father:hover>.son {
/* 1、px */
transform: translate(50px, 50px);
/* 2、百分比（相对于自身的宽高尺寸） */
transform: translate(100%, 100%);
transform: translate(-100%, -100%);
/* 沿着x轴位移 */
transform: translateX(100px);
/* 沿着Y轴位移 */
transform: translateY(100px);
/* 当给一个值的时候， 沿着x轴位移 */
transform: translate(100%);
}
</style>
<body>
<!-- 需求:鼠标移入到父盒子.father时，子盒子.son改变自己的位置 -->
<div class="father">
<div class="son"></div>
</div>
</body>
2、旋转 transform:rotate(deg);
角度取值为正，顺时针旋转
角度取值为负，逆时针旋转
<style>
img {
width: 250px;
transition: all 2s;
}
/* 平面旋转属性：transform:rotate(度数) */
/*
角度取值为正，顺时针旋转
角度取值为负，逆时针旋转
*/
img:hover {
transform: rotate(360deg);
}
</style>
<body>
<img src="./images/rotate.png" alt="">
</body>3、转换原点：transform-origin:x轴的位置 y轴的位置;
默认的原点在元素的中点
transform-origin:0 0;
transform-origin:center bottom;
<style>
img {
width: 250px;
border: 1px solid #000;
transition: all 2s;
/* 修改元素的转换原点 */
/* 1-方位名词 */
transform-origin: right bottom;
transform-origin: center;
/* 2-像素值px */
transform-origin: 100px 100px;
/* 3-百分比% */
transform-origin: 50% 50%;
/* 0,0 => 左上角 */
transform-origin: 0 0;
}
img:hover {
transform: rotate(360deg);
}
</style>
<body>
<img src="./images/rotate.png" alt="">
</body>4、缩放 transform:scale(倍数);
倍数：0~1 缩小； >1 放大； =1 不变
<style>
.box {
width: 300px;
height: 210px;
margin: 100px auto;
background-color: pink;
}
.box img {
width: 100%;
}
.box:hover img{
/* 设置宽高虽然可以放大，但以左上角为定点，效果很不好用，因此放大缩小一般用trasnsform:scale(倍数) */
/* width: 150%; */
transform: scale(1.5);
/*倍数大于1为放大，0~1为缩小 0完全缩小不见 */
transform: scale(0.5);
}
</style>
<body>
<!-- 需求: 鼠标移入.box盒子, 让img图片放大或者缩小 -->
<div class="box">
<img src="./images/product.jpeg" alt="">
</div>
</body>
5、倾斜 transform:skew(deg);
/* 倾斜-度数正值为向左倾斜 */
transform: skew(45deg);
/* 倾斜-度数负直为向右倾斜 */
transform: skew(-30deg);
三：渐变
属性：background-image 属性值：liner-gradient
渐变的默认方向： 从上到下
background-image: linear-gradient(red, blue);修改渐变的方向 ： to 方位名词
background-image: linear-gradient(to right, red, blue);透明 => 半透明
/* rgba(0,0,0,0) / transparent => 完全透明 */
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));