雪碧图的魔力：优化CSS动画场景
什么是雪碧图
雪碧图（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://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动画场景的更多相关文章
- 原创：CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- 关于css雪碧图sprite
天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...
- 前端工程师技能之photoshop巧用系列第五篇——雪碧图
× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
- 响应式下的雪碧图解决方案 － 活用background-size / background-position
一.概述 在传统的居中布局时,我们常用background-position这个属性来进行雪碧图的定位,在减少数据量的同时,保证准确定位.在移动端使用越来越重的现在,以往的传统定位,已经无法达到目的, ...
- 前端优化：css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
随机推荐
- C# 基础 – 装箱 / 拆箱, 堆 / 栈
前言 有些概念可能你用不到, 但是懂也无妨. 装箱 / 拆箱 参考: C#装箱和拆箱(Boxing 和 UnBoxing) 通常讲到这些都跟性能有关. 把值类型变成引用类型就叫装箱. int numb ...
- PyCharm 的一些基本设置&&常用插件&&快捷键
PyCharm一些基本设置 1.主题色彩 2.添加设置:Ctrl+鼠标滚轮上下调节字体大小 3. 中文语言包 4.翻译插件 5.快捷键
- freemarker实现导出word复选框可点击效果
记一次java导出word文档,导出的word文档里包含复选框并且能点击,一开始做了个输出字符的,比如这样: □,然而并不能满足需求,网上找了一大堆也都是这种的. 正文开始: 先在word中添加复选框 ...
- 参与 2023 第一季度官方 Flutter 开发者调查
Flutter 3.7 已经正式发布,每个季度一次的 Flutter 开发者调查也如约而至,邀请社区的各位成员们填写! 调查表链接: https://flutter.cn/urls/2023q1wx ...
- 技术储备--SPI接口硬件协议栈芯片W5500使用
整体思路: 移植官方软件包代码, 配置好底层的SPI收发函数以及片选脚操作, 至于临界区操作函数,根据实际情况进行添加,也可以不加. 这就移植好了,就可以在我们自己的板子上跑官方的示例程序了. 官方软 ...
- Wpf使用NLog将日志输出到LogViewer
1 LogViewer LogViewer是通过UDP传输的高性能实时log查看器. 具有一下特性: 通过UDP读取日志 通过文件导入日志 导出日志到一个文件中 排序.过滤(日志树,日志等级)和查找 ...
- Spirng Aop 实现自定义注解及实现
需求:日志记录 需要记录当前用户访问的每个接口对应的前端页面功能信息 声明一个注解 @Documented @Retention(RetentionPolicy.RUNTIME) @Target({E ...
- Vue Cli 创建项目在 GitHub 部署 history 路由模式
1.修改打包路径 在 vue.config.js 中添加 publicPath 配置,其中 teambition-vue 是你项目的 github 名字.否则会找不到资源. module.expo ...
- `std::future`--异步的优势
std::future 相比于直接使用线程在 C++ 中有几个重要的优势,主要体现在同步结果获取.简化代码管理.以及更安全的异步任务管理等方面.以下是 std::future 的一些主要优势: 1. ...
- 多校A层冲刺NOIP2024模拟赛05
T1.好数(number) 签到题 把选三个数相加拆为选择一个数,然后看前面有没有能用两个数组合出答案. $ O(n^2) $ . 码( #include<bits/stdc++.h> u ...