效果如上,滑鼠移上去會有動畫。
代碼如下非常簡單:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
View Code
步驟就四步:
1:先寫半邊,再複制一份在它下面
2:把下面半邊旋轉180度,transform:rotate(180deg);
3:把下面半邊反色,可以使用css3的反色:-webkit-filter:invert(1); 但是目前隻有webkit的核心支援了,是以還是自己寫css設定background吧
4:接着再複制一份完整的乾坤圖,要注意疊在一起,然後設定一個動畫就好了,我這裡的動畫是放大+透明transform:scale(1.5) rotate(180deg);
好了,這就寫完了。我為什麼畫乾坤圖呢,是因為我名字裡面有個坤咯。
哈哈,應該是端午節閑的。