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 border旋转时的动画应用
Jan 22 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 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
德生1994机评
2021/03/02 无线电
使用GD库生成带阴影文字的图片
2015/03/27 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
python写入xml文件的方法
2015/05/08 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
团员个人的自我评价
2013/12/02 职场文书
内业资料员岗位职责
2014/01/04 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis