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" 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>
 复制

在这里插入图片描述

标签

html--斗鸡眼

前端提高篇（102）：jQuery高级方法callbacks、deferred

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

模仿电影中黑客电脑界面，html装逼代码

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

html 无序标签有序标签及表单

在IntelliJ IDEA中创建一个HTML项目

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!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>

html--斗鸡眼

微信扫一扫：分享