一、字体图标

一颗胖头橙子

已于 2022-07-18 21:05:54 修改

阅读量371

点赞数

文章标签：前端 html5 css3 javascript

于 2022-07-17 23:57:22 首次发布

本文链接：https://blog.csdn.net/m0_72430529/article/details/125838308

版权

字体图标:展示出来是图标的样子,但实际上是字体;它可以处理简单的、颜色单一的小图标

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

字体图标的三种引入方式:

第一种:使用类名引入字体图标

步骤:

前提:一定要先建一个fonts的文件夹,将所需字体图标下载在这里面;

1.引入iconfont.css

2.设置以个标签,给标签设一个固定的类名iconfont,还要再取一个字体图标的类名(可以在阿里巴巴字体库里复制)

<!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>
    <!-- 1.引入字体图标的css -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        em {
            color: aqua;
        }

        .red {
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 2.写一个标签,加他加固定类名iconfont -->
    <span class="iconfont icon-ashbin"></span>

    <div class="iconfont icon-gouwuchekong red"></div>

    <i class="iconfont icon-browse"></i>

    <em class="iconfont  icon-network
"></em>
</body>

</html>

第二种:使用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>Document</title>
    <!-- 1.引入css -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
    <!-- 2.使用一个写固定类名 -->
    <i class="iconfont">&#xe665;</i>

    <span class="iconfont">&#xe668;</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>Document</title>
    <!-- 1.引入字体的图标的css -->
    <link rel="stylesheet" href="./fonts/iconfont.css">

    <style>
        i::after {
            /* 内容 */
            content: '\e600';
        }

        .two::after {
            content: '\e667';
        }
    </style>
</head>

<body>
    <i class="iconfont"></i>

    <i class="iconfont two"></i>
</body>

</html>

以上三种方法都是通过引入iconfont.css样式来设置字体图标,但这种方式有bug,每次在图标库下载新的图标时都需要重新下载一次字体图标的文件才行,所以可以通过链接线上的地址就可以避免这个

链接地址是://at.alicdn.com/t/font_3234864_h0da2uig6lr.css

要记住在前面加上http:

二、变形 transform（2D）

位移transform:translate

        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 移动盒子 */
            /* margin-left: -100px; */
            /* 位移translate(X,Y); */
            /* transform: translate(-100px, 0); */
            /* 当Y轴为0时,是可以省略的 */
            /* transform: translate(-100px); */
            /* 位移translate(水平方向, 垂直方向)  记这个 */
            transform: translate(100px, 100px);
            /*位移translateX(水平方向) translateY垂直方向 */
            transform: translateX(100px) translateY(100px);
            /* 单方向写法 */
            /* transform: translateX(100px); */
        }

位移盒子与通过margin移动盒子的区别

1.margin的100%是浏览器的距离;translate(100%)是自己原来位置的大小.

2. margin移动盒子会影响下面的元素;transform: translate不会影响其他的元素

让盒子垂直水平居中的方式

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>
    <style>
        .father {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: pink;
        }

        .father .son {
            position: absolute;
            /* 先移动父盒子宽的一半 */
            left: 50%;
            /* 在移动小盒子宽一半 */
            /* margin-left: -100px; */
            /* 位移 100%是自己大小,50%是自己大小的一半 */
            /* 先移动父盒子高的一半 */
            top: 50%;
            /* 在移动小盒子高的一半  */
            /* margin-top: -100px; */
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

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

</html>

2.方法二:先让盒子在原来的位置脱离标准流,再通过margin:auto;4个方向全部auto盒子就可以居中

<!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>
        .father {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: pink;
        }

        .father .son {
            /* 1.先让盒子在原来的位置脱离标准流 */
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            /* 2.通过margin:auto;4个方向全部auto盒子就可以居中 */
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

旋转:transform:rotate

角度单位是 deg

单位也可以是turn,1turn表示一圈

取值为正 , 则顺时针旋转

取值为负 , 则逆时针旋转

<!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: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: pink;
            /* 过渡 */
            transition: all 2s;
        }

        .box:hover {
            /* 旋转 rotate(角度)*/
            /* 360deg =1turn(一圈)*/
            transform: rotate(2turn);
        }

        .box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/p4-tx3.png" alt="">
    </div>
</body>

</html>

改变旋转中心:transform-origin

默认旋转中心是元素的正中间,但也可以通过transform-origin属性改变旋转中心

有left right center top bottom五方位也可以通过设置px值和百分比

多重转换:

可以将一个元素设置位移旋转等多重转换,但一定要注意多重转换的连写结构,一定是位移再第一个多重变化时,先位移在旋转,不然他X轴和Y轴会发生变化

            /* 注意:多重变化时,先位移在旋转,不然他X轴和Y轴会发生变化 */
            transform: translate(800px, 0) rotate(360deg);

缩放:transform:scale

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

缩放 scale(缩放的倍数)等比例缩放

1倍以上是放大 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>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            transition: all 1s;
        }

        .box:hover {
            /* 缩放 scale(缩放的倍数)等比例缩放*/
            transform: scale(2);
        }

        .one {
            width: 500px;
            height: 400px;
            margin: 200px auto;
            overflow: hidden;
        }

        .one img {
            width: 100%;
            height: 100%;
            transition: all 1s;
        }

        .one:hover img {
            /* 1倍以上是放大 1倍以下是缩小*/
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <!-- <div class="box">

    </div> -->

    <div class="one">
        <img src="./images/huawei.jpg" alt="">
    </div>
</body>

</html>

倾斜:transform:skew

倾斜 skew()单位是度数;

倾斜的度数正值往左边倾斜负值值往右边倾斜

度数不要超过90deg超过之后了盒子就变大为一条线不显示

        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 200px auto;
            /* 倾斜  skew()单位是度数 */
            /* 倾斜的度数 正值往左边倾斜  负值往右边倾斜 */
            /* 度数不要超过90deg  超过之后了盒子就会变大成为一条线不显示 */
            transform: skew(-30deg);
        }

三.线性渐变background-image:linear-gradient();

<!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: 400px;
            height: 400px;
            /* 渐变色linear-gradient */
            /* 渐变色默认是从上到下 */
            /* background-image: linear-gradient(yellow, red, #000, green); */

            /* 渐变色从左到右 to改变他渐变方向*/
            /* to属性后面跟上方位名词 left左  right右 top上 bottom下 */

            /* background-image: linear-gradient(to top, yellow, red, blue); */

            /* 渐变色也可以通过角度来进进行设置 单位是deg */
            /* background-image: linear-gradient(45deg, yellow, red); */

            /* 用的最多的渐变色  从透明色变成半透明色使用的比较多 */

            background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>