純css3 偽元素製作旋轉小風扇
阿新 • • 發佈:2019-01-04
一、效果圖
二、需求
製作旋轉的小風扇,並且顏色是可以改變的
三、製作思路
只用一個標籤來承載風扇,並且顏色可以任意更改,所以只能有一個標籤明碼定義顏色
控制旋轉只要在該標籤上新增動畫即可
所以只用一個span標籤製作中間的小圓點,使用偽元素和子元素製作周邊的扇葉,背景顏色繼承父元素的顏色
但是小圓點的展示出來的背景顏色應該是輔助顏色-淺灰色,外加一個黑色邊框
所以我們使用邊框和陰影製作出背景顏色和邊框
四、程式碼
<span class="fan red"><i></i></span>
.fan{ display: block; width: 0px; height: 0px; border-radius: 50%; border: 1px solid #999; box-shadow: 0 0 0 1px #000;position: relative; margin: 13px auto; animation: rotateFan 5s linear infinite;-webkit-animation: rotateFan 5s linear infinite;-moz-animation: rotateFan 5s linear infinite;} @-webkit-keyframes rotateFan{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(-360deg);} } .fan i , .fan::before , .fan::after{display: inline-block;width: 7px;height: 12px;border-radius: 24% 88%;position: absolute;background: inherit;border: 1px solid #000;} .fan i{transform: rotate(30deg);left: -6px;top: -15px;} .fan::before {content: '';transform: rotate(90deg);left: -11px;top: -2px;} .fan::after{content: '';transform: rotate(-30deg);left: 3px;top: -4px;} .red{ background: #f90005;}