散步在海洋中的碼農

美編給了幾個樣板說要套成背景....說真的CSS真的是....罩門，苦尋了半天開始看一下CSS動畫怎麼搞

https://codepen.io/333397406/pen/PQdMOO
https://codepen.io/jasperlachance/pen/QNMwBg
https://codepen.io/plavookac/pen/QMwObb

30天讓設計師搞定CSS/SVG動畫 系列
https://ithelp.ithome.com.tw/users/20111500/ironman/1788

OK最後我套了bootstrap  把背景那一塊內容  div..... 那一坨html，套在這裏面 就好了....

達到我想把背景縮在某一塊  div裡面

使用這一個去做的  https://codepen.io/plavookac/pen/QMwObb

 <div class="col-md-8">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="waveWrapper waveAnimation">
      <div class="waveWrapperInner bgTop">
        <div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')">
        </div>
      </div>
      <div class="waveWrapperInner bgMiddle">
        <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')">
        </div>
      </div>
      <div class="waveWrapperInner bgBottom">
        <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')">
        </div>
      </div>
    </div>
  </div>

 

 

 

以上文章僅用紀錄資料使用.....