Question

采用以下示例：

html {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    height: 100%;
    margin: 0;
}

#main {
    background: #222222;
    position: relative;
    flex: 640px 0 0;
    height: 360px;
}

@keyframes stars {
	0% {
        background-position: 0 0;
    }
	100% {
        background-position: -100% 0;
    }
}

#stars {
    animation: stars 10s linear infinite;
    background-image: url('https://i.imgur.com/nyFndCj.png');
    background-size: 100% 100%;
    background-repeat: repeat repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}

<div id="main">
  <div id="stars"></div>
</div>

这里的想法是通过使用百分比来改变背景位置，使从一侧移动到另一侧的恒星动画。例如，我可以使用px进行此操作，但这需要我事先知道宽度（在这种情况下为640px），以及是否要更改{{1}的宽度/高度}我需要更改动画值，并且要避免这种情况，因此要避免使用百分比。另外，我只想用CSS完成此操作，根本不需要JavaScript。

Answer 1

减小背景尺寸，并使用比例尺通过增加容器的尺寸来纠正此问题。然后，您可以根据需要设置背景动画：

body {
  background-color: black;
  height: 100vh;
  margin: 0;
}

#main {
  background: #222222;
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

#stars {
  animation: stars 10s linear infinite;
  background-image: url('https://i.imgur.com/nyFndCj.png');
  background-size: 50% 100%;
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  transform: scaleX(2);
}

@keyframes stars {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

<div id="main">
  <div id="stars"></div>
</div>

这是另一个没有规模的想法，您也可以使用right:-100%或left:-100%或width:200%

将元素放大两倍

body {
  background-color: black;
  height: 100vh;
  margin: 0;
}

#main {
  background: #222222;
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

#stars {
  animation: stars 10s linear infinite;
  background-image: url('https://i.imgur.com/nyFndCj.png');
  background-size: 50% 100%;
  position: absolute;
  left: 0;
  right: -100%;
  height: 100%;
}

@keyframes stars {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

<div id="main">
  <div id="stars"></div>
</div>

这是考虑伪元素的另一种简化方法：

body {
  background-color: black;
  height: 100vh;
  margin: 0;
}

#main {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  z-index:0;
}
#main:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:-100%;
  bottom:0;
  animation: stars 10s linear infinite;
  background: 
    url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
    #222222;
}

@keyframes stars {
  100% {
    background-position: right;
  }
}

<div id="main">
</div>

在所有情况下，诀窍是避免在100% 100%中包含background-size，否则将无法使用百分比进行动画处理。

为简化起见，我使用了left / right，相当于0% 50% / 100% 50%。只需在两者之间切换即可更改方向。

此处有更多详细信息：https://stackoverflow.com/a/51734530/8620333

由于我们增大了容器的大小，因此我们也可以使用translate对其进行动画处理以提高性能：

body {
  background-color: black;
  height: 100vh;
  margin: 0;
}

#main {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  z-index:0;
}
#main:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:-100%;
  bottom:0;
  animation: stars 10s linear infinite;
  background: 
    url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
    #222222;
}

@keyframes stars {
  100% {
    transform: translateX(-50%);
  }
}

<div id="main">
</div>

具有缩放比例：

body {
  background-color: black;
  height: 100vh;
  margin: 0;
}

#main {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  z-index:0;
}
#main:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform:scaleX(2);
  transform-origin:left;
  animation: stars 10s linear infinite;
  background: 
    url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
    #222222;
}

@keyframes stars {
  100% {
    transform:scaleX(2) translateX(-50%);
  }
}

<div id="main">
</div>

在另一个方向

body {
  background-color: black;
  height: 100vh;
  margin: 0;
}

#main {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  z-index:0;
}
#main:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform:scaleX(2);
  transform-origin:right;
  animation: stars 10s linear infinite;
  background: 
    url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
    #222222;
}

@keyframes stars {
  100% {
    transform:scaleX(2) translateX(50%);
  }
}

<div id="main">
</div>

当背景大小为100％时，如何使用百分比为背景位置设置动画？

1 个答案: