html炫酷的导航栏效果,纯CSS3创意导航菜单特效

这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。

使用方法

HTML结构

该导航菜单使用一个元素来包裹一组无序列表。

Home
Docs
Demos
中文

CSS样式

该导航菜单在鼠标滑过菜单项时，菜单项稍稍有些倾斜动画，并且在该菜单项的上下会有两条线条滑出。菜单项的倾斜动画是在菜单项被鼠标滑过时，使用transform属性来对超链接元素进行旋转和缩放。

li a {

display: block;

font-size: 20px;

text-align: center;

padding: 10px 15px;

}

li a:hover {

transform: rotate(5deg) scale(1.1);

}

菜单项的上下2条线条使用超链接元素的:before和:after伪元素来制作。它们开始时透明度为0，宽度为0，并使用transform属性将它们旋转和移动。

li a:before, li a:after {

opacity: 0;

border-top: 1px solid white;

content: '';

display: block;

position: relative;

z-index: -1;

margin: auto;

width: 0px;

}

li a:before {

top: 0px;

transform: rotate(120deg) translateY(-50%) translateX(-50%);

}

li a:after {

top: 5px;

transform: rotate(-60deg) translateY(-50%) translateX(-50%);

}

在鼠标滑过时，它们的透明度变为1，宽度设置为20像素，并采用ease效果的平滑过渡。

li a:hover:before, li a:hover:after{

transition: all 0.3s ease;

opacity: 1;

width: 20px;

}

关于作者

该导航菜单特效作者：進擊的燊。他的个人联系方式有：

html炫酷的导航栏效果,纯CSS3创意导航菜单特效相关推荐

css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构该下 ...
html5加载文字特效免费,纯CSS3创意loading文字特效
这是一款非常有创意的纯CSS3 loading加载文字动画特效.该loading文字特效中,字母O的内圆会不停的放大缩小,使用这个动画效果来提示用户当前的页面或任务正在加载中. 使用方法 HTML结构 ...
html翻牌动画效果,纯css3实现图片翻牌特效
大家先看下效果演示: 是不是非常不错,下面把实现代码分享给大家. 复制代码代码如下: css3 翻牌 *{ margin:0; padding:0;} ul,li{ list-style:none; ...
js检测鼠标是否在操作_原生JS趣味demo：炫酷头像鼠标追随效果的实现
我们常在一些网页中可以看到鼠标追随效果一个简单的图片.动画甚至一小段文字都可以作为鼠标跟随的载体之前咱们的直播课中老师也讲过相关的canvas追随粒子特效今天就让我们一起来用原生js ...
Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
西门子界面官方精美触摸屏+WINCC程序模板西门子官方触摸屏程序模板，炫酷的扁平式动画效果，脚本动画，自动生成二维码，可仿真，堪比智能手机，有精简，精致，wincc，无线面板等包含了所有西门子人机界
西门子界面官方精美触摸屏+WINCC程序模板西门子官方触摸屏程序模板,炫酷的扁平式动画效果,脚本动画,自动生成二维码,可仿真,堪比智能手机,有精简,精致,wincc,无线面板等包含了所有西门子人机界 ...

html炫酷的导航栏效果,纯CSS3创意导航菜单特效

html炫酷的导航栏效果,纯CSS3创意导航菜单特效相关推荐

最新文章

热门文章