Html
    Css
    Js


@charset "utf-8";
	.one {
	background:#f19f0f;
	padding:50px 0px;
	width:100%;
	margin:0 auto;
	text-align:center;
}
.one .tags {
	display:inline-block;
	position:relative;
	font-size:20px;
	color:#fff;
	margin:40px 20px;
	width:120px;
	height:40px
}
.one .tags .line {
	opacity:0;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:4px;
	background:#fff;
	transition:all 0.5s  linear;
}
.tags:hover .line {
	opacity:1;
	bottom:8px
}
.two {
	background:#3fa46a;
	padding:50px 0px;
	width:100%;
	margin:0 auto;
	text-align:center;
}
.two .a {
	display:inline-block;
	position:relative;
	font-size:20px;
	color:#fff;
	margin:40px 20px;
	width:120px;
	height:40px
}
.two .a .line {
	opacity:0;
	position:absolute;
	top:30px;
	left:0;
	width:100%;
	height:4px;
	background:#fff;
	transition:all 0.5s  linear;
}
.a:hover .line {
	opacity:1;
	top:40px
}
.three {
	background:#fff;
	padding:50px 0px;
	width:100%;
	margin:0 auto;
	text-align:center;
}
.three .b {
	display:inline-block;
	position:relative;
	font-size:20px;
	color:#566473;
	margin:40px 20px;
	width:120px;
	height:40px
}
.three .b .top {
	opacity:0;
	position:absolute;
	top:30px;
	left:0;
	width:100%;
	height:4px;
	background:#566473;
	transition:all 0.5s  linear;
}
.three .b .bottom {
	position:absolute;
	bottom:0;
	left:0px;
	height:4px;
	width:120px;
	transform:scale(0.8);
	background:#566473;
	transition:all 0.5s  linear;
}
.b:hover .top {
	opacity:1;
	top:-20px;
}
.b:hover .bottom {
	transform:scale(1)
}
.four {
	background:#566473;
	padding:50px 0px;
	width:100%;
	margin:0 auto;
	text-align:center;
}
.four .c {
	display:inline-block;
	position:relative;
	font-size:20px;
	color:#fff;
	margin:40px 20px;
	width:120px;
	height:40px
}
.four .c .left {
	position:absolute;
	top:-10px;
	left:-5px;
	width:100%;
	height:100%;
	border:4px solid #354856;
}
.four .c .right {
	opacity:0;
	position:absolute;
	top:-30px;
	left:15px;
	width:100%;
	height:100%;
	border:4px solid #fff;
	transition:all 0.5s  linear;
}
.c:hover .right {
	opacity:1;
	top:-10px;
	left:-5px;
}
.five {
	background:#9e487f;
	padding:50px 0px;
	width:100%;
	margin:0 auto;
	text-align:center;
}
.five .d {
	display:inline-block;
	position:relative;
	font-size:20px;
	color:#fff;
	margin:40px 20px;
	width:120px;
	height:40px
}
.five .d .up {
	position:absolute;
	top:-20px;
	left:0;
	height:1px;
	width:100%;
	background:#fff;
	transition:all 0.5s  linear
}
.five .d .down {
	opacity:0;
	padding-bottom:20px;
	text-align:center;
	color:black;
	font-size:12px;
	position:absolute;
	top:10px;
	left:0;
	width:100%;
	border-bottom:1px solid #fff;
	transition:all 0.5s  linear
}
.five .d:hover .up {
	height:6px;
}
.five .d:hover .down {
	opacity:1;
	top:40px;
}

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

文字鼠标经过效果

0