CSS animation动画效果实现精灵图、雪碧图动画，多动画应用

素材下载

分析图片动画过程
图片可以分成4*6=24 小图片也就是24帧
- 方法1 可以把每一行成一个动画，所以可以拆分4个动画
- 方法2 独立写成一个动画
  - 动画一共24帧 100/24≈4
  - 每4%作为一帧

方法1

页面主要框架

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>特朗普动画</title></head><body><div></div><h2>hover执行</h2><div class="box"></div>
</body></html

图解图片每个帧的background-position属性，图片的分辨率为600*400
background-position: 0 0;第一个值是水平位置，第二个值是垂直位置。
下面的值是相对div,图片需要移动的值（px）

图片向左移动为负值，向右相反，图片向上移动为负值，向下相反

CSS样式

 <style>div {width: 100px;height: 100px;border: 1px red solid;background-image: url("./images/trump_run.png");/* 设置背景不重复方便调节 */background-repeat: no-repeat;/* 多动画使用,隔开      run2 2s 2s steps(5)run2规定需要绑定到选择器的 keyframe 名称,2s规定完成动画所花费的时间,2s规定在动画开始之前的延迟,steps(5)规定动画的步数。 */            animation: run 2s steps(5), run2 2s 2s steps(5), run3 2s 4s steps(5), run4 2s 6s steps(5);animation-iteration-count: infinite, infinite, infinite, infinite;}//第一行动画@keyframes run {0% {background-position: 0 0;}100% {background-position: -500px 0;}}
//第二行动画@keyframes run2 {from {background-position: 0px -100px;}to {background-position: -500px -100px;}}//第三行动画@keyframes run3 {from {background-position: -0px -200px;}to {background-position: -500px -200px;}}//第四行动画@keyframes run4 {from {background-position: -0px -300px;}to {background-position: -500px -300px;}}.box {animation-play-state: paused;}.box:hover {//鼠标经过执行动画animation-play-state: running;}</style>

效果

方法2

将图片拆分24帧,并写上对应background-position,写完应用动画就行了

@keyframes identifier {1*4%{background-position: }
2*4%    .
3*4%    .
4*4%    .
5*4%    .
6*4%    .
7*4%
8*4%    .
9*4%
10*4%
11*4%   .
12*4%
13*4%
14*4%   .
15*4%
16*4%
17*4%
18*4%   .
19*4%
20*4%
21*4%   .
22*4%
23*4%   .
24*4%{background-position: }
}

CSS animation动画效果实现精灵图、雪碧图动画，多动画应用相关推荐

【前端小实战】百度新闻雪碧图及动画（CSS sprites）
文章目录前言 ~ 雪碧图一.页面效果展示二.代码实现解析三.完整代码前言 ~ 雪碧图雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
雪碧图HTML人物,animateSprite-可控制雪碧图（sprites）动画的jQuery插件
jquery.animateSprite是一款可控制雪碧图(sprites)制作动画效果的jQuery插件.通过该插件可以控制雪碧图播放.暂停.反向播放和更改播放动画速度等. 安装可以通过npm或b ...
css雪碧图如何调整大小
1.通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做! 2.直接调整雪碧图background-size大小例如,雪碧图规格14 ...
手把手教你webpack3（15）插件之雪碧图插件（WEBPACK-SPRITESMITH配置简述）
WEBPACK-SPRITESMITH配置简述前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...
Webpack3之雪碧图插件（WEBPACK-SPRITESMITH配置简述）
WEBPACK-SPRITESMITH配置简述前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...
CSS 背景图标（雪碧图、精灵图、iconfont）
目录雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
sprite（雪碧图，也叫精灵图）
1.css sprite 中文名为雪碧图,也叫精灵图,是基于background-image和background-position 实现的显示技术就是将一个有很多图标的图片,通过控制图片显示位置 ...

CSS animation动画效果实现精灵图、雪碧图动画，多动画应用

CSS animation动画效果实现精灵图、雪碧图动画，多动画应用

方法1

方法2

CSS animation动画效果实现精灵图、雪碧图动画，多动画应用相关推荐

最新文章

热门文章