html--斗鸡眼

最新推荐文章于 2024-06-14 07:44:22 发布

fo安方

最新推荐文章于 2024-06-14 07:44:22 发布

阅读量1k

点赞数 27

分类专栏： html 文章标签： html css javascript

本文链接：https://blog.csdn.net/stqer/article/details/139086955

版权

html 专栏收录该内容

132 篇文章 55 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>body {
  height: 100vh;
  background: lightgrey;
}

.item {
  border: 1px solid black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  // opacity: 0.5;
  // mix-blend-mode: multiply;
  transition: 0.2s ease;
  
  
  // width: 20px !important;
  // height: 20px !important;
  // border-radius: 100% !important;
}

.center {
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.eye {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 75% 15%;
  transform: rotate(45deg);
  overflow: hidden;
}

.left {
  left: 300px;
}
.right {
  right: 300px;
}

.eye-derotate {
  transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.iris {
  width: 120px;
  height: 120px;
  background: lightblue;
  border-radius: 100%;
  transition: 0.2s ease;
  transform: translate(0, 0);
}

.pupil {
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 100%;
  transition: 0.2s ease;
}


.hide {
  display: none;
}</style>
 </HEAD>

 <BODY>
 <div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>


<div class="center eye left">
  <div class="eye-derotate">
    <div class="center iris">
      <div class="center pupil"></div>
    </div>
  </div>
</div>

<div class="center eye right">
  <div class="eye-derotate">
    <div class="center iris">
      <div class="center pupil"></div>
    </div>
  </div>
</div>
  <script>console.clear();
var item = document.querySelectorAll('.item1');

var eye = document.querySelectorAll('.eye');
var iris = document.querySelectorAll('.iris');
var pupil = document.querySelectorAll('.pupil');


document.addEventListener('mousemove', function(e) {
  var sW = window.innerWidth;
  var sH = window.innerHeight;
  var cW = sW / 2;
  var cH = sH / 2;
  var mX = e.clientX;
  var mY = e.clientY;
  
  
  for(var i = 0; i < eye.length; i++) {
    var el = eye[i].getBoundingClientRect();
    var eyeCenterX = el.left + el.width / 2;
    var eyeCenterY = el.top + el.height / 2;
    
    var dX = eyeCenterX - mX;
    if(dX < -200) {
      dX = -200;
    } else if(dX > 200) {
      dX = 200;
    }
    
    var dY = eyeCenterY - mY;
    if(dY < -200) {
      dY = -200;
    } else if(dY > 200) {
      dY = 200;
    }
    
    var pX = (dX) * 100 / 200;
    var moveIrisX = 40 * pX / 100 * -1;
    var movePupilX = 25 * pX / 100 * -1;

    var pY = (dY) * 100 / 200;
    var moveIrisY = 30 * pY / 100 * -1;
    var movePupilY = 25 * pY / 100 * -1;

    console.log(dX, dY);
    
    iris[i].style.transform = 'translate(' + moveIrisX + 'px, ' + moveIrisY + 'px)';
    pupil[i].style.transform = 'translate(' + movePupilX + 'px, ' + movePupilY + 'px)';
  };
});</script>
 </BODY>
</HTML>

在这里插入图片描述

fo安方

关注

27
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
html--斗鸡眼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords
复制链接

扫一扫