51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯css3 伪元素制作旋转小风扇

时间:2017-08-14 15:43点击:

一、效果图

     


二、需求

制作旋转的小风扇,并且颜色是可以改变的
三、制作思路

只用一个标签来承载风扇,并且颜色可以任意更改,所以只能有一个标签明码定义颜色

控制旋转只要在该标签上添加动画即可

所以只用一个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;}  


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开