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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
php中文验证码实现示例分享
2014/01/12 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
php经典趣味算法实例代码
2020/01/21 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js 学习笔记(三)
2009/12/29 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
使用python编写监听端
2018/04/12 Python
python线程池threadpool使用篇
2018/04/27 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python装饰器代替set get方法实例
2019/12/19 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
保护地球的宣传语
2015/07/13 职场文书