純css3 偽元素製作旋轉小風扇

2021-08-01 16:06:54 字數 585 閱讀 9787

製作旋轉的小風扇,並且顏色是可以改變的

只用乙個標籤來承載風扇,並且顏色可以任意更改,所以只能有乙個標籤明碼定義顏色

控制旋轉只要在該標籤上新增動畫即可

所以只用乙個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...