製作旋轉的小風扇,並且顏色是可以改變的
只用乙個標籤來承載風扇,並且顏色可以任意更改,所以只能有乙個標籤明碼定義顏色
控制旋轉只要在該標籤上新增動畫即可
所以只用乙個span標籤製作中間的小圓點,使用偽元素和子元素製作周邊的扇葉,背景顏色繼承父元素的顏色
但是小圓點的展示出來的背景顏色應該是輔助顏色-淺灰色,外加乙個黑色邊框
所以我們使用邊框和陰影製作出背景顏色和邊框
.fan
@-webkit-keyframes rotatefan to }
.fan i , .fan::before , .fan::after
.fan i
.fan::before
.fan::after
.red
CSS3動畫之旋轉小魔方
利用css3動畫特性的小例子 doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title width 300px ...
CSS3 偽元素和偽類
css偽類和偽元素的區別,在css3中,實際上的偽元素應該只有 before和 after兩個了,這兩個元素是實際存在在dom中的,而類本身就是表示元素的狀態,所以偽類應該也是為了表示元素的狀態的。在css3中,可以直接用 還是 來區分偽類和為元素了。由於偽類主要是表示元素的狀態,那麼偽類的主要功能...
css3 偽元素和偽類
1,定義 w3c定義 偽元素偽類 都可以向某些選擇器設定特殊效果。css2中定義 css3中的定義 1 偽元素 在dom樹中建立了一些抽象元素 虛擬的容器 由兩個冒號 開頭 css2中並沒有區別 為了相容性一般還是寫乙個冒號 2 偽類 為了選擇器找到那些不存在於dom樹中的資訊 及 不能被常規css...