设为首页收藏本站 今天是: 2021-08-05    美好的一天,从现在开始

站内搜索

搜索
热搜: 活动 交友 discuz

寻宝楼论坛

[网页教程] HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)

名人堂:
No.1
88888888

1517

主题

1594

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

威望
300
贡献
154
金币
10510 枚
精华
4篇
在线时间
360 小时
注册时间
2020-5-12
最后登录
2021-8-4

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老吾是土豪帅哥认证问题达人吾是智囊精品之王我是单身我拍谁!!!好人卡!!!

版主专享版主专享

发表于 2021-2-26 22:24:19 | 显示全部楼层 |阅读模式
上一张 下一张 HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)89 作者:挽弦暮笙 帖子ID:590
  • HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)89 作者:挽弦暮笙 帖子ID:590 1/6 
  • HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)25 作者:挽弦暮笙 帖子ID:590 2/6 
  • HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)89 作者:挽弦暮笙 帖子ID:590 3/6 
  • HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)76 作者:挽弦暮笙 帖子ID:590 4/6 
  • HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)43 作者:挽弦暮笙 帖子ID:590 5/6 
  • HTML将png图片动画实现CSS3 帧动画(Sprite,直译叫雪碧图)85 作者:挽弦暮笙 帖子ID:590 6/6 
CSS雪碧
& `6 }; ?, }, ~" FCSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。+ X$ K. M( f6 t0 N2 C* H, b! s

$ e' o$ _- g1 W" G0 t/ l原理+ L1 |" l- Y& f! u6 E
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。" o9 d; [+ w/ V+ o  Z. o
5 [6 Q5 b5 Q* \& T
优点
" L2 E" b/ m3 [/ U# {, X# K减少加载网页图片时对服务器的请求次数
/ D% m. Y/ N6 p/ A8 I4 [1 u% K8 |可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。% E+ t% m- x2 M: ?

5 l/ X, x( a3 m8 q# @; X& B提高页面的加载速度) e6 x( p7 @1 b! O- R' q4 t! c
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
; u4 u7 [! j8 N' i) _  N0 ?" N
5 }/ k% g; c8 l  h- z5 v不足
3 ?% k0 \6 [, M5 O0 JCSS雪碧的最大问题是内存使用
5 T3 l; P: g" |3 e: ?  q除非这个雪碧图片是被非常小心的组织,你就会最终使用大量的无用的空白。一个例子是来自于WHIT TV的网站。注意这是一个1299×15,000像素的PNG图片。它也被压缩的很好——实际下载大小只有大概26K — 但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后,它将占用差不多75MB的内存 (1299 * 15000 * 4)。如果这个图片并没有使用alpha透明,它将会被优化至1299 * 15000 * 3,但是要在损失渲染速度的情况下。即使那样,我们也会讨论55MB。这张图片的大部分其实就是空白,那里什么都没有,没没有任何有用的内容。只是加载 WHIT主页 就会导致你的浏览器的内存占用上升到至少75+MB,仅仅是因为那一张图片。(PS:遗憾的是,该网站最近已经改版,文中提到的图片已经不存在了)! s2 g- L) W) R8 `) P7 T

4 d+ X/ U: }" F4 c) }# I2 S6 D错误得使用 Sprites 影响可访问性% M2 `4 s/ Y6 b* R8 e4 d
一些刚入门的开发人员会为了节省 HTTP 请求数(这是使用 CSS Sprite 一直强调的好处)而把所有的图片都当背景图片来处理 – 甚至是那些传达重要信息的图片。结果会导致一个缺乏可访问性的网站,也会降低 HTML 中 title 和 alt 的潜在益处。
5 I( f# e$ i$ r" n9 L( TCSS3 animation 图解
0 Z/ `" B" n" }; z2 L. z) N' W" c& E) M9 X' ^
- `$ ]! k- R7 ~0 n3 f1 F, a6 r
代码实战
6 O# ], Y8 ], ?* F. F" K6 M2 |
  1. <html>
    4 P8 `! i6 o. ^( `" D* x+ R
  2. <head>
    5 |, H. ^/ @. P) O, o
  3. <style>% H) @/ K, Y$ I
  4. .imageStyle {
    5 K# c% z( U/ p' |& i$ T
  5.     width: 240px;; T0 X( A& b3 y# T6 V' `) }9 r
  6.     height: 180px;
    / }, @4 h* W) c8 r, [
  7.     border-radius: 20px;
    ' ^( z1 B4 w( p
  8.     border: 1px solid black;
    0 ]) D/ }# Y/ r5 }# S; P. G( _5 q
  9.     box-shadow: 5px 5px 5px #888;
    & x5 C% c' c" ]3 W, e# j
  10.     margin: 5px;
    ; L1 M  i( Z: T0 x1 A8 [; K7 ^+ R
  11. }
    4 ^. C; ^7 q# R9 Z- m
  12. .imageBg {
    ; V6 d) @% H9 }. y' ^# `0 e' ^5 {
  13.     background-image: url("frameAnim.png");
    0 t. M# Q4 n( F
  14. }
    5 H! ?% I: W, x& m( o8 k
  15. #frameAnimImg1 {
    ! R; f* S; g& ^+ o, y4 a
  16.     animation: frameAnim1 10s infinite;
    - b- w% o: L) C- c+ w& k8 U
  17. }
    6 }/ j9 h7 _7 @' N; j" z
  18. #frameAnimImg2 {2 e+ k% _5 ]( l
  19.     animation: frameAnim1 steps(1, start) 1s infinite;
    0 p- z5 z4 p, a/ M3 T6 r# M
  20. }
    0 S! r& x* E5 @( ?; V9 H, T
  21. #frameAnimImg3 {6 P% i) w4 Y. {# b& {
  22.     animation: frameAnim2 10s infinite;" O8 B* s) l: p/ J+ B# P
  23. }. J8 n, z% d3 W: o  l
  24. #frameAnimImg4 {
    1 A/ P+ h* F6 B' E8 J, x! b2 s8 U: K
  25.     animation: frameAnim3 10s infinite;: R2 Y1 ^) U4 ~& J- y+ V9 c) f
  26. }
    ! Y; N9 V! m# t5 ]# {1 x
  27. #frameAnimImg5 {: L2 {- j$ B! q! P
  28.     animation: frameAnim4 1s infinite;9 t' ]9 u# |& h, A: Y5 m; e
  29. }
    % U! d; y. `4 V* j8 [
  30. #animDiv {
    $ `; F- ~* T. ~6 d+ U/ c# R3 Z4 v
  31.     overflow: hidden;, D8 d7 Y6 F& v) b
  32.     display: inline-block;
      Q$ M$ q1 R& i* G# L( \% f* H
  33. }
    . g  Z; U9 `0 w: z& ~* A
  34. #frameAnimImg6 {% c! k. a' R( ~' R+ }, u# w
  35.     animation: frameAnim5 10s infinite;6 E! q* T; S7 F
  36. }
    ! x0 \' B6 q3 T
  37. #frameAnimImg7 {
    7 ^0 c% _9 L, T/ e- Z4 B5 c
  38.     animation: frameAnim5 steps(1, start) 1s infinite;
    3 j3 n6 d; t6 |# d- z$ d
  39. }3 I' O9 O: Z4 l& A
  40. @keyframes frameAnim1 {
    7 R/ L8 F$ K2 r
  41.     0%      {background-position:     0px 0;}
    * F4 Y4 o9 v7 O
  42.     14.286% {background-position:  -241px 0;}# b# D, `: L' F( |2 O$ b
  43.     28.57%  {background-position:  -482px 0;}
    ( B# X$ C& t7 s; Q. h, A) G
  44.     42.9%   {background-position:  -723px 0;}
    , l" V% _/ G% R
  45.     57.14%  {background-position:  -964px 0;}
    - ]3 p3 q/ {* R; ?% \  ^
  46.     71.43%  {background-position: -1205px 0;}1 A9 e6 y) ]+ f1 \* l, O
  47.     85.71%  {background-position: -1446px 0;}. b: f- r3 n' u1 ?2 W9 f( x. c
  48.     100%    {background-position:     0px 0;}
      m* D/ m) v* W9 ~9 @: w1 I
  49. }% \2 x' @4 ~1 t" E7 F: v
  50. @keyframes frameAnim2 {& M' |0 C9 C4 X. ]" Q# n4 G
  51.     0%,   13%   {background-position:     0px 0;}' I  _9 p6 o; z- Q
  52.     14%,  27%   {background-position:  -241px 0;}; ?( ]! i; E4 R; t
  53.     28%,  41%   {background-position:  -482px 0;}/ I' b! l( y- Q4 g/ [9 f
  54.     42%,  56%   {background-position:  -723px 0;}8 k; j/ G2 S; C$ I5 j
  55.     57%,  70%   {background-position:  -964px 0;}
    3 w) u% q8 U8 v& h5 Z% m0 [# L
  56.     71%,  84%   {background-position: -1205px 0;}- B! D2 K$ P- {8 v' B& K2 D
  57.     85%, 100%   {background-position: -1446px 0;}
    . U7 Z; f1 G$ U0 S
  58. }
      G9 p; a! M3 ~4 H6 r& I
  59. @keyframes frameAnim3 {% o6 @% D6 F6 x! x# W5 C
  60.     0%,   13%   {background-position:     0px 0;}
    1 m) z1 X  `9 A# f/ ]
  61.     14%,  27%   {background-position:  -241px 0;}
    , e* ?( ~) h5 O
  62.     28%,  41%   {background-position:  -482px 0;}, G+ d- C& A" ~3 O. ^: |
  63.     42%,  56%   {background-position:  -723px 0;}- z8 D. D% [; T
  64.     57%,  70%   {background-position:  -964px 0;}- y- W7 L% n9 c. z$ \! {7 u6 \
  65.     71%,  84%   {background-position: -1205px 0;}7 i+ Y; A8 \2 S1 z, {+ e
  66.     85%,  99%   {background-position: -1446px 0;}: [+ ]5 D5 L  o. B" _6 m
  67.     100%        {background-position:     0px 0;}9 N' I1 J3 t* f' s/ m
  68. }
    2 a( W1 c; k8 D3 w" A, v1 D  x7 L
  69. @keyframes frameAnim4 {
    ' A0 o8 H/ }  O
  70.          0%,  14.286%   {background-position:     0px 0;}
    ; z+ S- c$ l2 _+ ~) e. D$ }
  71.     14.287%,  28.57%    {background-position:  -241px 0;}
      x. y4 c# f$ k
  72.     28.571%,  42.9%     {background-position:  -482px 0;}
    - m- Y  [6 \" q( d& i- l( I4 @
  73.     42.901%,  57.14%    {background-position:  -723px 0;}
    ' U* `, J, Y! F) l3 I# }
  74.     57.141%,  71.43%    {background-position:  -964px 0;}0 S# z9 A5 w7 P1 ^+ i. @
  75.     71.431%,  85.71%    {background-position: -1205px 0;}' }5 K" H2 H) d! n+ E+ S$ u% F
  76.     85.711%, 100%       {background-position: -1446px 0;}- X6 B8 o; J- v& O* _' j8 @* Q# t$ V, u) D
  77. }) x" y5 q6 L4 V7 e3 }* ]
  78. @keyframes frameAnim5 {; ^6 n1 c' @) T8 Z4 T
  79.     0%      {transform:translate(0px, 0);}* q6 L2 k: m+ }
  80.     14.286% {transform:translate(-241px, 0);}9 a  o7 \7 `+ A9 R
  81.     28.57%  {transform:translate(-482px, 0);}
    ; K. q8 {( I6 h" |& r
  82.     42.9%   {transform:translate(-723px,0);}" b3 r) m) ?# n, R+ \( |' U- x2 n
  83.     57.14%  {transform:translate(-964px, 0);}
    9 }. N: {# p  @+ j) G$ u8 m
  84.     71.43%  {transform:translate(-1205px, 0);}4 u" Q  i4 p; b0 j& d5 m
  85.     85.71%  {transform:translate(-1446px, 0);}
    0 C) G: g3 ~- |9 f' J
  86.     100%    {transform:translate(0px, 0);}( A& t7 f% }  K" f3 P
  87. }
    0 E% n0 B: `6 n" k# j. m
  88. </style>6 }" ]* Q! Z$ [6 L, T7 G6 ?2 @* c
  89. </head>
    ) T  f0 p, Q) h( a: _
  90. <body>
    " _" u3 ~* T3 t# ~2 {1 q
  91. <img id="frameAnimImg1" class="imageStyle imageBg ">
    9 v/ p0 E# O2 Q: i3 i* Q  K' z
  92. <img id="frameAnimImg2" class="imageStyle imageBg ">
    ' w2 B- W8 W3 S2 u3 M5 J
  93. <img id="frameAnimImg3" class="imageStyle imageBg ">
    : G, z8 c6 |( u+ N0 G4 H% z. s
  94. <img id="frameAnimImg4" class="imageStyle imageBg ">" k8 G8 p$ N7 i6 }0 G
  95. <img id="frameAnimImg5" class="imageStyle imageBg ">% U3 A4 d5 D! I3 m6 v
  96. <div id="animDiv" class="imageStyle">
    / E8 H9 e# K' w: C5 I# O5 U4 b$ {
  97.     <img id="frameAnimImg6" src="frameAnim.png">- f# H6 U7 z7 z$ T7 }- m6 i$ c3 b
  98. </div>: ^$ `- b. |2 o. t  h; l
  99. <div class="animDiv">
    : {( o* O! u* D- n, i8 i
  100.     <!-- 注意:这里设置为background会无法显示 -->% D* P" i8 A7 q" X+ z3 m; t- x( ?
  101.     <img id="frameAnimImg7" src="frameAnim.png">- K' J# H- v; ], K
  102. </div>% p* t, J: W4 O5 w( }% m
  103. </body>
    ' a1 X  }7 \: Z) J& ]& {6 v9 L, c7 j
  104. </html>
    8 f- `- U% Z8 V7 c+ V# x
复制代码

1 b; U5 K' Z. k' X' `. d, V& N- RCSS实现帧动画的方式有两种:
% _, c  K9 ?- S
5 A) C' m2 V7 C9 lbackground-position: “x”px “y”px;
) }/ w" Y& t9 I- Q% v- Z! T父容器的overflow:hidden;配合上图像元素的transform:translate(x,y);
0 a! y9 z4 @% a& t; U) C同样的 @keyframes,而左图的每帧都是滑动的,右图却是我们真正想要的帧动画,这是因为 CSS3 的 animation 默认会在每个关键帧之间插入补间动画,也就是使属性按 animation-timing-function 指定的函数改变到新的值。
$ ?: `2 c6 L; v/ b+ }  q
0 P5 g% n4 I* O4 X! N6 U解决办法有两个
- v6 D0 r. v/ `  C- L
) D$ o! i5 \3 |+ R4 Y指定关键帧的”起始”和”终止”位置(百分数支持小数;百分比数值不能重叠,重叠的话,设置无效;帧之间的间隔要足够小,滑动才不会被肉眼可见)
" J2 _: y8 z; e
4 |) q3 l7 N, `9 q4 q( k/ K2 ]
  1. @keyframes {7 d; ?8 `) N2 `+ Y
  2.          0%,  14.286%   {background-position:     0px 0;}
    - K0 z5 q5 V0 C
  3.     14.287%,  28.57%    {background-position:  -241px 0;}
    $ V( v! H( i& @" k5 }
  4.     //在 14.286% 到 14.287% 之间,还是会按 animation-timing-function 所定义的方式滑动的,只是时间太短,肉眼分辨不出来而已。" C$ B* A  ?/ K  e
  5.     ......
    9 Z' S- y9 O1 I- i3 I
  6. }
复制代码
利用steps()实现帧之间的阶跃动画
0 v6 _+ X6 \! f! @4 V  o# Y, t% p0 x! n. u
steps(1,start):动画一开始就跳到 100% 直到这一帧(不是整个周期)结束8 K) w: N) V9 u1 k( V
steps(1,end):保持 0% 的样式直到这一帧(不是整个周期)结束
8 c/ e' z; h# Y9 @; M另外也可以直接设置 animation-timing-function:step-start/step-end3 c% o4 [: c" n! n
step-start效果等同于steps(1,start),step-end效果等同于steps(1,end)1 _# u- W9 m! ]) M: ~
素材
! Z# {& K. k+ d% q1 w: `; g我是网上找了一张GIF图7 E+ ]8 Q! r# D! x5 J

/ E& f$ u0 v: X7 X  I然后用 GIFFrame.exe 解析出每一帧,并保存在相应的文件夹中
5 B; {% ~& {8 i& T1 a4 s7 ^: u$ d2 o' \5 i+ @$ n$ g% [
最后用 Window自带的“画图”,拼接成一幅长图% r% l7 f8 w2 L7 b

6 O7 @9 o' g% D3 K0 O& l+ r8 m6 u
文章转自 https://blog.csdn.net/chy555chy/article/details/56489497, U: m' G: h1 ^
8 M3 [- `, I5 F: ^% i
最后附上代码文件
( ^% v5 |1 j4 c- G; Z. a7 P
6 G% j# E/ c7 m
# @& Y# L2 @- L* ~. a
+ P- q( C6 Z( H  O! U- z; H: d+ i8 c( c3 o: m3 k) i

4 @* f7 q9 r+ s( S7 U, q5 `
+ P$ d/ W- Q" D+ R$ R, [8 z

帖子地址: 

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 收藏帖子 返回列表 客服中心 搜索 官方QQ群
企业
关于我们 加入我们
友情链接 媒体合作
联系我们 QQ群
官方
新浪微博 腾讯微博
百度贴吧 人人主页
脸书 推特
下载
安卓客户端下载 桌面客户端
反馈
意见建议 用户使用协议
帮助
更多
捐助本站
安卓客户端下载

安卓客户端下载

苹果端下载密码:dmwu

苹果端下载密码:dmwu

快速回复 收藏帖子 返回列表 客服中心 搜索 官方QQ群
桂ICP备2021004265号-1

Powered by Discuz! X3.4 © 2001-2013 寻宝楼论坛