Question

我为width制作了完整的height和background，其动画为zoom in。问题在于，无论我放在这个背景上它还会放大。我试图制作相反的动画来均衡效果，但它不是很干净的解决方案。你知道只有动画背景的好方法吗？

<header class="header">
    <div class="header-text">
        <h1>Welcome to the Milky Way</h1>
    </div>
</header>

*{
padding: 0;
margin: 0;
box-sizing: border-box;

html, body{
height: 100%;
overflow: hidden;

.header{
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
width: 100%;
background-color: #333;
background:linear-gradient(
  rgba(0, 0, 0, 0.5), 
  rgba(0, 0, 0, 0.5)
),url('bg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: bg;

.header-text{
color: white;
animation-name: bg-text;

.header, .header-text{
animation-duration: 60s;
animation-timing-function: linear;
animation-fill-mode: forwards;

@keyframes bg{
0%{transform: scale(1)}
100%{transform: scale(1.5)}

@keyframes bg-text{
0%{transform: scale(1)}
100%{transform: scale(0.666)}

Answer 1

所以你需要做的就是使用psuedo元素或标题的直接子元素，如下所示：

<header class="header">
  <div class="header-background"></div>
  <div class="header-text">
    <h1>Welcome to the Milky Way</h1>
  </div>
</header>

然后将背景和动画移至.header-background

您还需要提供.header：

position: relative;

和.header-background：

position: absolute;
height: 100%;
width: 100%;
z-index: 0;

和.header-text：

position: relative;
z-index: 1;

所以标题背景填满了整个背景，并且在内容背后。

注意： z-index仅在指定position以外的static时才会被考虑

动画背景但不是内容的效果

1 个答案: