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


Posted in HTML / CSS onFebruary 08, 2018

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

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

鼠标跟随导航效果

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

html代码:

<div class="wrap">
            <ul>
                <li style="background-position:0px 0px; border-top:1px dotted #ccc;border-left:1px dotted #ccc;"></li>
                <li style="background-position:-230px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:-460px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:-690px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:-920px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:-1150px 0px;border-left:1px dotted #ccc;"></li>
                <li style="background-position:-1370px 0px"></li>
                <li style="background-position:-1600px 0px"></li>
                <li style="background-position:-1830px 0px"></li>
                <li style="background-position:-2060px 0px"></li>
                <li style="background-position:-2290px 0px;border-left:1px dotted #ccc;"></li>
                <li style="background-position:-2520px 0px"></li>
                <li style="background-position:-2750px 0px"></li>
                <li style="background-position:-2980px 0px"></li>
                <li style="background-position:-3210px 0px"></li>
            </ul>
            <div class="box"></div>

css代码:

<style>
            *{
                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;
            }
        </style>

javascript代码:

<script>
            var oLi = document.getElementsByTagName("li");
            var box = document.getElementsByClassName("box")[0];
            for (var i = 0;i<oLi.length ;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";
                }
            }
        </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 #HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 #HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 #HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 #HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 #HTML / CSS
css3中的calc函数浅析
Jul 10 #HTML / CSS
详解css3 object-fit属性
Jul 27 #HTML / CSS
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
书法培训心得体会
2014/01/05 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
团队拓展活动总结
2014/08/27 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
医德医风学习心得体会
2016/01/25 职场文书