css3动画让元素绕着圆圈转动(css3动画过渡实现鼠标跟随导航效果)
类别:Web前端 浏览量:1804
时间:2022-03-30 00:39:22 css3动画让元素绕着圆圈转动
css3动画过渡实现鼠标跟随导航效果本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下:
鼠标跟随导航效果
效果知识点:html/css布局思维, li+css讲解,css3动画,盒子模型, 浮动与定位,鼠标事件。
html代码:
<li 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> <li class="box"></li>
css代码:
<style> *{ margin:0px; padding:0px; } html{ height:100%; } body{ width:100%; height:100%; background:url("images/wallpaper4.jpg" alt="css3动画让元素绕着圆圈转动(css3动画过渡实现鼠标跟随导航效果)" border="0" />
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- dedecms增加导航内容(织梦DEDECMS中让近三天发布的文章显示红色日期或加上new字或小图片的方法)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- layui导航栏(使用layui实现左侧菜单栏及动态操作tab项的方法)
- jquery导航栏动画(jQuery实现带展开动画的导航栏效果)
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- 导航app开发的技术(AmazeUI导航的示例代码)
- dedecms增加导航内容(dedecms中将系统的data目录迁移到web以外目录)
- uni-app搜索框源代码(如何用uni-app实现顶部导航栏显示按钮和搜索框)
- css3导航菜单(CSS3实现的侧滑菜单)
- dede栏目标签怎么调用(dedecms首页导航菜单二级栏目调用标签实例)
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- 织梦cms内容模型管理详解(织梦CMS系统TAG标签页面包屑导航的调用方法)
- jQuery 右侧浮动导航菜单
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- javascript弹出菜单(Javascript实现简易导航栏)
- 自制cssdiv导航栏(css利用transform skewX制作平行四边形导航菜单)
- 粗盐是什么 粗盐的功效与作用(粗盐的功效与作用)
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
- 心理学 四个金蟾,哪个最招财 测你今生的运势有多棒(心理学四个金蟾)
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
热门推荐
- border和background区别(css中background-origin属性的使用解析)
- zabbix怎么监控数据库(使用zabbix监控oracle表空间的操作流程)
- 云服务器如何搭建iis(阿里云云服务器Windows 2008下IIS添加网站绑定域名图文教程)
- docker怎么做数据(Docker数据卷常用操作代码实例)
- dedecms中的有些功能如何修改(DedeCms参考手册、函数及文件大全)
- LINQ TO SQL 中join
- pandas画布设置数据标签(pandas dataframe添加表格框线输出的方法)
- 怎么查看云服务器的配置(云服务器配置参数如何选择)
- 怎么用腾讯云主机搭建网站(用云主机怎么搭建网站?云主机建网站完整流程)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9