什么是雪碧图

雪碧图（CSS Sprites），是一种网页图像处理技术，它将多个小图标或图像合并成一个大的图像文件。这种方法允许浏览器通过一次HTTP请求加载多个图像，而不是为每个小图标单独发起请求。雪碧图通常用于网页设计中的图标、按钮和其他装饰性元素。

雪碧图其优点主要体现在：

1. 减少HTTP请求，提高页面性能，优化用户体验

2. 简化CSS代码，易于实现动画效果，兼容性和响应式设计

3. 减少服务器负载，并且浏览器可以更高效的缓存它

雪碧图制作工具

推荐gka 动画生成工具 使用简单，文档清晰，且不像一般雪碧图在线生成一样具有上传文件数量限制 gka官方文档

使用条件：本地安装node

应用案例

将UI给出的多个帧图片合成为一个雪碧图，并通过CSS关键帧的方式实现动画

操作步骤

1. 首先安装gka

npm i gka -g

2. 运行gka，将指定目录下的文件制作为雪碧图

gka dir [options]

个人目前用到最多的配置是 -ums u： 相同图片复用优化 m： 图片压缩 s： 合图优化 

3. 等待命令执行完成，查看生成结果

可以看到被合成到一起的雪碧图

index.html

 <html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">

    <script name='gkaRibbon'>document.addEventListener('DOMContentLoaded',function(){var d=document.createElement('div');d.innerHTML='<div style="position: fixed; bottom: 10px;">Powered By <a target="_blank" href="https://github.com/gkajs/gka">gka 2.8.7</a></div>';document.body.appendChild(d)});</script>

    <title>gka-preview</title>

<link href="./gka.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="gka-wrap">

        <div id="gka"></div>

    </div>

    <script>

    function preloadImage(names, cb, prefix){

        window.gkaCache = window.gkaCache || [];

        var n = 0,img,imgs = {};

        names.forEach(function(name) {

            img = new Image();

            window.gkaCache.push(img);

            img.onload = (function(name, img) {

                return function() {

                    imgs[name] = img;

                    (++n === names.length) && cb && cb(imgs);

                }

            })(name, img);

            img.src = (prefix || '') + name;

        });

    }

    preloadImage(["sprites.png"], function() {

        document.getElementById('gka').className += " animation"

    }, "img/")

    </script>

</body>

</html>

gka.css

 .gka-wrap {

    width: 1000px;

    height: 1000px;

}

.animation {

    width: 1000px;

    height: 1000px;

    background-image: url("./img/sprites.png");

    background-size: 232000px 1000px;

    background-repeat: no-repeat;

    animation-name: keyframes-Loading;

    animation-duration: 10.68s;

    animation-delay: 0s;

    animation-iteration-count: infinite;

    animation-fill-mode: forwards;

    animation-timing-function: steps(1);

}

@keyframes keyframes-Loading {

    0% {

        width: 1000px;

        height: 1000px;

        background-image: url("./img/sprites.png");

        background-size: 232000px 1000px;

    }

    0.37% {

        background-position: -1000px 0px;

    }

    0.75% {

        background-position: -2000px 0px;

    }

    1.12% {

        background-position: -3000px 0px;

    }

    // ...

    99.25% {

        background-position: -230000px 0px;

    }

    99.63%,

    100% {

        background-position: -231000px 0px;

    }

}

雪碧图的魔力：优化CSS动画场景的更多相关文章

  1. 原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

    花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...

  2. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  3. 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

  4. 关于css雪碧图sprite

    天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...

  5. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  6. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  7. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  8. 响应式下的雪碧图解决方案 － 活用background-size / background-position

    一.概述 在传统的居中布局时,我们常用background-position这个属性来进行雪碧图的定位,在减少数据量的同时,保证准确定位.在移动端使用越来越重的现在,以往的传统定位,已经无法达到目的, ...

  9. 前端优化：css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  10. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

随机推荐

  1. 浏览器中生成 OSS 令牌 | Web Crypto API

    笔者写文章的时候,都会把图片通过自己搭建的一个简单站点 https://imgbed.sugarat.top/ 把图片上传到各种云的对象存储服务(OSS)上. 然后通过CDN访问,保证图片有可靠的访问 ...

  2. 最小代价的 SSO 单点登录方案

    现在有多个 WebApp,想用最小的代价实现 SSO 单点登录.所谓最小代价,我的理解就是对原有 WebApp 的改动最小,因此 在旁路增加一个 SsoWebApp 用于管理 SSO 的账号,进行身份 ...

  3. eBPF 概述：第 4 部分：在嵌入式系统运行

    1. 前言 在本系列的第 1 部分和第 2 部分,我们介绍了 eBPF 虚拟机内部工作原理,在第 3 部分我们研究了基于底层虚拟机机制之上开发和使用 eBPF 程序的主流方式. 在这一部分中,我们将从 ...

  4. 将一个Eigen::Matrix中的数据（数组格式)，按行写入到json文件当中.

    1.这里主要实现如何以数组的形式写入到json文件当中,因为c++的Jsoncpp库中的.append只支持一个字符的写入(还是python的json友好).去网上找了老久的解决办法,发现中文解答全是 ...

  5. 数组对象删除不满足某些条件的对象 js

    recursiveFunction(items, childrenNodeName, ids) { console.log('items', ids); // 获取数组长度 if (items) it ...

  6. Android复习(四)权限—>仅在默认处理程序中使用的权限

    仅在默认处理程序中使用的权限 注意:本指南主要面向准备在 Google Play 商店发布应用的 Android 应用开发者.不过,无论您在哪里发布 Android 应用,为了保护用户隐私,最好都完成 ...

  7. G-数据结构-G

    \[\huge 近日多做数据结构题,或恐后再读不能醒悟,或记其思路,或骂出题人,或不想刷题,虽有此篇. \] \[\] \[\] \[\] \[\] T1 距离 首先这题部分分很多,直接 $ O (n ...

  8. jmeter测试rpc接口-使用dubbo框架调用

    1.下载用于测试dubbo的spring boot项目 参考文章: http://t.zoukankan.com/111testing-p-11297038.html https://zhuanlan ...

  9. 痞子衡嵌入式：瑞萨RA系列FSP固件库分析之外设驱动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是瑞萨RA系列FSP固件库里的外设驱动. 上一篇文章 <瑞萨RA8系列高性能MCU开发初体验>,痞子衡带大家快速体验了一下瑞萨 ...

  10. Windows电脑无法给airpods充电的解决办法

    耳机盒与电脑都有TYPEC接口,由于驱动问题,接在一起是充不了电的,需要更改设置解决: 打开设置 -> 蓝牙与其他设备 -> 显示更多设备 往下翻,找到"更多设备与打印机设置&q ...