css3实现鼠标跟随导航效果 css动画过渡代码 - ag环亚娱乐
最新软件| 手机版| 软件专题 css3实现鼠标跟随导航效果 css动画过渡代码
首页 > 文章教程 > 网页教程 > CSS代码 > css3实现鼠标跟随导航效果 css动画过渡代码

css3实现鼠标跟随导航效果 css动画过渡代码

我要评论发布时间: 2018-02-09 19:31:48来源:ag环亚娱乐

在css的使用中应该会遇到这么特效,这次ag环亚娱乐小编收集了css3实现鼠标跟随导航效果 css动画过渡代码,下面我们一起来学习一下。

鼠标跟随导航效果

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

html代码:

  1. <div class="wrap"> 
  2.             <ul> 
  3.                 <li style="background-position:0px 0px; border-top:1px dotted #ccc;border-left:1px dotted #ccc;"></li> 
  4.                 <li style="background-position:-230px 0px; border-top:1px dotted #ccc"></li> 
  5.                 <li style="background-position:-460px 0px; border-top:1px dotted #ccc"></li> 
  6.                 <li style="background-position:-690px 0px; border-top:1px dotted #ccc"></li> 
  7.                 <li style="background-position:-920px 0px; border-top:1px dotted #ccc"></li> 
  8.                 <li style="background-position:-1150px 0px;border-left:1px dotted #ccc;"></li> 
  9.                 <li style="background-position:-1370px 0px"></li> 
  10.                 <li style="background-position:-1600px 0px"></li> 
  11.                 <li style="background-position:-1830px 0px"></li> 
  12.                 <li style="background-position:-2060px 0px"></li> 
  13.                 <li style="background-position:-2290px 0px;border-left:1px dotted #ccc;"></li> 
  14.                 <li style="background-position:-2520px 0px"></li> 
  15.                 <li style="background-position:-2750px 0px"></li> 
  16.                 <li style="background-position:-2980px 0px"></li> 
  17.                 <li style="background-position:-3210px 0px"></li> 
  18.             </ul> 
  19.             <div class="box"></div> 

css代码:

  1. <style> 
  2.     *{ 
  3.         word">margin:0px
  4.         padding:0px
  5.     } 
  6.     html{ 
  7.         height:100%
  8.     } 
  9.     body{ 
  10.         width:100%
  11.         height:100%
  12.         background:url("images/wallpaper4.jpg"); 
  13.         background-size:100% 100%
  14.         overflowhidden
  15.     } 
  16.     .wrap{ 
  17.         position:relative
  18.         width:1156px
  19.         height:450px
  20.         margin:50px auto
  21.     } 
  22.     .wrap ul li{ 
  23.         position:relative
  24.         z-index:10
  25.         width:230px
  26.         height:150px
  27.         float:left
  28.         list-style:none
  29.         border-right:1px dotted #ccc
  30.         border-bottom:1px dotted #ccc
  31.         background:url("images/clients.png"no-repeat
  32.         -webkit-transition:1s; 
  33.         -moz-transition:1s; 
  34.         -ms-transition:1s; 
  35.         -o-transition:1s; 
  36.         transition:1s; 
  37.     } 
  38.     .box{ 
  39.         position:absolute
  40.         left:0px
  41.         top:0px
  42.         z-index:2
  43.         width:230px
  44.         height:150px
  45.         background:rgba(0,0,0,.2); 
  46.         -webkit-transition:1s; 
  47.         -moz-transition:1s; 
  48.         -ms-transition:1s; 
  49.         -o-transition:1s; 
  50.         transition:1s; 
  51.     } 
  52. </style> 

javascript代码:

  1. <script> 
  2.         var oLi = document.getElementsByTagName("li"); 
  3.         var box = document.getElementsByClassName("box")[0]; 
  4.         for (var i = 0;i<oLi.length ;i++ ) 
  5.         { 
  6.             oLi[i].onmousemove = function(){ 
  7.                 var _left = this.offsetLeft; 
  8.                 var _top = this.offsetTop; 
  9.                 box.style.left = _left + "px"
  10.                 box.style.top = _top + "px"
  11.                 this.style.backgroundPositionY = "-150px"
  12.             } 
  13.             oLi[i].onmouseout = function(){ 
  14.                 this.style.backgroundPositionY = "0px"
  15.             } 
  16.         } 
  17.     </script> 

 

相关电脑软件

Camnetics Suite 2018中文破解版下载【附破解教程】 v13.05.2018最新版

Template Shaker v3.6最新版

TopStyle Pro 中文版(HTML5/CSS3开发辅助工具) V5.0.0.104汉化破解版

Css背景图合并工具 v4.0绿色免费版

css3ps for Adobe Photoshop CS5, CS6 and CC

Rapid CSS Editor 2018绿色版 v15.0中文版

PostCSS插件下载 v6.0.21官方版

CorelDRAW Graphics Suite 2017绿色精简破解版下载【附注册机】 v17.0.83免费版

css开发助手 v2017.3绿色版

凯蒂CSS雪碧图制作专家下载 v1.2.1最新版

  • 上一篇:第一页
  • 下一篇:暂无数据