字体图标+平面转换+渐变

字体图标

优点：

灵活：可以修改样式，颜色（color），字体大小（font-size）。
轻量：体积小，渲染快，降低服务器请求次数。
兼容：几乎兼容所有主流浏览器
使用方便

使用：

unicode编码：

<!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>字体图标unicode编码引入</title>
    <!-- 1.先引入字体库 -->
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <style>
        /* 3.选择字体样式 */
        
        span {
            font-family: 'iconfont';
        }
        
        .size {
            font-size: 60px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 2.插入字体编码 -->
    <span class="size">&#xe8ab;</span>
</body>

</html>

类名引入

<!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>
    <!--1.先引入字体图标样式表 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        
        /* 3.改变样式要用类名改变 */
        
        .iconfont {
            font-size: 100px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 2.引用类名 有两个类名 iconfont icon-xxxxxx -->
    <span class="iconfont icon-caidan"></span>
</body>

</html>

svg转换字体图标

先打开阿里巴巴的图标库，再将svg上传至阿里巴巴的图标库里

2.尽量去除颜色并提交，这时就会转到 “我上传的图标”中，这时，svg就会转换成字体图标

在线使用

1.将这些字体图标放到自己的购物车新建的项目里。

2.1添加进入项目后，如果用unicode编码的形式获取在线链接。需要点击unicode之后再点击收起在线链接

当然可以不通过此方式，此方式较为麻烦，还要手动添加自己所学的字体图标编码，可以通过 "下载至本地"的方式获取一个iconfont.css样式文件去引用，引用的方法就是上面 “使用” 中的第一个方法unicode编码

2.2如果是使用类名的形式，就要先点击 font-class ，再点击收起在线链接

点击后就可以获得粉红色高亮的链接，将其复制，然后放在引入css样式的链接中

<link rel="stylesheet" href="//at.alicdn.com/t/font_3244325_ult321hagv.css">

之后就可以通过类名引入

  <span class="iconfont icon-caidan"></span>

平面转换（transform）

三大形态（平移旋转缩放）

1.平移（ transform: translate(参数,参数 );）

根据自身所在的位置去移动，不是根据父元素移动。

translate()里的参数可以是像素，也可以是百分比，当translate()里的参数只有一个时智慧向左向右移动。

像素：

<!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>2D转换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        div {
            height: 300px;
            width: 300px;
            background-color: skyblue;
            transform: translate(0px, 0px);
            transition: 5s;
        }
        
        div:hover {
            transform: translate(150%, 150%);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

百分比：

<!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>2D转换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        div {
            height: 300px;
            width: 300px;
            background-color: skyblue;
            transform: translate(0px, 0px);
            transition: 5s;
        }
        
        div:hover {
            transform: translate(100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.旋转（transform:rotate();）

rotate()里的参数要加 deg ，代表旋转多少度。下面就是旋转（720度）

<!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 {
            display: block;
            margin: 100px auto;
            transition: 1s;
        }
        /* 旋转用ratate() 括号要加单位deg */
        
        img:hover {
            transform: rotate(720deg);
        }
    </style>
</head>

<body>
    <img src="./images/fly.png" alt="">
</body>

</html>

混合写法：

平移+旋转：

 <style> 
        div:hover img {
            transform: translate(1000px) rotate(360deg);
        }
 </style>

旋转+平移：（坐标也会旋转，所以用加上 transition属性来看的话，图片会像一个抛物线移动）

 <style> 
     div:hover img {
            transform: rotate(360deg) translate(1000px);
        }
 </style>

3.缩放（ transform: scale(2);）

scale()里的参数是数字，可以是一个数值，也可以是两个数值（可以是整数也可以是小数）且不需要加单位。数值为正放大，数值为负缩小。

   <style> 
       div:hover img {
            transform: scale(2.5);
        }
    </style>

改变旋转中心（ transform-origin）

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 {
            display: block;
            margin: 100px auto;
            transition: 1s;
            transform-origin: left top;
        }
        
        img:hover {
            transform: rotate(720deg);
        }
    </style>
</head>
<img src="./images/fly.png" alt="">

<body>

</body>

</html>

像素：

<!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 {
            display: block;
            margin: 100px auto;
            transition: 1s;
       		transform-origin: 100%, 100%;
        }
        
        img:hover {
            transform: rotate(720deg);
        }
    </style>
</head>
<img src="./images/fly.png" alt="">

<body>

</body>

</html>

百分比：

<!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 {
            display: block;
            margin: 100px auto;
            transition: 1s;
            transform-origin: 0 465px;
        }
   
        
        img:hover {
            transform: rotate(720deg);
        }
    </style>
</head>
<img src="./images/fly.png" alt="">

<body>

</body>

</html>

渐变（background-image）

给背景图片添加颜色

线性渐变（linear-gradient();）

颜色从上到下渐变

 div {
            background-image: linear-gradient(black red);
        }

根据百分比渐变（记得逗号隔开）

    div {
            width: 300px;
            height: 300px;
            background-image: linear-gradient(black 10%, red 90%);
        }

改变渐变的方向（在颜色的前面 + to 方位名词，逗号也不要忘了）

  div {
            width: 300px;
            height: 300px;
            background-image: linear-gradient( to right, rgb(187, 109, 176), red);
        }

通过旋转的度数去改变渐变的方向（在颜色的前面 + 45deg，逗号也不要忘了）

   div {
            width: 300px;
            height: 300px;
            background-image: linear-gradient(45deg, rgb(187, 109, 176), red);
        }

补充：

盒子垂直居中的margin值问题：

当绝对定位的top值和left值为50%时，margin的值为什么不是-50%？

因为绝对定位的移动是根据父盒子来移动，而margin也是根据父盒子移动，所以margin值与绝对定位的top值和left值抵消了。

<!-- 盒子水平垂直居中的方法 -->
<!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>div水平垂直居中的三种方法</title>
    <!-- 1.绝对定位居中 -->
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 限制盒子的宽度 */
            box-sizing: border-box;
        }
        /* 绝对定位让盒子居中 */
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .one {
            position: relative;
            height: 300px;
            width: 300px;
            background-color: pink;
        }
        
        .two {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50% -50%;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>

    <div class="one">
        <div class="two"></div>
    </div>

</body>

</html>

我的移动web第一天知识总结