html++鼠标跟随动画,css3动画过渡实现鼠标跟随导航效果

本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果，分享给大家，具体如下：

鼠标跟随导航效果

效果知识点：html/css布局思维, div+css讲解，css3动画，盒子模型, 浮动与定位，鼠标事件。

html代码：

css代码：

*{

margin:0px;

padding:0px;

}

html{

height:100%;

}

body{

width:100%;

height:100%;

background:url("images/wallpaper4.jpg");

background-size:100% 100%;

overflow: hidden;

}

.wrap{

position:relative;

width:1156px;

height:450px;

margin:50px auto;

}

.wrap ul li{

position:relative;

z-index:10;

width:230px;

height:150px;

float:left;

list-style:none;

border-right:1px dotted #ccc;

border-bottom:1px dotted #ccc;

background:url("images/clients.png") no-repeat;

-webkit-transition:1s;

-moz-transition:1s;

-ms-transition:1s;

-o-transition:1s;

transition:1s;

}

.box{

position:absolute;

left:0px;

top:0px;

z-index:2;

width:230px;

height:150px;

background:rgba(0,0,0,.2);

-webkit-transition:1s;

-moz-transition:1s;

-ms-transition:1s;

-o-transition:1s;

transition:1s;

}

javascript代码：

var oLi = document.getElementsByTagName("li");

var box = document.getElementsByClassName("box")[0];

for (var i = 0;i

{

oLi[i].onmousemove = function(){

var _left = this.offsetLeft;

var _top = this.offsetTop;

box.style.left = _left + "px";

box.style.top = _top + "px";

this.style.backgroundPositionY = "-150px";

}

oLi[i].onmouseout = function(){

this.style.backgroundPositionY = "0px";

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。