css基础-精灵图和字体

一张图片包括各种图标，用的时候用background-position对移到对应位置显示对应图标

但是图片放大会失真

图片制作完成后也不方便修改

所以如果小图票，我们可以用字体库解决

https://icomoon.io/

https://www.iconfont.cn/

 

字体使用步骤

1：下载，https://icomoon.io/app/#/select

2：解压到网站目录

3：引有style.css

4:  使用对应的字体样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fonts/style.css">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 100vh;
            flex-direction: column;
        }

        span {
            font-size: 30px;
            color: red;

        }

        span:nth-child(1),
        span:nth-child(3) {
            animation: loading 1s linear infinite
        }

        span:nth-child(2) {
            animation: loading2 1.8s steps(9, end) infinite;
        }


        @keyframes loading {


            100% {
                transform: rotate(360deg);
            }

        }

        @keyframes loading2 {
            50% {
                transform: rotate(180deg);

            }

            100% {
                transform: rotate(360deg);
            }

        }
    </style>
</head>

</head>

<body>
    <span class="icon-spinner4"></span>
    <span class="icon-spinner6"></span>
    <span class="icon-spinner9"></span>
    <span class="icon-list"></span>
    <span class="icon-list2"></span>
</body>

</html>

 

posted on 2023-07-22 18:35  码农-编程小子  阅读(7)  评论(0)  编辑  收藏  举报