CSS雪碧图制作emoji表情包

最新推荐文章于 2023-02-15 08:44:33 发布

VIP文章 Albert_Tiger

最新推荐文章于 2023-02-15 08:44:33 发布

阅读量4.2k

点赞数

分类专栏： css技巧

本文链接：https://blog.csdn.net/qq_35425276/article/details/79422835

版权

效果图：
这里写图片描述

原理：利用雪碧图，来实现emoji表情包，减少图片请求数。
表情包转换为文字 & 文字转换为表情包维护两个对象来实现。

缺点：表情包大小由雪碧图中表情包大小控制，不能更改。

htm代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>emo</title>
    <link rel="stylesheet" href="emoji.css">
    <style>
        ul,li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #emo_container {
            width: 280px;
            display: flex;
            flex-wrap: wrap;
        }
        #emo_container li {
            width: 70px;
            height: 70px;
            margin-bottom: 10px;
            c

最低0.47元/天解锁文章

Albert_Tiger

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS雪碧图制作emoji表情包

效果图：原理：利用雪碧图，来实现emoji表情包，减少图片请求数。表情包转换为文字 &amp; 文字转换为表情包维护两个对象来实现。缺点：表情包大小由雪碧图中表情包大小控制，不能更改。htm代码&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"...
复制链接

扫一扫