Question

我正在尝试获得一个全动画的css3动画来对背景进行动画处理。只要身体的高度保持在视口高度，此方法就可以正常工作。如果内容更改并且用户需要滚动，则动画将在底部中断：

我已经尝试根据一些教程来更改html和body的css样式，并最终得到以下结果：

我还尝试将body设置为100vh，但我认为问题在于动画本身无法正确缩放。

动画的css是这样的：

html {
  height: 100%;
}
body {
  min-height: 100%;
}

.rememberly-animation {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, #5e9793);
  -webkit-animation: rememberly-background 30s ease infinite;
  -moz-animation: rememberly-background 30s ease infinite;
  animation: rememberly-background 30s ease infinite;
}

@-webkit-keyframes rememberly-background {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes rememberly-background {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes rememberly-background {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

<html>
  <body class="rememberly-animation">
  </body>
</html>

.rememberly-animation类添加到了body-tag。

如果视口（内容）发生变化并且用户需要向下滚动，我不知何故需要动画来缩放整个高度。

对此有任何提示吗？

Answer 1

这是由于background propagation而引起的，您的背景正在移至您设置为height:100%的html。

在这里说明问题：

html {
  height:50px;
}
body {
  height:100px;
  border:2px solid;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

请注意背景如何奇怪地重复整个文档中的每个50px，而不仅仅是正文。

为避免这种情况，请在html元素中添加背景：

html {
  height:50px;
  background:#fff;
}
body {
  height:100px;
  border:2px solid;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

您的最终代码可以是：

html {
  background:#fff;
}
body {
  min-height:100vh;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, #5e9793);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

<div style="height:150vh;">to add scroll</div>

由此，您在这里遇到了另一个问题：Using percentage values with background-position on a linear gradient

您必须为动画指定background-size

html {
  background:#fff;
}
body {
  min-height:100vh;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  background-size:200% 200%;
  animation: rememberly-background 3s ease infinite;
}



@keyframes rememberly-background {
    0%,100% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}

身高变化时CSS3全角背景动画

1 个答案: