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实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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开发中常用的8个小技巧
2008/08/27 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
自学python的建议和周期预算
2019/01/30 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
编写strcpy函数
2014/06/24 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL