代码之家 › 专栏 › 技术社区 › Matrix

阅读精灵css总是全屏大小?

css-sprites sprite css-animations css

Matrix · 技术社区 · 6 年前

我试着用自动全屏大小制作精灵的动画

但我不知道如何才能一直全屏阅读这个精灵(即屏幕宽度和高度的100%,如果调整大小则自动调整)

有自动调整雪碧大小的想法吗?

@-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>

1 回复 | 直到 6 年前

Kosh 6 年前

你快到了!
应该有 steps(10) 因为起始位置实际上不是一步。

顺便说一句, z-index: 999999999999 在我看来很偏执。

@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>

更新
问题奖励:

@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=“加载器”></div>

推荐文章

Ancross · 为什么我的小CSS动画不会触发?

2 年前

tommy · 月亮升起和月亮集动画css

2 年前

EGxo · 为类的每个元素分配随机动画延迟

6 年前

MD.ALIMUL Alrazy · 如何从左到右设置svg svg笔划线动画的动画?

6 年前

cvdv · 如何平滑css平行循环旋转动画?

6 年前

developer · 使用css动画的线微调器

6 年前

Matt · 对于图像,ReactCSTransition动画不平滑

6 年前

Jeanluca Scaljeri · 单击后来回运行css动画

6 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

6 年前

Krystian · css旋转吊架和心率线

6 年前