Question

我想知道你们其中一个人是否可以帮我解决我遇到的CSS / HTML问题。

我有一个基于CSS的动画，使用background和steps（）方法。不幸的是，这意味着扩展已成为一个问题。

有没有办法简单地缩放包含它的div以适应屏幕？我不介意纵横比，这不是问题。这是我的动画CSS：

    .pageOpen {
  width: 710.956522px;
  height: 400px;
  background: url('/Images/SiteVitalImages/preloader-open.png') left center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: play 1s steps(22) infinite;
}

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

我真的很感激这种帮助，这非常令人恼火。

以下是该问题的GIF： https://gyazo.com/91deb470a88b6066de9015beec5c0eed

我希望它能够水平缩放，而不会显示即将到来的动画帧。

Answer 1

您最大的问题是您的图片需要的宽高比不是。您可以通过将其嵌入到另一个div中来设置自己的宽高比，并遵循here

之类的内容

我设法制作了保持纵横比的东西，但是当高度小于纵横比时，它没有垂直居中。

@keyframes play {
  100% {
    background-position: center left;
  }
}

body,
html {
  /* To be fair, these should always be disabled to prevent unexpected padding or margin or movements*/
  padding: 0;
  margin: 0;
}

.center {
  position: absolute;
}

.center.y {
  top: 0; bottom: 0; /* vertical center */
}

.center.x {
  left: 0; right: 0; /* horizontal center */
  margin: auto;
}

.lock.height {
  max-height: 100vh;
  height: 100vh;
}

.lock.width {
  max-width: 100vw;
  width: 100vw;
}

.flow-background-container {
  overflow: hidden;
  position: relative;
}

.flow-background {
  padding-top: 56.338%;
  /* For the 400/710 aspect ratio*/
  background: url('https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png') no-repeat center right;
  /* several types for more support. IE9+ http://caniuse.com/#feat=background-img-opts */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: play 1.5s steps(22) infinite;
}

<div class="flow-background-container lock height">
  <div class="flow-background center x y">
  </div>
</div>

我不知道你的页面布局，所以我不能垂直居中。 我是怎么做的

.center-vertically {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-khtml-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

Answer 2

最初我误解了你的目的。玩这个我发现你必须缩放它，所以高度是最大的尺寸，所以它不会水平重复。为了增加幻觉，我将背景设为黑色并将其置于中心位置，同时我也改变了顺序，使它对我来说更加爆炸。

你也可以在jsfiddle https://jsfiddle.net/j7L4amov/11/

上看到它

＆＃13;

html, body{ 
  height: 100%;
  background-color: black;
 }
 
.wrapper{
  position: relative;
  margin: auto;
  min-height: 400px;
  height: 100%;
  min-width: 710px;
  width:  calc( 100vh * 16.0 / 9.0 );
}

.pageOpen {
  min-height: 400px;
  min-width: 710px;
  height: 100%;
  width: 100%;
 background: url('https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png') no-repeat right center;
 background-size: cover;
 animation: play 1.5s steps(22) infinite;
 overflow: hidden;
}

@keyframes play {
    100% {
      background-position: left center; 
    }
}

＆＃13;

<div class=wrapper>
<div class=pageOpen>
</div>
</div>

＆＃13;

缩放CSS逐帧动画（救救我！）

2 个答案: