﻿<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3鼠标跟随眼球转动小猫动画 - 源码之家</title>
<style>
	.cat{
		width:500px;
		margin:0 auto;
		position:relative;
		cursor:pointer;
	}
	.head_content{
		position:absolute;
		top:100px;
	}
	.ear_left{
		width:100px;
		height:150px;
		background-color:#FCEDBC;
		border-radius:50% / 10%;
		position:absolute;
		top:22px;  left:16px;
		transform:rotate(-20deg);
	}
	.ear_right{
		width:100px;
		height:150px;
		background-color:#FCEDBC;
		border-radius:50% / 10%;
		position:absolute;
		top:22px;  left:227px;
		transform:rotate(20deg);
	}
	.head{
		width:345px;
		height:270px;
		background-color:#FFF5D7;
		-webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
		border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
		position:absolute;
		top:0;
	}
	.brow_left{
		width:44px;
		height:20px;
		border:1px solid transparent;
		border-top:2px solid #000;
		border-radius:50%/35%;
		position:absolute;
		top:49px; left:60px;
		transform:rotate(-37deg);
	}
	.brow_right{
		width:44px;
		height:20px;
		border:1px solid transparent;
		border-top:2px solid #000;
		border-radius:50%/35%;
		position:absolute;
		top:49px; left:240px;
		transform:rotate(37deg);
	}
	.eye_left{
		width:70px;
		height:70px;
		background:#fff;
		border:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:67px; left:70px;
	}
	.eye_right{
		width:70px;
		height:70px;
		background:#fff;
		border:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:67px; left:205px;
	}
	.pupil{
		width:38px;
		height:38px;
		background:#000;
		border-radius:50%;
		position:absolute;
		top:7px; left:30px;
	}
	.beard_left1{
		width:95px;
		border-top:1px solid #000;
		position:absolute;
		top:158px; left:-50px;
		transform:rotate(10deg);
	}
	.beard_left2{
		width:95px;
		border-top:1px solid #000;
		position:absolute;
		top:187px; left:-60px;
		transform:rotate(-7deg);
	}
	.beard_left3{
		width:95px;
		border-top:1px solid #000;
		position:absolute;
		top:208px; left:-50px;
		transform:rotate(-16deg);
	}
	.beard_right1{
		width:95px;
		border-top:1px solid #000;
		position:absolute;
		top:158px; left:300px;
		transform:rotate(-10deg);
	}
	.beard_right2{
		width:95px;
		border-top:1px solid #000;
		position:absolute;
		top:187px; left:310px;
		transform:rotate(7deg);
	}
	.beard_right3{
		width:95px;
		border-top:1px solid #000;
		position:absolute;
		top:208px; left:300px;
		transform:rotate(16deg);
	}
	.nose{
		width:20px;
		height:10px;
		background-color:#000;
		border-radius:50%/40%;
		position:absolute;
		top:142px; left:161px;
	}
	.mouse{
		position:absolute;
		top:152px; left:171px;
	}
	.mouse_top{
		height:10px;
		border-left:1px solid #000;
		position:absolute;
		top:0; left:0;
	}
	.mouse_left{
		width:100px;
		height:100px;
		border:1px solid transparent;
		border-bottom:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:-78px; left:-86px;
	}
	.mouse_right{
		width:100px;
		height:100px;
		border:1px solid transparent;
		border-bottom:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:-78px; left:-14px;
	}
	.mouse_bottom{
		width:20px;
		height:20px;
		border:1px solid transparent;
		border-bottom:1px solid #000;
		border-right:1px solid #000;
		position:absolute;
		top:8px; left:-9px;
		transform:rotate(45deg);
	}
	.mouse_bottom_show{
		width:100px;
		height:100px;
		border:1px solid transparent;
		border-bottom:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:-63px; left:-49px;
		display:none;
	}
	.miao{
		position:absolute;
		top:-5px; left:52px;
		font-size:20px;
		opacity:0;
		color:#FD7055;
	}
	@keyframes miaoAnim{
		0%{opacity:0;top:-5px;left:52px;}
		30%{opacity:1;top:-20px;left:72px;font-size:23px;}
		65%{opacity:0.5;top:-35px;left:92px;font-size:26px;}
		100%{opacity:0;top:-50px;left:112px;font-size:30px;}
	}
	.mouse:hover .mouse_bottom{
		display:none;
	}
	.mouse:hover .mouse_bottom_show{
		display:block;
	}
	.mouse:hover .miao{
		animation:miaoAnim 1.5s linear;
	}

	.body_content{
		position:absolute;
		top:305px; left:101px;
	}
	.body{
		width:140px;
		height:165px;
		background:#FCEDBC;
		border:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:0; left:0;
		z-index:-10;
	}
	.arm_left{
		width:20px;
		height:80px;
		background:#FAE8AD;
		border:1px solid #000;
		border-radius:50% / 40%;
		position:absolute;
		top:30px; left:10px;
		transform:rotate(50deg);
		z-index:-20;
	}
	.arm_right{
		width:20px;
		height:80px;
		background:#FAE8AD;
		border:1px solid #000;
		border-radius:50% / 40%;
		position:absolute;
		top:30px; left:110px;
		transform:rotate(-50deg);
		z-index:-20;
	}
	.leg_left{
		width:30px;
		height:93px;
		background:#FAE8AD;
		border:1px solid #000;
		border-radius:50% / 40%;
		position:absolute;
		top:88px; left:14px;
		transform:rotate(-20deg);
		z-index:-20;
	}
	.leg_right{
		width:30px;
		height:93px;
		background:#FAE8AD;
		border:1px solid #000;
		border-radius:50% / 40%;
		position:absolute;
		top:88px; left:96px;
		transform:rotate(20deg);
		z-index:-20;
	}
	.tail{
		position:absolute;
		top:86px; left:52px;
		z-index:-30;
		animation:tailanim 1.5s infinite;
	}
	.tail1{
		width:236px;
		height:100px;
		border:1px solid transparent;
		border-top:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:0; left:0;
		transform:rotate(-25deg);
	}
	.tail2{
		width:61px;
		height:41px;
		border:1px solid transparent;
		border-bottom:1px solid #000;
		border-right:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:-13px; left:145px;
		transform:rotate(-38deg);
	}
	.tail3{
		width:23px;
		height:30px;
		border:1px solid transparent;
		border-bottom:1px solid #000;
		border-right:1px solid #000;
		border-radius:50%;
		position:absolute;
		top:5px; left:148px;
		transform:rotate(121deg);
	}
	@keyframes tailanim{  /*尾巴动画*/
		20%{transform:rotate(5deg);}
		40%{transform:rotate(0deg);}
		60%{transform:rotate(10deg);}
		100%{transform:rotate(0deg);}
	}
	.ear_left:hover{animation:earLeftAnim 0.5s linear;}
	.ear_right:hover{animation:earRightAnim 0.5s linear;}
	@keyframes earLeftAnim{
		50%{top:13px;transform:rotate(-3deg);}
		100%{top:22px;transform:rotate(-20deg);}
	}
	@keyframes earRightAnim{
		50%{top:13px;transform:rotate(3deg);}
		100%{top:22px;transform:rotate(20deg);}
	}
