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的@media来编写响应式的页面
Nov 01 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 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
介绍php设计模式中的工厂模式
2008/06/12 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php查看网页源代码的方法
2015/03/13 PHP
php如何获取文件的扩展名
2015/10/28 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
用Python写的图片蜘蛛人代码
2012/08/27 Python
详解Python中的日志模块logging
2015/06/19 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python如何爬取网页中的文字
2020/07/28 Python
python3排序的实例方法
2020/10/20 Python
python中_del_还原数据的方法
2020/12/09 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
亲属关系公证书
2014/04/08 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电