iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

喪屍黑白切系列 第 9

Day 09 | 給我動起來 - SVG animation

今天想要分享一下我看 Youtube 看到的效果,
先分享連結
裡面有使用到的 wave.png 請直接 YT 下載。

本篇關鍵字

  • animation
  • @keyframes
  • background-position

範例檔


(背景圖片: Lenin Estrada from Unsplash)

HTML

<div class="banner"></div>

CSS

.banner {
  height: 500px;
  overflow: hidden;
  position: relative;
  background: url('https://images.unsplash.com/photo-1567644495368-82cb64d087f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80') no-repeat center center/cover;
}

.banner::before,
.banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(wave.png);
  background-position: 0 bottom;
  background-repeat: repeat-x;
  background-size: 1000px 100px;
}

.banner::before {
  animation: wave 8s linear infinite alternate;
  z-index: 2;
}

.banner::after {
  opacity: .5;
  animation: wave 8s 4s linear infinite alternate;
  z-index: 1;
}

@keyframes wave {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 100%;
  }
}

喪屍分解

  • 使用 ::before, ::after 搭配 position: absolute,製作蓋在圖上的波浪
  • 利用 animation 設定 background-position 製作出波浪移動的效果
  • animation
    animation: /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
    
  • 透過 animation-delay 以及 opacity 做出波浪分層的效果

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是 Navbar。


上一篇
Day 08 | 看我的影分身 - 不規則邊緣
下一篇
Day 10 | 我常卡住的導覽列 - Navbar
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言