雪碧图的魔力:优化CSS动画场景

  • 雪碧图的魔力:优化CSS动画场景已关闭评论
  • 36 次浏览
  • A+
所属分类:Web前端
摘要

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

什么是雪碧图

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

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

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

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

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

雪碧图制作工具

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

使用条件:本地安装node

应用案例

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

雪碧图的魔力:优化CSS动画场景

操作步骤

1. 首先安装gka 

npm i gka -g

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

gka dir [options]

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

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

雪碧图的魔力:优化CSS动画场景雪碧图的魔力:优化CSS动画场景

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

雪碧图的魔力:优化CSS动画场景

 

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;     } }