利用CSS3實現眼睛隨鼠標移動小貓特效



19 75 26



特效描述:利用CSS3實現 眼睛隨鼠標 移動小貓特效,利用CSS3實現眼睛隨鼠標移動小貓特效

代碼結構

1. HTML代碼

<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;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5表情動畫 html5表情動畫 h5光標動畫 html5光標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表