Html
    Css
    Js
body {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
	color:white;
}
/* demo1 */
        .demo1 {
	display:flex;
}
.navItem {
	width:100px;
	height:40px;
	line-height:40px;
	background-color:#05c8eb;
	text-align:center;
	position:relative;
}
.navItem::before {
	content:'[';
}
.navItem::after {
	content:']';
}
.navItem::before,.navItem::after {
	display:inline-block;
	clear:both;
	opacity:0;
	transition:.3s;
	color:white;
}
.navItem:hover::before {
	transform:translateX(-10px);
	opacity:1;
}
.navItem:hover::after {
	transform:translateX(10px);
	opacity:1;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

导航悬浮特效

0