天天看點

css3簡單幾步畫一個乾坤圖

效果如上,滑鼠移上去會有動畫。

代碼如下非常簡單:

css3簡單幾步畫一個乾坤圖
css3簡單幾步畫一個乾坤圖

View Code

步驟就四步:

1:先寫半邊,再複制一份在它下面                                

css3簡單幾步畫一個乾坤圖

2:把下面半邊旋轉180度,transform:rotate(180deg);

css3簡單幾步畫一個乾坤圖

3:把下面半邊反色,可以使用css3的反色:-webkit-filter:invert(1); 但是目前隻有webkit的核心支援了,是以還是自己寫css設定background吧

4:接着再複制一份完整的乾坤圖,要注意疊在一起,然後設定一個動畫就好了,我這裡的動畫是放大+透明transform:scale(1.5) rotate(180deg);

css3簡單幾步畫一個乾坤圖

好了,這就寫完了。我為什麼畫乾坤圖呢,是因為我名字裡面有個坤咯。

哈哈,應該是端午節閑的。