css3背景色過渡

css進階

        背景顏色徑向漸變
        背景顏色線性漸變
        過渡

背景顏色徑向漸變

    徑向漸變：中間部分橢圓形，四周填充（由中間到四周漸變）

  background: radial-gradient(red,yellow);          紅橢圓填充黃色
  background: radial-gradient(circle,red,yellow);   紅正圓填充黃色
  background: radial-gradient(red 60%,yellow 60%);  紅60%，之后黃色
  background: radial-gradient(50px 50px,red 50px,black 100px);   圓的垂直半徑，水平半徑設置
  background: radial-gradient(at left top,red 50%,black 50%);    at設置圓心位置，來達到控制方向
  background: repeating-radial-gradient(red 20px,green 50px);    圈圈套圈圈，循環

 

背景顏色線性漸變

    默認由上到下漸變（可設置漸變方向）

 background: linear-gradient(red,yellow);  顏色由紅變黃
 background: linear-gradient(red 60%,yellow 60%);  紅色占60%，然后開始漸變紅到黃。
                                                   然后黃色從60%開始，就會形成分割線
 background: linear-gradient(to right,red,yellow);  到右，從左到右
 background: linear-gradient(to left,red,yellow);   到左，從右到左
 background: linear-gradient(to right bottom,red,yellow);  到右下
 background: linear-gradient(60deg,red,yellow);  旋轉60度
 background: repeating-linear-gradient(black 0 , black 10px , transparent 10px ,
 transparent 20px)     repeating-linear-gradient規定顏色范圍，方便循環

 

過渡

    transition-duration 過渡持續時間（duration：持續時間）
    transition-property 需要執行過渡的樣式（默認all：都改變。width:只改變寬，height：只改變高）
    transition-delay 過渡延遲時間（delay：延遲）
    transition-timing-function 過渡速度快慢曲線（默認：慢快慢，linear：勻速）
    更多曲線查看貝塞爾曲線
    transition 復合樣式。過渡時間/延遲時間，其他順序任意寫