Day23 優雅的漸層動畫 - 隨機而有秩序

今天我們會提到幾個不同的原理。你可以像生菜沙拉一樣自己條配。

漸層動畫有甚麼難的？我阿嬤...不會 CSS

                1body {
2    background: linear-gradient(90deg, red, yellow);
3    animation: gradientChange 1s infinite;
4}
5
6@keyframes gradientChange {
7    to {
8        background: linear-gradient(90deg, yellow, green);
9    }
10}
            

額，只有層，沒有漸。這是因為漸層是屬於 background-image，你要他怎麼漸圖片？

自己動

我們今天要用到的第一個方式是放大縮小，以及移動一個漸層，這樣就能做出類似於漸層的動畫。

`background-position`

我們先把圖片拉長到兩倍，然後移動 background-position 來做出動畫。

                1body {
2    background: linear-gradient(90deg, red, yellow);
3    background-size: 200% 100%;
4    background-position: 0 0;
5    animation: gradientChange 2s infinite linear alternate;
6}
7
8@keyframes gradientChange {
9    from {
10        background-position: 0 0;
11    }
12    to {
13        background-position: 100% 0;
14    }
15}
            

`background-size`

background-size 如果不搭配 background-position 的會可以做出這種左邊維持不動，右邊比例不同漸層的效果。

                1body {
2    background: linear-gradient(90deg, red, yellow);
3    animation: gradientChange 2s infinite linear alternate;
4}
5
6@keyframes gradientChange {
7    from {
8        background-size: 300% 300%;
9    }
10    to {
11        background-size: 100% 100%;
12    }
13}
            

如果把 background-position 移到最右邊就會變成右邊固定。

                1background-position: 100% 0;
            

`transform`

和 background-position 一樣，transform 也可以做出類似的效果。不過記得我們在 Day20 GPU! 啟動！- 淺談 CSS3 硬體加速有提到 transform 會啟動硬體加速，可以讓動畫更流暢，你的 CPU 也會感謝你。

再把大小調到兩倍大即可。我稍微修改了顏色讓你看得更清楚。

                1<div></div>
            

                1body {
  margin: 0;
  overflow: hidden;
4}
5div {
  background: linear-gradient(45deg, red, yellow, blue);
  animation: gradientChange 4s infinite linear;
  height: 200vh;
  width: 200vw;
10}
11
12@keyframes gradientChange {
  0% {
      transform: translate(0, 0);
  }
  25% {
      transform: translate(-50%, 0);
  }
  50% {
      transform: translate(-50%, -50%);
  }
  75% {
      transform: translate(0, -50%);
  }
  100% {
      transform: translate(0, 0);
  }
28}
            

filter

filter 濾鏡隨便給你開。

複習：Day7 幫我開濾鏡 filter

                1body {
2    margin: 0;
3}
4div {
5    background: linear-gradient(45deg, red, yellow);
6    animation: gradientChange 3s infinite;
7    min-height: 100vh;
8    filter: hue-rotate(50deg);
9}
10
11@keyframes gradientChange {
12    0 {
13        filter: hue-rotate(0);
14    }
15    100% {
16        filter: hue-rotate(360deg);
17    }
18}
            

你可以狂加讓他群魔亂舞起來。

https://codepen.io/edit-mr/pen/mdaabzQ?editors=1100

                1body {
2    margin: 0;
3}
4div {
5    background: linear-gradient(45deg, red, yellow);
6    animation: gradientChange 3s infinite linear alternate;
7    min-height: 100vh;
8    filter: hue-rotate(50deg);
9}
10
11@keyframes gradientChange {
12    0 {
13        filter: hue-rotate(0) contrast(1000%) invert(0%);
14    }
15    100% {
16        filter: hue-rotate(360deg) contrast(300%) invert(100%);
17    }
18}
            