字体图标
平面转换
渐变

字体图标- Iconfont

优点：

1.灵活的修改大小、颜色等样式

2.体积小、渲染快

3.兼容性好

4.使用方便：直接下载使用

使用方法：

网站地址： Iconfont：www.iconfont.cn/

Unicode编码

 <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span{
            font-family: "iconfont";
            font-size: 40px;
            color: brown;
        }
    </style>

<body>
    <span>&#xe703;</span>
    <span>&#xe702;</span>
</body>

2.Font class 字体类名（常用）

<link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .rmb{
            font-size: 50px;
            color: brown;
        }
    </style>

<body>
    <span class="iconfont icon-rmb"></span>
    <span class="iconfont icon-rmb rmb"></span>
</body>

3.上传svg图标

①点击上传按钮，上传svg图标

②去除颜色并提交

③加入购物车下载即可

4.在线图标

①点击在线链接获取地址

②在线搜索获取字体图标类名

③引用在线地址，选择应用字体图标

<link rel="stylesheet" href="https://at.alicdn.com/t/font_3243718_xt361iwf5x.css">

<body>
    <span class="iconfont icon-arrow-right"></span>
    <span class="iconfont icon-arrow-double-left"></span>
    <span class="iconfont icon-arrow-double-right"></span>
</body>

平面转换（2D转换）-transform

位移
旋转
缩放

位移

作用：实现元素位移效果（x轴左负右正、y轴上负下正）

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

 div{
            width: 100px;
            height: 100px;
            background-color: #baf;
            transform: translate(200px, 100px);
            transition: all .5s;
        }
        div:hover{
            background-color: #bfa;
        }

拓展：元素居中

1.定位+margin

<style>
	.father{
		position: relative;
         width: 400px;
         height: 400px;
         background-color: #bfa;
         margin: 100px auto;
        }
	.son{
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: #baf;
         margin-top: 100px;
         margin-left: 100px;
        }
 </style>

    <div class="father">
        <div class="son"></div>
    </div>

2.位移+定位

<style>
        .father{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: #bfa;
            margin: 100px auto;
        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: #baf;
            transform: translate(-50%, -50%);
        }
    </style>

    <div class="father">
        <div class="son"></div>
    </div>

旋转

作用：实现元素旋转效果（正负均可）顺正逆负

语法： transform: rotate(角度);

<style>
        img{
            margin: 50px auto;
            display: block;
            transition: 2s;
        }
        img:hover{
            transform: rotate(1080deg);
        }
    </style>
<body>
        <img src="./images/rotate.png">
</body>

转换原点

作用：改变旋转点

语法： transform-origin: 原点水平位置原点垂直位置;

<style>
        img{
            margin: 50px auto;
            display: block;
            transition: 10s;

            /* 旋转原点三种表示方法  ①方位词   ②像素    ③百分比*/

            /* 左上 */
            /* transform-origin:left top; */
            /* transform-origin: 0px 0px; */
            /* transform-origin: 0% 0%; */

            /* 右下 */
            /* transform-origin:right bottom; */
            /* transform-origin: 650px 650px; */
            transform-origin: 100% 100%;
            
        }
            img:hover{
            transform: rotate(1080deg);
        }
    </style>
<body>
        <img src="./images/rotate.png">
</body>

多重转换（复合属性）

语法:transform: translate() rotate();

<style>
        .box{
            margin: 200px auto;
            width: 800px;
            border: 1px solid salmon;
        }
        img{
            width: 200px;
            transition: 5s;
        }
        .box:hover img{
         transform: translate(600px)  rotate(360deg);
        }
    </style>
    <div class="box">
        <img src="./images/tyre1.png" >
    </div>

缩放

作用：改变元素的尺寸

注意：一般设置其中一个值，使x轴、y轴等比例缩放

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

 <style>
        .box{
            width: 320px;
            height: 230px;
            border: 1px solid slateblue;
            margin: 100px auto;
            overflow: hidden;
        }
        img{
            width: 320px;
            height: 230px;
            transition: 1s;
        }
        .box:hover img{
            transform: scale(1.2);
        }
    </style>
    <div class="box">
        <img src="./images/product.jpeg">
    </div>

渐变背景- background-image

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

语法：

①用于盒子的渐变

<style>
        div{
            width: 200px;
            height: 200px;

            /* 渐变方向可以改变 */
            /* 默认渐变方向 从上到下 */
            background-image: linear-gradient(#baf, #bfa, rgb(39, 4, 92));

            /* 从下到上 */
            background-image: linear-gradient(0deg, pink, yellow);
            background-image: linear-gradient(to top, pink, yellow);

            /* 从左到右 */
            background-image: linear-gradient(90deg, pink, yellow);
            background-image: linear-gradient(to right, pink, yellow);

            /* 从左下角到右上角渐变 */
            background-image: linear-gradient(45deg, pink, yellow);
            background-image: linear-gradient(to top right, pink, yellow);
        }
    </style>
<body>
    <div></div>
</body>

②用于背景图片的渐变

background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));

移动web第一天