[純css動畫] 波浪

憂鬱的星期一,來拍個片好ㄌ~

最近好像很流行這種動態的背景,真心純css不騙,然後沒有svg 不怕不怕:

youtube:點這裡查看

codepan:點這裡查看


先上影片

 

html

<div class="banner">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <h2>Penueling</h2>
</div>

 

scss

.banner{
  width:100%;
  height: 300px;
  position: relative;
  h2{
    position: absolute;
    color:#fff;
    top:7vw;
    left: 50%;
    transform:translate(-50%,-50%);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0px 1px 2px rgba(black,0.1);
    font-size: 3vw;
  }
  .wave{
    background-color: #ff191b;
    width: 200vw;
    height: 200vw;
    opacity: 0.4;
    position: absolute;
    top: -75vw;
    left: 50%;
    margin-left:-100vw;
    margin-top: -100vw;
    border-radius: 43%;
    animation: rotate 9000ms infinite linear;
    &:nth-child(1){
      animation: rotate 12000ms infinite linear;
    }
    &:nth-child(2){
      animation: rotate 15000ms infinite linear;
      opacity: 0.1;
      background-color: #777;
    }
  }
}

@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。