- A+
所属分类：Web前端
什么是雪碧图
雪碧图（CSS Sprites），是一种网页图像处理技术，它将多个小图标或图像合并成一个大的图像文件。这种方法允许浏览器通过一次HTTP请求加载多个图像，而不是为每个小图标单独发起请求。雪碧图通常用于网页设计中的图标、按钮和其他装饰性元素。
雪碧图其优点主要体现在：
1. 减少HTTP请求，提高页面性能，优化用户体验
2. 简化CSS代码，易于实现动画效果，兼容性和响应式设计
3. 减少服务器负载，并且浏览器可以更高效的缓存它
雪碧图制作工具
推荐gka 动画生成工具 使用简单，文档清晰，且不像一般雪碧图在线生成一样具有上传文件数量限制 gka官方文档
使用条件：本地安装node
应用案例
将UI给出的多个帧图片合成为一个雪碧图，并通过CSS关键帧的方式实现动画
操作步骤
1. 首先安装gka
npm i gka -g2. 运行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://www.ztsky.cn/wp-content/themes/ztsky/inc/go.php?url=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; } }
