背景移動效果

原理

  1. 背景使用漸層色
  2. 放大背景寬度
  3. 使用動畫,移動background-position定位

範例

.box
.box
 width: 200px
 height: 150px
 background: linear-gradient(20deg, #24260f, #90a955)
 background-size: 100% 300%
 animation: move 8s infinite both
 
@keyframes move
 0%
 background-position: 100% 30%
 100%
 background-position: 100% 100%

Display

.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *