字体图标与CSS变换技术详解-优快云博客

字体图标

字体图标是什么?

字体图标展示展示的是图标，本质是字体。

处理简单的、颜色单一的小图标

字体图标的优点：

灵活性:可以灵活的修改样式

轻量级:体积小,渲染快,降低服务器请求次数

兼容性:几乎兼容所有主流浏览器

使用方便

图标库

Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用)

下载字体包（了解）：

字体图标的使用:

步骤1：复制相关文件到本地目录下，并引入字体图标css文件。

步骤2：标签使用字体图标。

类名使用方法:调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等

icon-xxx：图标对应的类名

 <span class="iconfont icon-camera"></span>
 <span class="iconfont icon-gouwuchekong"></span>
 <span class="iconfont icon-arrow-right"></span>

unicode编码使用方法:

 <i class="iconfont">&#xe665;</i>
 <i class="iconfont">&#xe600;</i>
 <i class="iconfont">&#xe667;</i>

伪元素使用方法:

i::before{
     content: '\e669';
     font-size: 30px;
     color: red;
}

因为阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在线地址即可。

复制地址前面记得加上 http:

上传矢量图：

如果图标库没有项目所需的图标怎么办？

IconFont网站上传矢量图生成字体图标

. 与设计师沟通，得到SVG矢量图, IconFont网站上传图标，下载使用

上传 → 上传SVG图标浏览本地图标 → 去除颜色提交加入购物车 → 下载使用

平面转换

平面转换:改变盒子在平面内的形态（位移、旋转、缩放）2D转换

平面转换属性:transform

语法

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

取值（正负均可）

像素单位数值

百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧

translate()如果只给出一个值, 表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中

方法一利用外边距居中:

.son {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -150px;
            width: 300px;
            height: 100px;
            background-color: pink;
}

方法二利用子绝父相居中

.son {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 100px;
            background-color: pink;
}

方法三子绝父相+margin:auto

 .son {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 300px;
            height: 100px;
            background-color: pink;
        }

案例:双开门效果

代码示例:

<!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>Document</title>
    <style>
        .box{
            width: 1366px;
            height: 600px;
            margin: 50px auto;
            background:url(./images/bg.jpg) no-repeat;
            background-size: contain;
            /* 图片位移到盒子外隐藏 */
            overflow: hidden;
        }
        .box::before,
        .box::after{
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background: url(./images/fm.jpg) no-repeat;
            /* 过渡 */
            transition: all 1s;
        }
        .box::after{
            /* 右侧盒子背景图向右位移 */
            background-position: right;  
        }
        .box:hover::before{
            transform: translateX(-100%);
        }
        .box:hover::after{
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

旋转

使用rotate实现元素旋转效果

语法

transform: rotate(角度);

注意：角度单位是deg

技巧：取值正负均可

取值为正, 则顺时针旋转

取值为负, 则逆时针旋转

使用transform-origin属性改变转换原点

语法

默认圆点是盒子中心点

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

取值

方位名词（left、top、right、bottom、center）

像素单位数值

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

使用transform复合属性实现多形态转换

多重转换原理

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

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

使用scale改变元素的尺寸

语法

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

技巧

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

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

渐变

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

语法：

第一个参数可以设置方向

综合案例:华为效果

<!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>Document</title>
    <link rel="stylesheet" href="../代码练习/fonts/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 1200px;
            height: 300px;
            margin: 0 auto;
        }
        .box li{
            position: relative;
            float: left;
            width: 390px;
            height: 300px;
            margin-right: 10px;
            overflow: hidden;
        }
        .box li img{
            width: 100%;
            height: 100%;
            transition: all .5s;
        }
        .box li .text{
            position: absolute;
            left: 0;
            bottom: -30px;
            width: 100%;
            height: 150px;
            padding: 0 20px;
            color: #fff;
            line-height: 30px;
            transition: all .5s;
        }
        .box .text span{
            color: red;
        }
        .box li::before{
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 100%;
            background-image: linear-gradient(transparent ,rgba(0,0,0,0.5));
            opacity: 0;
            transition: all .5s;
            z-index: 1;
        }
        /* 图片缩放 */
        .box li:hover img{
            transform: scale(1.2);
        }
        /* 文字位移 */
        .box li:hover .text{
            transform: translateY(-30px);
        }
        /* 渐变 */
        .box li:hover::before{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/huawei.jpg" alt="">
                <div class="text">
                    <p>招聘</p>
                    <h4>华为面向全球招聘</h4>
                    <p>诚邀东欧、中欧、亚太等全球的科学家、博士、竞赛人才、
                        研发工程师、优秀大学生加盟</p>
                    <p>了解更多<span class="iconfont icon-arrow-right"></span></p>
                </div>
            </li>
            <li>
                <img src="./images/huawei.jpg" alt="">
                <div class="text">
                    <p>招聘</p>
                    <h4>华为面向全球招聘</h4>
                    <p>诚邀东欧、中欧、亚太等全球的科学家、博士、竞赛人才、
                        研发工程师、优秀大学生加盟</p>
                    <p>了解更多<span class="iconfont icon-arrow-right"></span></p>
                </div>
            </li>
            <li>
                <img src="./images/huawei.jpg" alt="">
                <div class="text">
                    <p>招聘</p>
                    <h4>华为面向全球招聘</h4>
                    <p>诚邀东欧、中欧、亚太等全球的科学家、博士、竞赛人才、
                        研发工程师、优秀大学生加盟</p>
                    <p>了解更多<span class="iconfont icon-arrow-right"></span></p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>