css3帧（雪碧图）动画实现

所谓雪碧图就是一张图，包含了很多小图，可以通过这些小图实现一个动作，如下是一张雪碧图，我们可以通过CSS的animation来设置背景图片的位置，呈现出一种动态效果。

代码实现

.test{ // 务必设置box的宽度，这样其他不在box中就不会显示width:100px;height:100%; background-image:url(text.png);background-repeat:no-repeat; background-position:0 0; // (可忽略)background-size:700px;  -webkit-animation:animate-name 2.2s steps(7) both;  // steps（7）表示设置7帧完成动画animation:animate-name 2.2s steps(7) both;
}@-webkit-keyframes animate-name{  0%{ background-position:0 0;} 100%{ background-position:-700px 0;}
}@keyframes animate-name{  0%{ background-position:0 0;}  100%{ background-position:-700px 0;}
}

注意几点：
steps(7) 是关键哦
关键帧只需设置0%（ background-position:0 0;），100%（ background-position:-700px 0;）
动画均匀地分7帧执行，每次都有固定相等的偏移量
雪碧图由7张图片拼成的
雪碧图的宽度是设置动画盒子的7倍

infinite 循环执行
both 执行一次帧比雪碧图数量少一帧才可以停止执行

css3帧（雪碧图）动画实现相关推荐

CSS3实现雪碧图动画
注意几点(以下示例): 雪碧图: 由22张图片拼成的,雪碧图的宽度是设置动画元素的22倍关键帧设置: @keyframes test_anim{ 0%{ background-positio ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
使用css3实现雪碧图帧动画
背景: 此需求是在html界面实现,纯原生,没有像vue生命周期那些东西. 场景: 一个单纯的图片背景,想要在上面加个动图.一瞬间脑子里想到两个方案: 一:最省前端功夫的:ui压缩一个gif图出来二 ...
原创：CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值问题很明显, ...
css雪碧图动画,CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...
雪碧图HTML人物,animateSprite-可控制雪碧图（sprites）动画的jQuery插件
jquery.animateSprite是一款可控制雪碧图(sprites)制作动画效果的jQuery插件.通过该插件可以控制雪碧图播放.暂停.反向播放和更改播放动画速度等. 安装可以通过npm或b ...
雪碧图游戏开发_Android游戏开发–雪碧动画
雪碧图游戏开发如果到目前为止您仍然关注该系列 ,我们将在处理触摸,显示图像和移动它们方面广为人知. 但是,动态图像看起来很呆板,因为它看起来确实是假的和业余的. 为了给角色一些生活,我们将需要做更 ...
CSS3 animation属性运用—雪碧图
一.雪碧图指CSS中的图片拼合技术,将多个背景图拼合在同一张图片上,在使用时按照需求对图片位置进行改动. 二.animation属性 1. 语法: animation: name duration ...
【前端小实战】百度新闻雪碧图及动画（CSS sprites）
文章目录前言 ~ 雪碧图一.页面效果展示二.代码实现解析三.完整代码前言 ~ 雪碧图雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...

css3帧（雪碧图）动画实现

css3帧（雪碧图）动画实现相关推荐

最新文章

热门文章