纯css3 伪元素制作旋转小风扇
2017-05-26 09:10
639 查看
一、效果图
二、需求
制作旋转的小风扇,并且颜色是可以改变的三、制作思路
只用一个标签来承载风扇,并且颜色可以任意更改,所以只能有一个标签明码定义颜色控制旋转只要在该标签上添加动画即可
所以只用一个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;}
相关文章推荐
- 元素中心旋转在CSS3和IE滤镜中的实现
- CSS3特效----制作3D旋转照片展示区
- 用CSS3制作的旋转六面体动画
- CSS3特效----制作3D旋转导航
- 用css3制作旋转加载动画的几种方法
- CSS3 制作旋转的大风车
- css3新技术-旋转的元素--transform
- CSS3:制作3D旋转导航综合练习题
- 通过js获取元素css3的transform rotate旋转角度方法
- CSS3 制作旋转的大风车
- HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)
- 元素中心旋转在CSS3和IE滤镜中的实现
- css3之元素的缩放、渐变、旋转和平移
- css3的动画特效--元素旋转(transition,animation)
- 纯CSS3制作骰子3D旋转动画效果
- 用css3制作旋转加载动画的几种方法
- css3制作旋转动画
- CSS3制作旋转的小风车
- CSS3 transform 属性 旋转 div 元素
- 用css3制作旋转加载动画的几种方法