移动web第一天

一、字体图标

优点：

灵活随时修改颜色和尺寸（color font-size）
轻量级体积小
兼容性好

用法：

Unicode

<title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span{
            font-family: 'iconfont';
        }
        
        .icon1{
            font-size: 60px;
            color: aqua;
        }
    </style>
</head>
<body>
    <span class="icon1">&#xe611;</span>
</body>

font class

  <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span{
            font-family: 'iconfont';
        }

        .iconfont{
            font-size:30px;
            color:bisque;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-hanbao"></span>
</body>

3.在线生成链接

<title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3243645_8568gh9eemr.css ">
</head>
<body>
    <span class="iconfont icon-Dyanjing"></span>
    <span class="iconfont icon-caidan"></span>
    <span class="iconfont icon-dianzan"></span>
</body>

如何使用svg上传生成对应的图标

打开iconfont网站，把svg文件上传

选中，进行上传

font-class实现原理

二、平面转换

分类：

1.位移

2.旋转

3.缩放

1.位移

语法：transform: translate(水平移动距离, 垂直移动距离);

绝对定位加位移实现盒子居中

 .box{
            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 100px auto;
            position: relative;
        }

        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            width: 400px;
            height: 400px;
            background-color: yellow;
            transform: translate(-50%, -50%);

        }

2.旋转

语法：transform:rotate（角度）；

注意：角度单位是deg

取值为正，顺时针旋转；

取值为负，逆时针旋转。

旋转原点：

语法：transform-origin：（）;默认原点为盒子中心

百分比（参照盒子自身尺寸计算）。

多重转换

语法：transform：translate（） rotate（）；

注意：先位移后旋转；先旋转后位移；两种表现效果不一样。

多重转换原理：

旋转会改变网页元素的坐标轴向；

先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。

3.缩放

语法：transform: scale(x轴缩放倍数, y轴缩放倍数);

取值：

一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放；

transform：scale（缩放倍数）；值大于1放大，小于1缩小。

三、渐变

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景。

语法：

background-image：linear-gradient（
	颜色1，
	颜色2，
	颜色3
）；

渐变方向：

 background-image:linear-gradient(
	        to bottom,/* 从上到下 */
            /* to top 从下到上 */
	        颜色1,
	        颜色2,
        )

0到30%blue，30%到50%red，50%到80%green，80%到100%pink

background-image: linear-gradient(
               blue 30%,
               red 50%,
               green 80%,
               pink 100%
            );

display:none 渐变背景图片没有过渡效果

若想鼠标移入图片切换有渐变过渡效果：

1.div里面包装两个图片标签；

2.先让一个图片隐藏（opacity: 0;），一个图片显示；

3.div:hover 再让另一张图片隐藏，另一张图片显示；

4.定位加透明度来实现，透明度有过渡。