[純css動畫] 漂浮的彩紙

今天來練習用 scss 的 for 迴圈搭配 random 製作動畫~

youtube:點這裡查看

codepan:點這裡查看


如果你懶得看 code,可以先看看影片我今天到底要幹嘛XD

 

html(pug)

.wrap
  - for(i=0; i< 200 ; i++)
    .box
      .rotate

 

scss

html,
body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wrap {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #222;
  .box {
    position: absolute;
    @for $i from 1 through 200 {
      &:nth-child(#{$i}) {
        top: calc(50% + #{random(300) - 100px});
        left: random(100) + 0%;
        animation: switch
            random(1500) + 500ms
            linear
            random(1000) + 0ms
            infinite
            alternate,
          opacity random(1500) + 500ms infinite alternate;
        .rotate {
          $width: random(5) + 5px;
          width: $width;
          height: $width;
          background-color: rgb(247, random(255), 87);
          opacity: random(5) / 10 + 0.5;
          animation: rotate random(500) + 2500ms infinite;
        }
      }
    }
  }
}

@keyframes switch {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

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

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

| 前後端技術合作 |

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

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

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