C3炫酷多功能风扇_jquery做电风扇-CSDN博客

本文链接：https://blog.csdn.net/SKL_CSDN/article/details/121502017
给大家带来一款多功能电风扇效果，原理很简单只要了解C3中的3d特性及jQuery就能很轻松的
看懂源代码，因为为了方便大家直接观看所引入的jq文件为网络路径，所以大家打开的时候可能会有网络延迟，废话不多说直接上源码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
   <style>
       
       *{
           margin:0;
           padding:0;
       }
       body{
           background:#ddd;
       }
       ul,ol{list-style: none;}
      .big-box{
          width:220px;
          height:300px;
          margin: 100px auto;
          -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
          /* transform:rotateX(45deg) rotateY(10deg); */
          perspective:1000px;
          /* -webkit-box-reflect:below 0px; */
      }
      .topBox{
          width:200px;
          height:200px;
          background: rgb(240, 239, 239);
          border:10px solid rgb(109, 201, 255);
          border-radius:50%;
          position: relative;
          -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
          perspective:1000px;
          /* display: none; */
      }
      .topBox .kBox{
          width:200px;
          height:200px;
          border-radius:50%;
          -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
          /* display:none; */
      }
      .topBox .kBox .k{
          width:40px;
          height:100px;
          border:1px solid aqua;
          border-left:none;
          border-bottom:none;
          border-top-right-radius:30px;
          position:absolute;
          top:0;
          left:50%;
          margin-left:-2px;
          -webkit-transform-origin: 0px 100px;
          transform-origin: 0px 100px;
      }
      .topBox .logo{
          width:20px;
          height:20px;
          background:#fff;
          border:3px solid aqua;
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-50%) translateZ(42px);
          border-radius:50%;
          text-align:center;
          line-height:20px;
      }
      .topBox .yBox{
          width:20px;
          height:20px;
          position:absolute;
          top:50%;
          left:50%;
          margin-top:-10px;
          margin-left:-10px;
          background:red;
          border-radius:50%;
          transform:translateZ(10px);
          /* display:none; */
          box-shadow:1px 1px 3px 2px rgb(106,255,57);
      }
      .yBox .y{
          width:40px;
          height:90px;
          background: rgb(106, 255, 57);
          border-radius:0px 20px 40px 0px;
          position:absolute;
          top:50%;
          left:50%;
          transform-origin:0px 0px;
      }
      .yBox .y1{
          transform:rotate(120deg);
      }
      .yBox .y2{
          transform:rotate(240deg);
      }
      .sG{
          width:20px;
          height:50px;
          background:rgb(109, 201, 255);
          box-shadow:0px 0px 0px 1px rgb(31, 163, 240);
          position:absolute;
          left:50%;
          top:220px;
          margin-left:-10px;
          /* display:none; */
      }
      .zt{
          width:5px;
          height:5px;
          position:absolute;
          left:50%;
          top:50%;
          margin-top:-2.5px;
          margin-left:-2.5px;
          border-radius:50%;
          background:rgb(189, 0, 0);
          box-shadow:0px 0px 5px 2px rgb(189, 0, 0);
      }
      .onZt{
          background:rgb(1, 160, 49);
          box-shadow:0px 0px 5px 2px rgb(1, 160, 49);
      }
      .lj{
          width:25px;
          height:4px;
          background:rgb(109, 201, 255);
          box-shadow:0px 0px 0px 1px rgb(31, 163, 240);
          position:absolute;
          left:50%;
          margin-left:-12.5px;
          bottom:0px;
      }
      .dpBox{
          width:100px;
          height:60px;
          background:rgb(109, 201, 255);
          box-shadow:0px 0px 0px 1px rgb(31, 163, 240);
          border-radius:10px;
          position:absolute;
          top:240px;
          left:50%;
          margin-left:-50px;
          /* -webkit-transform:rotateX(20deg); */
          transform:rotateX(45deg);
      }
      .onOff{
          width:15px;
          height:15px;
          position:absolute;
          bottom:10px;
          left:10px;
          cursor: pointer;
      }
      .onOff img{
          width: 100%;
          height: 100%;
      }
      .dangBox{
          width:60px;
          height:10px;
          position:absolute;
          bottom:10px;
          left:40px;
      }
      .dangBox .d{
          float: left;
          width:12px;
          height:12px;
          font-size:12px;
          background:rgb(251, 255, 43);
          margin-right:5px;
          line-height:12px;
          text-align:center;
          cursor: pointer;
          border-radius:2px;
          box-shadow:0.5px 0.5px 0px 1px rgb(253, 255, 120),1px 1px 0px 1px rgb(253, 255, 120);
      }
      .dangBox .onD{
        background:rgb(154, 154, 154);
      }
      .sG .rotate{
          width:20px;
          height:4px;
          background:rgb(109, 201, 255);
          box-shadow:0px 0px 0px 1px rgb(31, 163, 240);
          position:absolute;
          top:5px;
          left:20px;
          cursor: pointer;
          z-index:-1;
          transition:0.3s;
      }
      .sG .rotate span{
          width:8px;
          height:8px;
          background:rgb(109, 201, 255);
          box-shadow:0px 0px 0px 1px rgb(31, 163, 240);
          border-radius:50%;
          position:absolute;
          right:-4px;
          top:-2px;
      }
      .sG .onRotate{
          left:10px;
      }
   </style>
