字体图标位移旋转缩放渐变背景色

汪帅帅帅帅

已于 2022-12-28 14:31:46 修改

阅读量321

点赞数 4

CC 4.0 BY-SA版权

文章标签：学习前端 html5 css css3

于 2022-07-18 00:26:10 首次发布

本文链接：https://blog.csdn.net/weixin_72297531/article/details/125839220

本文介绍了字体图标在网页设计中的应用，包括通过类名引入和Unicode编码方式使用字体图标。接着详细讲解了CSS平面转换，如位移、旋转、缩放和渐变背景色的实现方法，包括translate、rotate、scale属性的使用，以及transform-origin改变转换原点和多重转换的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字体图标font

使用字体图标技巧实现网页中简洁的图标效果

字体图标的优点：

1，灵活性：灵活的修改样式，例如：尺寸、颜色等

2，轻量级：体积小、渲染块、降低服务器请求次数

3，兼容性：几乎兼容所有主流浏览器

4，使用方便

图标库：

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

下载字体包（了解）：

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

字体图标-类名引入

1，使用字体图标 – 类名：引入字体图标样式表

<!-- 引入css -->
    <link rel="stylesheet" href="../fonts/iconfont.css">

2，调用图标对应的类名，必须调用2个类名

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

·icon-xxx：图标对应的类名

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

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

<!-- 记得加http: -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

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

字体图标-unicode

使用字体图标 –unicode编码：

HTML

<!-- 使用一个固定类名 -->
    <span class="iconfont">&#xe600;</span>

调用类名class=“iconfont”

使用字体图标 – 伪元素：通过查看iconfont.css文件

 i::after {
            content: '\e606';
        }

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换：

1，改变盒子在平面内的形态（位移、旋转、缩放）

2，2D转换

平面转换属性：

transform

目标：使用translate实现元素位移效果

语法：

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

取值（正负均可）

1，像素单位数值

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

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

技巧：

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

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

<!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>
        div {
            width: 200px;
            height: 200px;
            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); */
        }
    </style>
</head>

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

</html>

位移-绝对定位居中

目标：使用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>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

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

</html>

旋转效果

目标：使用rotate实现元素旋转效果

语法：

transform: rotate(角度);

注意：角度单位是deg

技巧：取值正负均可

1，取值为正,则顺时针旋转

2，取值为负,则逆时针旋转

案例：

1，旋转的三角和头像

转换原点

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

语法：

1，默认圆点是盒子中心点

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

取值：

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

2，像素单位数值

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

<!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: 600px;
            height: 600px;
            border-radius: 50%;
            background-color: pink;
            transition: all 2s;
            margin: 100px auto;
        }

        .box:hover {
            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复合属性实现多形态转换

多重转换技巧：transform: translate( ) rotate( )

多重转换原理：

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

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

<!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>
    .an-box {
      position: relative;
      width: 299px;
      height: 299px;
      margin: 50px auto 45px;
    }


    .an-box .png {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .inner-img0 {
      width: 100%;
      height: 100%;
      background: url(../images/page2_img4.png) no-repeat;
      transition: all 2s;
    }

    /* 旋转 */
    .inner-img1 {
      width: 226px;
      height: 226px;
      background: url(../images/page2_img3.png) no-repeat;
      transition: all 2s;
    }

    .inner-img2 {
      width: 185px;
      height: 185px;
      background: url(../images/page2_img2.png) no-repeat;
      transition: all 2s;
    }

    /* 旋转 */
    .inner-img3 {
      width: 167px;
      height: 167px;
      background: url(../images/page2_img1.png) no-repeat;
      transition: all 2s;
    }

    .an-box:hover .inner-img1 {
      transform: translate(-50%, -50%) rotate(360deg);
    }

    .an-box:hover .inner-img2 {
      transform: translate(-50%, -50%) rotate(360deg);
    }

    .an-box:hover .inner-img3 {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  </style>
</head>

<body>
  <div class="an-box">
    <div class="inner-img0 png"></div>
    <div class="inner-img1 png"></div>
    <div class="inner-img2 png"></div>
    <div class="inner-img3 png"></div>
  </div>
</body>

</html>

缩放

目标：使用scale改变元素的尺寸

思考:改变元素的width或height属性能实现吗？

语法：

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

技巧：

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

2，transform: scale(缩放倍数);

3，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>
    <style>
        .one {
            width: 500px;
            height: 400px;
            margin: 200px auto;
            overflow: hidden;
        }

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

        .one:hover img {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="one">
        <img src="../images/hp.png" alt="">
    </div>
</body>

</html>

渐变背景色

目标：使用background-image属性实现渐变背景效果

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

2，一般用于设置盒子的背景

/* 渐变色默认是从上到下*/

background-image: linear-gradient(yellow, red, green);

/* 渐变色从左到右 to属性后面跟上方位名词*/

第一个参数可以设置方向

 background-image: linear-gradient(to right, red, yellow, aqua);

/* 渐变色也可以通过角度来进行设置,单位是deg*/

background-image: linear-gradient(45deg, yellow, red, aqua, blue);

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

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