標籤彙整:linear-gradient

筆記線效果

技巧

  1. linear-gradient
  2. 漸層中,後色%小於前色%形成色塊
  3. background-size
<div>
line1<br>
line2<br>
line3<br>
line4<br>
</div>
div {
  background: linear-gradient(rgba(238, 238, 238, 0.35) 95%, rgba(43, 139, 165, 0.15) 5%);
  //size決定重複的漸層色塊大小
  background-size: 100% 19px;
  border-radius: 3px 3px 3px 3px;
  font-size: 14px;
  border: 1px solid #90a955; 
}

Display

line1
line2
line3
line4

背景移動效果

原理

  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

.