<body>
    <div class="big-box">
         <!-- 风扇头部 -->
         <div class="topBox">
             <!-- 风扇罩 -->
             <div class="kBox">
                  <div class="logo">K</div>
             </div>
             <!-- 风扇叶 -->
             <div class="yBox">
                 <div class="y y1"></div>
                 <div class="y y2"></div>
                 <div class="y y3"></div>
             </div>
         </div>
         <!-- 风扇杠4 -->
         <div class="sG">
             <span class="zt"></span>
             <div class="lj"></div>
             <div class="rotate onRotate" title="旋转"><span></span></div>
         </div>
         <!-- 底盘 -->
         <div class="dpBox">
             <div class="onOff" title="开/关机"><img src="./img/onOff.png" alt=""></div>
             <div class="dangBox">
                 <span class="d d1" title="1档">1</span>
                 <span class="d d2" title="2档">2</span>
                 <span class="d d3" title="3档">3</span>
             </div>
         </div>
    </div>
</body>
   <script>
       $(function(){
           //开关    
           var flog1 = false,flog2 = false; 
           //定时器
           var tt = null,tt2 = null;
           var index = null;
           var l = 0;
           var j = 0,j1=1;
           // 风扇扇叶遮罩框    
           for(var i = 0;i<35;i++){
               var div = $("<div class='k'></div>")
               $(div).css({
                   "transform":"rotate("+(i*10)+"deg) rotateY(-90deg)"
               })
               $(".kBox").append(div)
           }
           // 风扇转动功力函数    
           function _rotate(obj,ms){
                 clearInterval(tt)
                 tt = setInterval(function(){
                    l += 5
                    obj.css({
                        "-webkit-transform":"rotate("+l+"deg)",
                        "transform":"rotate("+l+"deg)"
                    })
                 },ms)
           }
           // 风扇开机键    
           $(".onOff").on("click",function(){
               if(!flog1){ //开机成功
                   $(".zt").addClass("onZt") //提示灯变绿
                   tab() //调用风扇转动功能函数
                   flog1 = !flog1;
               } else { // 关机
                   $(".zt").removeClass("onZt") //提示灯变红
                   clearInterval(tt) // 关闭风扇
                   flog1 = !flog1; 
               }
           })

           
          //设置按钮状态    
           $(".dangBox .d").attr("re",true)
           $(".dangBox .d").click(function(){
               index = $(this).index()
               if($(this).attr("re")!="false"){ //判断按钮状态
                   $(this).addClass("onD").attr("re",false).siblings().removeClass("onD").attr("re",true)
                   tab() //按钮触发 调用风扇功力函数
               } else { // 按钮第二次点击 按钮恢复关闭状态
                   $(this).removeClass("onD").attr("re",true).siblings().removeClass("onD").attr("re",true)
                   clearInterval(tt)
               }
           })
           
           // 风扇功力 1-3档
           function tab(){
               if($(".zt").hasClass("onZt")){
                    if(index == 0){_rotate($(".yBox"),5)} // 1 档
                    if(index == 1){_rotate($(".yBox"),2.5)}  // 2 档
                    if(index == 2){_rotate($(".yBox"),0)}  // 3 档
               } else {
                   clearInterval(tt)
               }
           }
           // 风扇头的转动
           function topRotate(){
                clearInterval(tt2)
                tt2 = setInterval(function(){
                    j += j1
                    if(j > 45){j1 = -1}
                    if(j < -45){j1 = 1}
                    $(".topBox").css({
                        "-webkit-transform":"rotateY("+j+"deg)",
                        "transform":"rotateY("+j+"deg)"
                    })
                },80)
           }    

           $(".sG .rotate").click(function(){
               if(!flog2){
                   $(this).addClass("onRotate")
                   topRotate()
                   flog2 = ! flog2
               } else {
                  $(this).removeClass("onRotate")
                   clearInterval(tt2)
                   flog2 = ! flog2
               }
           })

           
       })
   </script>
</html>