CSS3跟随鼠标的眼睛转动效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3跟随鼠标的眼睛转动效果</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class='content'>
<p style='text-align:center;'>
<div class='eye_wrapper' id='eyeballs'>
<img alt="Head" class="head" src="//ku.shouce.ren/files/images/201601/56a325259f57a.png" style="width:141px;margin:20px auto;" />
<img alt="Ball" class="eye-left" id="eye_left" src="//ku.shouce.ren/files/images/201601/56a325263da29.png" />
<img alt="Ball" class="eye-right" id="eye_right" src="//ku.shouce.ren/files/images/201601/56a325263da29.png" />
</div>
</p>
</div>
</div>
<style>.eye_wrapper{
	width:141px;
	height:185px;
	margin:80px auto;
	position:relative;
}.eye_wrapper .head{
	z-index:1px}
.eye_wrapper .eye-left{
	position:absolute;
	top:82px;
	left:30px}
.eye_wrapper .eye-right{
	position:absolute;
	top:80px;
	left:96px}</style>
<script>var getAngle = function(Xc, Yc, Xa, Ya, Xb, Yb) {
var v1x = Xb - Xc;
var v1y = Yb - Yc;
var v2x = Xa - Xc;
var v2y = Ya - Yc;
return 180 * (Math.atan2(v1x, v1y) - Math.atan2(v2x, v2y)) / Math.PI
};
var left_center_offset = {
	left: 30,
	top: 82
},
right_center_offset = {
	left: 96,
	top: 80
},
radius = 10;
var setEyeOffset = function(event) {
	var offset = $(".eye_wrapper").offset();
	var x1 = offset.left + left_center_offset.left;
	var y1 = offset.top + left_center_offset.top;
	var x2 = offset.left + right_center_offset.left;
	var y2 = offset.top + right_center_offset.top;
	var n1 = event.clientX - x1;
	var m1 = -(event.clientY - y1);
	var k1 = Math.atan2(m1, n1);
	var n2 = event.clientX - x2;
	var m2 = -(event.clientY - y2);
	var k2 = Math.atan2(m2, n2);
	var x11 = (Math.cos(k1) * radius + x1).toFixed(0);
	var y11 = (( - Math.sin(k1) * radius) + y1).toFixed(0);
	$(".eye-left").offset({
		left: x11,
		top: y11
	});
	var x22 = (Math.cos(k2) * radius + x2).toFixed(0);
	var y22 = (( - Math.sin(k2) * radius) + y2).toFixed(0);
	$(".eye-right").offset({
		left: x22,
		top: y22
	})
};
$(window).mousemove(setEyeOffset);</script>
请使用火狐或Chrome测试，IE9以下版本看不到效果。
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3跟随鼠标的眼睛转动效果

分类

CSS3

描述

红薯大眼睛跟随鼠标转动效果，鼠标移在哪里，眼睛就跟向哪里，CSS3与jQuery结合的例子，很有趣的网页特效，期待大这学习分享，请使用火狐或Chrome测试，IE9以下版本看不到效果。