想使用這個動畫覆蓋整個頁面這是可能的

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>