掘金彩蛋：愛的魔力轉圈圈

看了站長的直播以後，瞬間以爲世界真奇妙。爲何有如此美麗的女子（(⊙o⊙)…）。

讓我想爲站長吟詩做曲一首：

雲想衣裳花想容，春風拂檻露華濃。

若非羣玉山頭見，會向瑤臺月下逢。

我本身都笑了，哈哈哈哈，不調戲站長了，咱們言歸正傳。昨天在逛掘金-個人主頁時，發現一個掘金的彩蛋。以爲頗有意思哈。

愛的魔力轉圈圈，

想你想到心花盛開黑夜白天，

但是我懼怕愛情只是一瞬間，

轉眼會不見，

我要慢慢冒險。

出於好奇，我就想看看掘金怎麼實現的，原來幾行很是簡單的css就實現了這個好玩的彩蛋。

下面咱們來認識一下這段代碼的CSS。

.user-info-block .avatar:hover{
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}
複製代碼

1、transform

1. 描述

MDN：CSStransform屬性容許你旋轉，縮放，傾斜或平移給定元素。這是經過修改CSS視覺格式化模型的座標空間來實現的。

2. 語法

transform: none|transform-functions;

值	描述
none	定義不進行轉換。
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	經過設置 X 軸的值來定義縮放轉換。
scaleY(y)	經過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	經過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿着 X 軸的 3D 旋轉。
rotateY(angle)	定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿着 Z 軸的 3D 旋轉。
skew(x-angle,y-angle)	定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)	定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿着 Y 軸的 2D 傾斜轉換。
perspective(n)	爲 3D 轉換元素定義透視視圖。

3. 兼容性

2D Transforms

3D Transforms

4. rotate(666turn)

1turn = 360°

666true = 666*360°

1、transition-delay

1. 描述

CSS的transition-delay屬性規定了在過渡效果開始做用以前須要等待的時間。值以秒（s）或毫秒（ms）爲單位，代表動畫過渡效果將在什麼時候開始。取值爲正時會延遲一段時間來響應過渡效果；取值爲負時會致使過渡當即開始。

2. 語法

transition-delay: time;

值	描述
time	規定在過渡效果開始以前須要等待的時間，以秒或毫秒計。

3. 兼容性

4. transition-delay: 1s

過渡效果開始以前等待1秒

3、transition-property

1. 描述

transition-property 指定應用過渡屬性的名稱。

2. 語法

transition-property: none|all|property;

值	描述
none	沒有屬性會得到過渡效果。
all	全部屬性都將得到過渡效果。
property	定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

3. 兼容性

CSS property: transition-property

CSS property: transition-property: IDENT value

4. transition-property: all

爲全部屬性定義過渡效果。

4、 transition-duration

1. 描述

transition-duration 屬性以秒或毫秒爲單位指定過渡動畫所需的時間。默認值爲 0s ，表示不出現過渡動畫。

2. 語法

transition-duration: time;

值	描述
time	規定完成過渡效果須要花費的時間（以秒或毫秒計）。默認值是 0，意味着不會有效果。

3. 兼容性

4. transition-duration: 59s

過渡動畫所需的時間爲59s。

5、 transition-timing-function

1. 描述

CSS屬性受到 transition effect的影響，會產生不斷變化的中間值，而 CSS transition-timing-function 屬性用來描述這個中間值是怎樣計算的。實質上，經過這個函數會創建一條加速度曲線，所以在整個transition變化過程當中，變化速度能夠不斷改變。

2. 語法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);

值	描述
linear	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

3. 兼容性

CSS property: transition-timing-function

CSS property: transition-timing-function: jump- keywords for steps()

4. cubic-bezier(.34,0,.84,1)

在 cubic-bezier 函數中定義本身的值。 cubic-bezier稱爲三次貝塞爾曲線，主要是生成速度曲線的函數，規定是cubic-bezier(,,,) .

從上圖中咱們能夠看到，cubic-bezier有四個點：

兩個默認的，即：P0(0,0)，P3(1,1);

兩個控制點，即：P1(x1,y1)，P2(x2,y2);

注：X軸的範圍是0~1，超出cubic-bezier將失效，Y軸的取值沒有規定，可是也不宜過大。 咱們只要調整兩個控制點P1和P2的座標，最後造成的曲線就是動畫曲線。

6、總結

.user-info-block .avatar:hover{
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}
複製代碼

這些屬性組合起來就實現了掘金的小彩蛋，愛的魔力轉圈圈。看彩蛋的同時還學習了幾個簡單CSS3屬性，站長萌萌噠~~~