Question

我想制作一个全屏幕旋转背景，像这样的平铺图像：

＆＃13;

.overlay{
  position:fixed;
   background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png);
	background-repeat:repeat;
  -webkit-animation:180s rotate-left infinite linear;
  -moz-animation:180s rotate-left infinite linear;
  -o-animation:180s rotate-left infinite linear;
  -ms-animation:180s rotate-left infinite linear;
  animation:180s rotate-left infinite linear;
  top:0;
  left:0;
  width:100%;
 height:100%;
}

@-moz-keyframes rotate-left{
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
    100%{ -moz-transform:rotate(-360deg); }
}

@-webkit-keyframes rotate-left{
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
    100%{ -webkit-transform:rotate(-360deg); }
}

＆＃13;

<div class="overlay">
</div>

＆＃13;

是否有诀窍让瓷砖在所有位置填满整个屏幕？

感谢您的期待。

Answer 1

background-size在这里不起作用，因为你正在旋转div而不是背景本身。

数学上，如果您希望子动画在动画期间覆盖整个父div区域，您需要确保孩子的高度和宽度与角落之间的对角线距离相等或更大。父元素。

所以，你可以do the math，或者只是让它变得非常大。

＆＃13;

body{ margin: 0; }

.parent{
  position: relative;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.overlay{
  background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png);
  background-repeat:repeat;
  -webkit-animation:180s rotate-left infinite linear;
  -moz-animation:180s rotate-left infinite linear;
  -o-animation:180s rotate-left infinite linear;
  -ms-animation:180s rotate-left infinite linear;
  animation:180s rotate-left infinite linear;
  width:1000%;
  height:1000%;
  position: absolute;
  top: 50%;
  left: 50%;
}

@-moz-keyframes rotate-left{
    0%{ -moz-transform:rotate(0deg) translate(-50%, -50%); -moz-transform-origin: top left; }
    100%{ -moz-transform:rotate(-360deg) translate(-50%, -50%); -moz-transform-origin: top left; }
}

@-webkit-keyframes rotate-left{
    0%{ -webkit-transform:rotate(0deg) translate(-50%, -50%); -webkit-transform-origin: top left; }
    100%{ -webkit-transform:rotate(-360deg) translate(-50%, -50%); -webkit-transform-origin: top left; }
}

@keyframes rotate-left{
    0%{ transform:rotate(0deg) translate(-50%, -50%); transform-origin: top left; }
    100%{ transform:rotate(-360deg) translate(-50%, -50%); transform-origin: top left; }
}

＆＃13;

<div class="parent">
  <div class="overlay">
  </div>
</div>

＆＃13;

在css的转动的背景图象瓦片

1 个答案: