始终以全屏尺寸读取sprite CSS？ [英] read sprite css always in fullscreen size?

问题描述

我尝试为具有自动全屏尺寸
的sprite制作动画

但是我不知道该如何始终以全屏方式读取此子画面（即屏幕宽度和高度的100％，并在调整大小时自动调整）

任何想法自动调整精灵大小？

  @-moz-keyframes播放{0％{背景-位置：0％; } 100％{背景位置：100％； }} @-webkit-keyframes播放{0％{背景位置：0％; } 100％{背景位置：100％； }} @关键帧播放{0％{背景位置：0％; } 100％{背景位置：100％； }}＃loader {位置：固定； z索引：999999999999；最高：0;左：0；宽度：100％;高度：100％;背景重复：不重复；背景位置：0 0；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）;背景大小：1100％100％；背景重复：不重复； -webkit-animation：播放2s无限步（11）; -moz动画：播放2s无限步（11）； -o动画：播放2s无限步（11）;动画：播放2s无限步（11）；}  

 < ; div id = loader>< / div>  

解决方案

您快到了！

应该有 steps（10），因为开始位置不在

BTW， z-index：999999999999 对我来说有点偏执=））。

  @keyframes播放{100％{背景位置：100％； }}＃loader {位置：绝对； z索引：9；最高：0;对：0;底部：0;左：0；背景位置：0 0；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）;背景大小：1100％100％；背景重复：不重复；动画：播放1s无限步（10）；}  

 < ; div id = loader>< / div>  

更新

问题奖励：

  @keyframes播放{99.99％{背景位置：120％；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）; } 100％{background-image：none; z索引：-1； }} #loader {位置：固定； z索引：9；最高：0;正确：0；底部：0左：0；背景位置：0 0；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）;背景大小：1100％100％；背景重复：不重复；动画：向前播放2s步骤（十二）；} body {背景：url（https://picsum.photos/640/480）50％50％/ cover  

< pre class = snippet-code-html lang-html prettyprint-override> < div id = loader>< / div>

I try to animate a sprite with auto fullscreen size

but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing)

any idea to autosize sprite ?

@-moz-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-webkit-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

#loader
{
  position: fixed;
  z-index: 999999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  background-size: 1100% 100%;
  background-repeat: no-repeat;
  -webkit-animation: play 2s infinite steps(11);
  -moz-animation: play 2s infinite steps(11);
  -o-animation: play 2s infinite steps(11);
  animation: play 2s infinite steps(11);
}

<div id="loader"></div>

解决方案

You're almost there!
There should be steps(10) as the start position is not a step actually.

BTW, z-index: 999999999999 looks paranoid to me =)).

@keyframes play {
  100% {
    background-position: 100%;
  }
}

#loader
{
  position: absolute;
  z-index: 9;
  top: 0; right:0;
  bottom:0; left: 0;
  background-position: 0 0;
  background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  background-size: 1100% 100%;
  background-repeat: no-repeat;
  animation: play 1s infinite steps(10);
}

<div id="loader"></div>

Update
Question bonus:

@keyframes play {
  99.99% {
    background-position: 120%;
    background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  }
  100% {
    background-image: none;
    z-index: -1;
  }
  
}

#loader {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: 0 0;
  background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  background-size: 1100% 100%;
  background-repeat: no-repeat;
  animation: play 2s steps(12) forwards;
}

body {
  background: url(https://picsum.photos/640/480) 50% 50% /cover

<div id="loader"></div>

这篇关于始终以全屏尺寸读取sprite CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！