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友情链接中的LI标签的方法)
- layui多级联动下拉框的实现(使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果)
- css3导航条推荐(使用CSS3制作倾斜导航条和毛玻璃效果)
- dede编码在哪里改(dede栏目页面包屑导航最后的分隔符大于号去掉方法)
- 织梦联动菜单的下拉代码(dede5.7 动态导航下拉菜单的实现代码)
- html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- 怎么用html做一个导航栏(html+css 实现简易导航栏功能)
- css3导航菜单(CSS3实现的侧滑菜单)
- dedecms增加导航内容(Dedecms搜索时 当然关键词和栏目名相同时 搜索结果为空的问题的解决方法)
- layui导航栏(使用layui实现左侧菜单栏及动态操作tab项的方法)
- uni-app搜索框源代码(如何用uni-app实现顶部导航栏显示按钮和搜索框)
- 织梦cms内容模型管理详解(织梦CMS系统TAG标签页面包屑导航的调用方法)
- jQuery 右侧浮动导航菜单
- javascript弹出菜单(Javascript实现简易导航栏)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
热门推荐
- ubuntu设置用户免密码(Ubuntu修改密码及密码复杂度策略设置方法)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- tomcat集群如何实现线程安全(如何通过LambdaProbe实现监控Tomcat)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- nginx反向代码解决跨域访问(nginx 解决跨域问题嵌入第三方页面)
- dedecms怎么加页面(dedecms导航判断当前选中样式的方法)
- JS中sort()和reverse()
- SQL Server中SET赋值和SELECT赋值
- sqlserver使用说明(SQL Server视图的讲解)
- 修改宝塔nginx端口(解决宝塔面板nginx/apache防火墙后无法启动)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9