当前位置:主页 > 下载 > 文章浏览

CSS3鼠标悬停上下文字切换滑动菜单

时间:2016-01-12 07:26来源:代码君点击数:

这个DEMO是袁程旭前几天写的,本来是想要直接在网上下载的,但那个网站需要积分才能下载这套源码。我既不想注册登录也不想做任务赚积分,就只好自己动手参考那个页面给完全仿了下来。

随着CSS3的普及,之前很多需要依靠 js 才能实现的导航栏特效,现在只用几行 css 代码就能轻松实现。今天我们来看一套基于CSS3的导航栏特效,鼠标悬停导航栏菜单时,上下文字切换滑动。

程序运行截图展示:

CSS3,特效

实现的原理其实也很简单,用 css 的 before 伪元素 content 属性,配合 css 代码对元素的定位和鼠标悬浮时 hover 属性的设置,就能轻松实现鼠标悬停导航栏菜单上下文字切换滑动效果了。

这个DEMO只有一个 index.html 文件,少量 css 代码通俗易懂,强烈建议大家下载学习。

【CSS3鼠标悬停上下文字切换滑动菜单】源码下载地址:

http://pan.baidu.com/s/1qWXUx6s

解压密码:daimajun

演示地址:http://daimajun.com/case/css-160112/index.html

草根站长月入过万的秘籍

来源:代码君(daimajun.com) |  欢迎分享本文,转载请注明出处!

作者:袁程旭 | 发布:2016-01-12

分类:下载

标签:网页特效  CSS3  

本文固定链接:http://daimajun.com/download/32.html

返回顶部