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制作平行四边形导航菜单)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
- 痴情男神 吴彦祖 与妻子恋爱8年,结婚10年,家庭幸福美满(痴情男神吴彦祖)
- 成功破圈,小牛电动SQi强势开 跨(小牛电动SQi强势开)
热门推荐
- 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