css实现图标随鼠标位置转动

极验验证码点击按钮中图标随鼠标位置转动效果实现
在这里插入图片描述
完整代码：
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
<body>
	<div id="captcha">
      <!-- geetest_detect geetest_wait_compute-->
      <div class="geetest_holder geetest_wind geetest_detect">
        <div class="geetest_btn">
          <div class="geetest_radar_btn">
            <div class="geetest_radar">
              <div class="geetest_ring">
                <div class="geetest_small"></div>
              </div>
              <div class="geetest_sector" id="geetest_sector" style="transform: rotate(240.795deg);">
                <div class="geetest_small"></div>
              </div>
              <div class="geetest_cross">
                <div class="geetest_h"></div>
                <div class="geetest_v"></div>
              </div>
              <div class="geetest_dot"></div>
              <div class="geetest_scan">
                <div class="geetest_h"></div>
              </div>
              <div class="geetest_status">
                <div class="geetest_bg"></div>
                <div class="geetest_hook"></div>
              </div>
            </div>
          </div>
        </div>
        <div style="float: left;margin-top: 10px;margin-left: 60px;">点击按钮进行验证</div>
      </div>
    </div>
</body>
</html>
<style>
#captcha {
  width: 260px;
  height: 44px;
  border: 1px solid #666;
  margin-left: 40%;
  margin-top: 100px;
  cursor: pointer;
}
.geetest_holder.geetest_wind {
    position: relative;
    width: 260px;
    min-width: 260px;
    height: 44px
}

.geetest_holder.geetest_wind .geetest_radar {
    position: absolute;
    margin: 6px;
    width: 30px;
    height: 30px;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.geetest_holder.geetest_wind .geetest_radar .geetest_sector,.geetest_holder.geetest_wind .geetest_radar .geetest_ring,.geetest_holder.geetest_wind .geetest_radar .geetest_dot,.geetest_holder.geetest_wind .geetest_radar .geetest_cross,.geetest_holder.geetest_wind .geetest_radar .geetest_scan,.geetest_holder.geetest_wind .geetest_radar .geetest_status {
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

/*圆心缺角部分*/
.geetest_holder.geetest_wind .geetest_radar .geetest_sector {
    box-shadow: inset 0 0 0 1px #3873ff;
    background-color: #80A6FC;
    background-image: linear-gradient(115deg, rgba(0,0,0,0) 50%,#c6d5f8 50%),linear-gradient(65deg, #c6d5f8 50%,rgba(0,0,0,0) 50%);
    opacity: 0;
    -moz-transition: all ease;
    -o-transition: all ease;
    -webkit-transition: all ease;
    transition: all ease
}

.geetest_holder.geetest_wind .geetest_radar .geetest_ring {
    box-shadow: inset 0 0 0 1px #3873ff;
    background: #C6D5F8
}

.geetest_holder.geetest_wind.geetest_detect .geetest_radar .geetest_sector {
    opacity: 1
}
/*静态圆 */
.geetest_holder.geetest_wind.geetest_detect .geetest_radar .geetest_ring {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}
/*圆心*/
.geetest_holder.geetest_wind.geetest_detect .geetest_radar .geetest_dot {
    background: #3873ff
}
/*鼠标悬停动态圆*/
.geetest_holder.geetest_wind.geetest_wait_compute .geetest_radar .geetest_ring {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-animation: geetest_wait_compute 0.8s linear infinite both;
    -webkit-animation: geetest_wait_compute 0.8s linear infinite both;
    animation: geetest_wait_compute 0.8s linear infinite both
}

@keyframes geetest_wait_compute {
    60% {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
}
/*圆心*/
.geetest_holder.geetest_wind.geetest_wait_compute .geetest_radar .geetest_dot {
    background: #3873ff
}
</style>
<script>
  var myDiv = document.getElementById("captcha");
  document.onmousemove = function (e) {
      var w = myDiv.offsetWidth;
      var h = myDiv.offsetHeight;
      var x = (e.pageX - myDiv.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
      var y = (e.pageY - myDiv.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
      var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
      //将旋转角度写入transform中
      var geetestSector = document.getElementById("geetest_sector");
      var res = Math.atan2(y, x) / (Math.PI / 180) + 90 ;
      geetestSector.style.transform = "rotate("+res+"deg)";
  };

  // 鼠标移入和移出效果
  function enterClass(){
      myDiv.firstElementChild.className="geetest_holder geetest_wind geetest_wait_compute";
  }
  function leaveClass(){
      myDiv.firstElementChild.className="geetest_holder geetest_wind geetest_detect";
  }
  if( window.addEventListener ){
      myDiv.addEventListener( 'mouseover',enterClass,false );
      myDiv.addEventListener( 'mouseout',leaveClass,false );
  }else if( window.attachEvent ){
      myDiv.attachEvent( 'onmouseenter',enterClass );
      myDiv.attachEvent( 'onmouseleave',leaveClass );
  }
</script>
浮生浪蕊
发布了17 篇原创文章 · 获赞 1 · 访问量 2206
私信关注
css实现图标随鼠标位置转动

猜你喜欢
