什么是雪碧图
雪碧图(CSS Sprites),是一种网页图像处理技术,它将多个小图标或图像合并成一个大的图像文件。这种方法允许浏览器通过一次HTTP请求加载多个图像,而不是为每个小图标单独发起请求。雪碧图通常用于网页设计中的图标、按钮和其他装饰性元素。
雪碧图其优点主要体现在:
1. 减少HTTP请求,提高页面性能,优化用户体验
2. 简化CSS代码,易于实现动画效果,兼容性和响应式设计
3. 减少服务器负载,并且浏览器可以更高效的缓存它
雪碧图制作工具
推荐gka 动画生成工具 使用简单,文档清晰,且不像一般雪碧图在线生成一样具有上传文件数量限制 gka官方文档
使用条件:本地安装node
应用案例
将UI给出的多个帧图片合成为一个雪碧图,并通过CSS关键帧的方式实现动画
操作步骤
1. 首先安装gka 2. 运行gka,将指定目录下的文件制作为雪碧图个人目前用到最多的配置是 -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">
-
- <title>gka-preview</title>
- <link href="./gka.css" rel="stylesheet" type="text/css">
- </head>
- <body>
-
-
-
-
- </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;
- }
- }
复制代码
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |