想使用这个动画覆盖整个页面这是可能的

Question

我正在做一个水灌装动画。我的问题是

1. 我怎样才能使它响应。
2. 我需要对SVG进行任何更改。
3. 它目前位于页面左上角的开始位置，我想将其显示为整页。

我的代码如下。

#banner { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: #fff; 
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
    transform: translate3d(0, 0, 0); 
 
    z-index: -1; 
 
    margin-bottom: -50px; 
 
} 
 

 
#banner .fill { 
 
    animation-name: fillAction; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
    animation-duration: 6s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
#banner #waveShape { 
 
    animation-name: waveAction; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    animation-duration: 0.5s; 
 
    width: 300px; 
 
    height: 150px; 
 
    fill: #04ACFF; 
 
} 
 

 
@keyframes fillAction { 
 
    0% { 
 
    transform: translate(0, 150px); 
 
    } 
 
    100% { 
 
    transform: translate(0, -5px); 
 
    } 
 
} 
 

 
@keyframes waveAction { 
 
    0% { 
 
    transform: translate(-150px, 0); 
 
    } 
 
    100% { 
 
    transform: translate(0, 0); 
 
    } 
 
}

<div id="banner" align="center"> 
 
    <div align="center"> 
 
    <svg xml:space="preserve"> 
 
     <g class="fill"> 
 
     <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" /> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
</div>

我想告诉我的动画来覆盖整个页面，这怎么可能。

Answer 1

最简单的方法是给SVG一个viewBox。然后你可以给div 100％的宽度和高度。

#banner { 
 

 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff; 
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
    transform: translate3d(0, 0, 0); 
 
    z-index: -1; 
 
    margin-bottom: -50px; 
 
} 
 
#banner .fill { 
 
    animation-name: fillAction; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
    animation-duration: 6s; 
 
    animation-fill-mode: forwards; 
 
} 
 
#banner #waveShape { 
 
    animation-name: waveAction; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    animation-duration: 0.5s; 
 
    width: 300px; 
 
    height: 150px; 
 
    fill: #04ACFF; 
 
} 
 
@keyframes fillAction { 
 
    0% { 
 
    transform: translate(0, 150px); 
 
    } 
 
    100% { 
 
    transform: translate(0, -5px); 
 
    } 
 
} 
 
@keyframes waveAction { 
 
    0% { 
 
    transform: translate(-150px, 0); 
 
    } 
 
    100% { 
 
    transform: translate(0, 0); 
 
    } 
 
}

<div id="banner" align="center"> 
 
    <div align="center"> 
 
    <svg viewBox="0 0 150 150" preserveAspectRatio="none" xml:space="preserve"> 
 

 
     <g class="fill"> 
 
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" /> 
 
     </g> 
 

 

 
    </svg> 
 
    </div> 
 
</div>