找回密码
 立即注册
首页 业界区 业界 雪碧图的魔力:优化CSS动画场景

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

玻倌瞽 3 天前
什么是雪碧图
雪碧图(CSS Sprites),是一种网页图像处理技术,它将多个小图标或图像合并成一个大的图像文件。这种方法允许浏览器通过一次HTTP请求加载多个图像,而不是为每个小图标单独发起请求。雪碧图通常用于网页设计中的图标、按钮和其他装饰性元素。
雪碧图其优点主要体现在:
1. 减少HTTP请求,提高页面性能,优化用户体验
2. 简化CSS代码,易于实现动画效果,兼容性和响应式设计
3. 减少服务器负载,并且浏览器可以更高效的缓存它
雪碧图制作工具
推荐gka 动画生成工具 使用简单,文档清晰,且不像一般雪碧图在线生成一样具有上传文件数量限制 gka官方文档
使用条件:本地安装node
应用案例
将UI给出的多个帧图片合成为一个雪碧图,并通过CSS关键帧的方式实现动画 
1.png

操作步骤
1. 首先安装gka 
  1. npm i gka -g
复制代码
2. 运行gka,将指定目录下的文件制作为雪碧图
  1. gka dir [options]
复制代码
个人目前用到最多的配置是 -ums u: 相同图片复用优化 m: 图片压缩 s: 合图优化 
3. 等待命令执行完成,查看生成结果
2.png
3.png

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

 
index.html
  1.  <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">
  5.    
  6.     <title>gka-preview</title>
  7. <link href="./gka.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10.    
  11.         
  12.    
  13.    
  14. </body>
  15. </html>
复制代码
 
gka.css
  1.  .gka-wrap {
  2.     width: 1000px;
  3.     height: 1000px;
  4. }
  5. .animation {
  6.     width: 1000px;
  7.     height: 1000px;
  8.     background-image: url("./img/sprites.png");
  9.     background-size: 232000px 1000px;
  10.     background-repeat: no-repeat;
  11.     animation-name: keyframes-Loading;
  12.     animation-duration: 10.68s;
  13.     animation-delay: 0s;
  14.     animation-iteration-count: infinite;
  15.     animation-fill-mode: forwards;
  16.     animation-timing-function: steps(1);
  17. }
  18. @keyframes keyframes-Loading {
  19.     0% {
  20.         width: 1000px;
  21.         height: 1000px;
  22.         background-image: url("./img/sprites.png");
  23.         background-size: 232000px 1000px;
  24.     }
  25.     0.37% {
  26.         background-position: -1000px 0px;
  27.     }
  28.     0.75% {
  29.         background-position: -2000px 0px;
  30.     }
  31.     1.12% {
  32.         background-position: -3000px 0px;
  33.     }
  34.     // ...
  35.     99.25% {
  36.         background-position: -230000px 0px;
  37.     }
  38.     99.63%,
  39.     100% {
  40.         background-position: -231000px 0px;
  41.     }
  42. }
复制代码
 

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册