前端的第九天（CSS进阶：字体图标、平面转换、渐变）

最新推荐文章于 2022-05-21 20:06:53 发布

纸黑墨白

最新推荐文章于 2022-05-21 20:06:53 发布

阅读量405

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_56901161/article/details/121306390

版权

本文深入探讨了前端开发中CSS的高级技巧，包括字体图标的使用流程，从在Iconfont官网下载字体包，到引入样式表和调用图标。接着介绍了平面转换的概念，如位移、旋转和缩放，并提供了相关案例。最后讲解了渐变背景的创建，通过实例展示了如何应用在前端设计中。

摘要由CSDN通过智能技术生成

前端的第九天（CSS进阶：字体图标、平面转换、渐变）

在这里插入图片描述

一、字体图标

1、字体图标简介

在这里插入图片描述

2、使用流程：

打开iconfont官网：https://www.iconfont.cn/

下载字体包： 登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
在这里插入图片描述
引入字体图标样式表

调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

3、上传矢量图

在这里插入图片描述

二、平面转换

1、平面转换概念

在这里插入图片描述

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>
        .father {
     
            position: relative;
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
            margin:0 auto;
        }
        .lover {
     
            width: 600px;
            height: 100px;
            margin-top: 150px;
            background-color: orange;
            color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
            font-weight: bold;
        }
        .son1 {
     
            position: absolute;
            top: 150px;
            width: 300px;
            height: 100px;
            background-color: skyblue;
            transition: all 1s;
        }
        .son2 {
     
            position: absolute;
            top: 150px;
            right: 0px;
            width: 300px;
            height: 100px;
            background-color: skyblue;

最低0.47元/天解锁文章

纸黑墨白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的第九天（CSS进阶：字体图标、平面转换、渐变）

项目搭建第一天1.Header部分开发2.Footer部分开发3.网站入口xtx-entry部分开发4.新鲜好物面板 xtx-new-goods 部分开发5.生鲜商品面板 xtx-new-goods 部分开发
复制链接

扫一扫

专栏目录