CSS深入学习一——平面转换

Lotus_fragrance

已于 2022-05-04 09:42:13 修改

阅读量377

点赞数

文章标签：学习前端 html css

于 2022-05-02 22:16:58 首次发布

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/124537211

版权

#博学谷IT学习技术支持#

字体图标

1.下载字体包

下载地址：

Iconfont：https://www.iconfont.cn/

步骤：

下载解压后是这些文件：

2.引入字体图标

引入图标样式表：

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

iconfont 类名：基本样式，包括字体的使用

icon-xxx ：图标对应的类名，如图所示：

代码演示：

<head>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./字体图标.css">
    <link rel="stylesheet" href="./字体图标下载包/font_3371915_naw2risy12n/iconfont.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#"><span class="iconfont icon-auto"></span>轿车</a></li>
            <li><a href="#"><span class="iconfont icon-data"></span>时钟</a></li>
            <li><a href="#"><span class="iconfont icon-QRcode"></span>二维码</a></li>
            <li><a href="#"><span class="iconfont icon-atm-away"></span>微信小图标</a></li>
            <li><a href="#"><span class="iconfont icon-download"></span>APP下载</a></li>
            
        </ul>
    </div>
</body>

.nav {
    width: 1200px;
    height: 50px;
    margin: 50px auto;
}

ul li {
    float: left;
    line-height: 50px;
    padding: 0 20px;
}

ul li:hover {
    background-color: green;
}

ul li:hover a {
    color: #fff;
}

ul li:hover a span {
    color: pink;
}

代码演示结果：

平面转换

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

1.位移

使用 translate 实现元素位移效果

语法：

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

取值：

像素单位数值

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

注意：

X轴正向为右，Y轴正向为下

如果translate() 只给一个值，表示X轴方向移动的距离。

可以单独某个方向设置移动距离：taanslateX()、translateY().

使用translate快速<

最低0.47元/天解锁文章

Lotus_fragrance

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS深入学习一——平面转换

字体图标1.下载字体包下载地址：Iconfont：https://www.iconfont.cn/步骤：登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地下载解压后是这些文件：2.引入字体图标引入图标样式表：调用图标对应的类名，必须调用2个类名：iconfont 类名：基本样式，包括字体的使用icon-xxx ：图标对应的类名，如图所示：代码演示：<head> ..
复制链接

扫一扫