html+css3+jquery鼠标经过图标导航高亮旋转动画

来源：互联网 2023-03-16 23:54:29 版权归原作者所有，如有侵权，请联系我们

html css3 jquery鼠标经过图标导航高亮旋转动画

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

html css3 jquery鼠标经过图标导航高亮旋转动画

书写hmtl代码。

div class="mian">

div class="adframe">

div class="adleft">

div class="ico"> i class="fa fa-code">/i> /div>

span class="title"> 百度经验 /span> span class="depict"> 百度经验 /span>

div class="right" id="r">

div class="rbt"> span>百度经验/span> /div>

/div>

div class="adleft">

div class="ico"> i class="fa fa-cloud">/i> /div>

span class="title"> 百度经验 /span> span class="depict"> 百度经验 /span>

div class="right" id="r">

div class="rbt"> span>百度经验/span> /div>

/div>

div class="adleft">

div class="ico"> i class="fa fa-diamond">/i> /div>

span class="title"> 百度经验 /span> span class="depict"> 百度经验 /span>

div class="right" id="r">

div class="rbt"> span>百度经验/span> /div>

/div>

div class="adleft">

div class="ico"> i class="fa fa-weixin">/i> /div>

span class="title"> 百度经验 /span> span class="depict"> 百度经验 /span>

div class="right" id="r">

div class="rbt"> span>百度经验/span> /div>

/div>

div class="adright">/div>

/div>

html css3 jquery鼠标经过图标导航高亮旋转动画

2相关内容未经授权抓取自百度经验

书写css代码。

html{font-family: "Microsoft YaHei";}

body{background:url("img/bg.jpg");background-repeat:no-repeat;}

*{padding:0px;margin:0px;list-style: none;}

.mian{background-color: #ffffff;margin: 0 auto;height:260px;text-align: center;overflow: hidden;width: 884px;position: relative;top:200px;margin:0 auto;}

.mian span{display: block;margin-top: 10px;}

.adleft{width:180px;height: 260px;background: #fff;border-right: 1px solid #ececec;padding-top: 45px;padding-left:20px;padding-right: 20px;float:left;}

.ico{margin: 0 auto;}

.title{letter-spacing: 2px;margin-bottom: 10px;color: #7b7b7b;}

.ico{border-radius: 100px;display: block;border: 1px solid #eeeeee;width: 70px;height: 70px;background: #fff;}

.ico i{font-size: 40px;color: #8e8e8e;line-height: 70px;}

.depict{font-size: 13px;color: #9c9c9c;margin-bottom: 10px;border-top: 1px solid #eeeeee;padding-top: 5px;letter-spacing: 1px;}

.right span{display: block;width:90px;height: 30px;border-radius: 3px;line-height: 30px;background: #00b7ca;color:#eee; }

.right{margin-left: 40px;}

html css3 jquery鼠标经过图标导航高亮旋转动画

书写并添加js代码。

script src="js.js">/script>

script>

FeiChao.Organ();

/script>

html css3 jquery鼠标经过图标导航高亮旋转动画

书写并添加script src="js.js">/script>码。

script>

var FeiChao = window.FeiChao ||{};

FeiChao.Organ = function(){

document.onreadystatechange = Organadvert;

function Organadvert() {

var ad = document.getElementsByClassName("adleft");

var adlength = ad.length;

for(var i=0;iadlength;i )

{

var adid = ad[i].id = 'ad' i;

if(adid)

{

var nid = document.getElementById(adid);

nid.onmouseover=function () {

for (var i = 0; i ad.length; i ) {

var tfc = this.lastElementChild;

ad[i].style.background = '#eeeeee'

this.style.background = '#fff'

tfc.style.transform = 'rotate(360deg)';

tfc.style.transition = '1s';

fadein(tfc);

var tfl = this.firstElementChild;

tfl.style.transform = 'rotate(360deg)';

tfl.style.transition = '1s';

}

nid.onmouseout=function() {

for (var i = 0; i ad.length; i ) {

var tfc = this.lastElementChild;

tfc.display = 'none';

ad[i].style.background = '#fff'

tfc.style.transform = 'rotate(0deg)';

fadeout(tfc);

var tfl = this.firstElementChild;

tfl.style.transform = 'rotate(0deg)';

}

//fadein

function fadein(el)

{

el.style.opacity = 0;

el.style.display = "";

var last = new Date();

var tick = function()

{

el.style.opacity = el.style.opacity (new Date() - last);

last = new Date();

if( el.style.opacity >0)

{

(window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick,16));

}

function fadeout(el)

{

el.style.opacity = 1;

el.style.display = "";

var last = new Date();

var tick = function()

{

el.style.opacity = el.style.opacity (new Date() - last);

last = new Date();

if( el.style.opacity 1)

{

(window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick,16));

}

/script>

html css3 jquery鼠标经过图标导航高亮旋转动画

代码整体结构。

html css3 jquery鼠标经过图标导航高亮旋转动画

查看效果。

html css3 jquery鼠标经过图标导航高亮旋转动画

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML JQUERY

上一篇：HTML+jQuery+CSS3左侧固定子菜单3d展开动画下一篇：html+css3+jquery多级目录树型结构菜单

html+css3+jquery鼠标经过图标导航高亮旋转动画

工具/原料

方法/步骤

热门文章

标签列表