</style>
</head>
<body>
<div class="cat">
<div class="head_content">
	<div class="ear_left"></div>
	<div class="ear_right"></div>
	<div class="head"></div>
	<div class="brow_left"></div>
	<div class="brow_right"></div>
	<div class="eye_left">
		<div id="pL" class="pupil"></div>
	</div>
	<div class="eye_right">
		<div id="pR" class="pupil"></div>
	</div>
	<div class="beard_left1"></div>
	<div class="beard_left2"></div>
	<div class="beard_left3"></div>
	<div class="beard_right1"></div>
	<div class="beard_right2"></div>
	<div class="beard_right3"></div>
	<div class="nose"></div>
	<div class="mouse">
		<div class="mouse_top"></div>
		<div class="mouse_left"></div>
		<div class="mouse_right"></div>
		<div class="mouse_bottom"></div>
		<div class="mouse_bottom_show"></div>
		<div class="miao">喵</div>
	</div>
</div>
<div class="body_content">
	<div class="body"></div>
	<div class="arm_left"></div>
	<div class="arm_right"></div>
	<div class="leg_left"></div>
	<div class="leg_right"></div>
	<div class="tail">
		<div class="tail1"></div>
		<div class="tail2"></div>
		<div class="tail3"></div>
	</div>
</div>
</div>


<script>
//获取cat所在div的位置
var catx=document.getElementsByClassName("cat")[0].offsetLeft;
var pL=document.getElementById("pL");
var pR=document.getElementById("pR");
var r=17;

document.onmousemove=function(ev) {
	var e = ev || event;
	var m=[];
	m.x=e.clientX-catx;  //鼠标坐标能落在左边等位置
	m.y=e.clientY-170;   //head_content、head、eye离上方的距离，使鼠标能落在上方区域
	var s=[];
	s.x=pL.offsetLeft;
	s.y=pL.offsetTop;
	var mosx = Math.abs(m.x - s.x);
	var mosy = Math.abs(m.y - s.y);
	var angle = Math.atan(mosy / mosx);
	var cx = 0, cy = 0;
	if (m.x >= s.x && m.y <= s.y) {
		cx = Math.cos(angle) * r;
		cy = Math.sin(angle) * -r;
//            console.log("右下");
	}
	if (m.x < s.x && m.y < s.y) {
		cx = Math.cos(angle) * -r;
		cy = Math.sin(angle) * -r;
//            console.log("左下");
	}
	if (m.x < s.x && m.y > s.y) {
		cx = Math.cos(angle) * -r;
		cy = Math.sin(angle) * r;
//            console.log("左上");
	}
	if (m.x > s.x && m.y > s.y) {
		cx = Math.cos(angle) * r;
		cy = Math.sin(angle) * r;
//            console.log("右上");
	}

	if((m.x+catx)>=catx && (m.x+catx)<=(catx+345) && (m.y+170)>=100 && (m.y+170)<=360){
		pL.style.top =15+'px';
		pR.style.top =15+'px';
		pL.style.left =18+'px';
		pR.style.left =18+'px';
	}else{
		pL.style.top = 15+ cy + 'px';
		pR.style.top = 15+ cy + 'px';
		pL.style.left =17+cx + 'px';
		pR.style.left =17+cx + 'px';
	}
}
</script>

<div style="text-align:center;">
<p>更多源码：<a href="https://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>