CSS3案例-滑动菜单

html

<div class="container">
	<ul class="nav-list clearfix">
		<li class="nav-item color1">
			<span class="icon color11"><ins class="fa fa-home"></ins></span>
			<span class="content">Home</span>
		</li>
		<li class="nav-item color2">
			<span class="icon color22"><ins class="fa fa-flask"></ins></span>
			<span class="content">Services</span>
		</li>
		<li class="nav-item color3">
			<span class="icon color33"><ins class="fa fa-pencil"></ins></span>
			<span class="content">Porffolio</span>
		</li>
		<li class="nav-item color4">
			<span class="icon color44"><ins class="fa fa-tag"></ins></span>
			<span class="content">Blog</span>
		</li>
	</ul>
</div>

css

@keyframes bg_scale {
	0% {transform: scale(1); opacity: 0;}
	25% {transform: scale(1.3); opacity: .05;}
	50% {transform: scale(1.6); opacity: .2;}
	75% {transform: scale(1.9); opacity: .05;}
	100% {transform: scale(2); opacity: 0;}
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
div {
	box-sizing: border-box;
}
html, body {
	background-color: #f0f0f0;
}
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.container {
	margin: 100px auto;
	width: 800px;
	height: 200px;
}
/*li元素设置为弹性盒子，并且浮动成一行*/
.nav-item {
	display: flex;
	flex-direction: column;
	/*设置flex-end的原因是上面的图标部分是绝对定位出来的*/
	justify-content: flex-end;
	align-items: center;
	position: relative;
	float: left;
	width: 200px;
	height: 200px;
	/*这里不设置box-sizing，外面的box-sizing就没作用上*/
	box-sizing: border-box;
	/*做最底下的边*/
	border: 1px solid transparent;
	box-shadow: 0 0 2px #000;
	transition: border-bottom-width, border-bottom-color, height .8s;
}
.nav-item:hover {
	height: 220px;
	border-bottom-width: 5px;
	border-bottom-color: #000;
	transition: border-bottom-width, border-bottom-color, height .8s;
}
.nav-item.color1 {
	background-color: #c36a28;
}
.nav-item.color2 {
	background-color: #dd963c;
}
.nav-item.color3 {
	background-color: #4290ba;
}
.nav-item.color4 {
	background-color: #326a9d;
}
.nav-item .icon {
	position: absolute;
	top: 20px;
	left: 60px;
	width: 80px;
	height: 80px;
	text-align: center;
	line-height: 80px;
	color: #fff;
	opacity: .5;
	border-radius: 50%;
}
/*模拟光晕特效*/
.nav-item .icon::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 50%;
	opacity: .2;
}
.nav-item:hover .icon::before {
	animation: bg_scale 1s forwards;
}
.nav-item .icon .fa {
	font-size: 40px;
	line-height: 80px;
}
.nav-item .content {
	display: block;
	width: 100%;
	height: 100px;
	text-align: center;
	font-size: 25px;
	line-height: 100px;
	color: #fff;
}