【字符实体】

最新推荐文章于 2024-10-08 11:32:20 发布

啊想啊

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量77

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_54882396/article/details/126053180

版权

字体图标介绍

iconfont图标库下载

特点：加载速度快兼容性高灵活性高

使用方法

1 Unicode编码

(1)引入iconfont.css样式表

(2)标签粘贴Unicode编码

(3)标签调用类名iconfon

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

2 类名

（1）引入iconfont.css样式表

（2）标签调用名{iconfont（font-family） }

<span class="iconfont">&#xe66a;</span>

（3）icon-xx（图标对应的类名）

*引用字体图标css可以用线上也可以用线下前提要引用

平面转换

属性： transform

位移{translate(x, y)

translateX()

translateY()

}

*定位盒子居中可以用margin和位移：translate(-50%, -50%)

两者区别：margin移动盒子会影响其余的盒子。把其他人挤走

位移translate移动盒子不会影响其他的盒子。不脱标。

旋转

transform: rotate(45deg);    一定写单位

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

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

设置中心点 transform-origin

  transform-origin: right bottom;

缩放 scale

transform: scale(1.5)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

倾斜

transform: skew(60deg)；

渐变

<!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>