掌握字体图标与CSS变换：提升网页视觉效果-优快云博客

本文链接：https://blog.youkuaiyun.com/youthwsj/article/details/125837883

1.使用字体图标

1.1引入css

<link rel="stylesheet" href="./fonts/iconfont.css">

类名引入 ,设置iconfont类名和要使用的图标类名icon-daohangdizhi即可

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

使用unicode编码,设置iconfont类名,在标签中写入图标的编码即可

 <strong> &#xe8ab; </strong>

2.变形tranform

tranform也可以写3d属性这里暂时不做讨论

2.1位移translate

translate可以让盒子沿着x轴或者y轴来移动。

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

2.2旋转 rotate

transform: rotate(45deg);

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

/* 设置旋转的中心点位置 transform-origin */

如让元素以右下角为轴心旋转

  transform-origin: right bottom;

2.3缩放 scale

让元素缩放1.5倍

transform: scale(1.5)；

2.4倾斜 skew

让某个元素左倾60度

transform: skew(60deg)；

以上元素通常会配合 transition属性使用 transition属性是给予变化过渡时间和性质

3.渐变

3.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: 400px;
            height: 400px;
            /* 默认是垂直渐变色 */
            /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); */
            /* 通过方位名词调整 to就是从哪里开始*/
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
            /* 通过角度渐变 注意带单位deg*/
            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        }
    </style>
</head>

<body>
    <!-- 线性渐变 -->

    <div class="box">

    </div>
</body>

</html>

3.2 由内而外渐变

background-image: radial-gradient(circle, red, yellow, green, black);