【效果图】：

【html代码】：

	<div class="rowd">
						<ul class="fold_wrap">
							<li>
								<a href="#">
									<div class="pic_auto pic_auto1 trans"></div>
									<div class="adv_intro flex"
										style="background: none 0% 0% repeat scroll transparent;">
										<div class="tit">科研</div>
										<div class="txt">
											<i class="iconfont iconjiantou"></i>
										</div>
									</div>
									<div class="mask trans">
										<img class="imgW100" src="assets/images/index/007.png" lazy="loaded" />
										<span><img class="arrow-right" src="assets/images/index/arrow-rigth.png"
												lazy="loaded" />科研</span>
									</div>
									<div class="mask-hover trans">
										<img class="imgW100" src="assets/images/index/008.png" lazy="loaded" />
										<span>科研<img class="arrow-right" src="assets/images/index/arrow-rigth.png"
												lazy="loaded" /></span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="pic_auto pic_auto2 trans"></div>
									<div class="adv_intro flex"
										style="background: none 0% 0% repeat scroll transparent;">
										<div class="tit">平台</div>
										<div class="txt">
											<i class="iconfont iconjiantou"></i>
										</div>
									</div>
									<div class="mask trans">
										<img class="imgW100" src="assets/images/index/007.png" lazy="loaded" />
										<span><img class="arrow-right" src="assets/images/index/arrow-rigth.png"
												lazy="loaded" />平台</span>
									</div>
									<div class="mask-hover trans">
										<img class="imgW100" src="assets/images/index/008.png" lazy="loaded" />
										<span>平台<img class="arrow-right" src="assets/images/index/arrow-rigth.png"
												lazy="loaded" /></span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="pic_auto pic_auto3 trans"></div>
									<div class="adv_intro flex"
										style="background: none 0% 0% repeat scroll transparent;">

【css代码】：

.flex1 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	align-items: center;
}

.platform-nav {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 56px;
	font-size: 18px;

}

.platform-nav li {
	width: 160px;
	padding: 20px;
	text-align: center;
	/* color: #fff; */
	background-color: #fff;
}

.platform-nav li:after {
	opacity: 1;
}

.platform-con .active {
	color: #fff;
	font-size: 18px;
	background-color: #063680;
}

.platform-nav ul>li:hover,
.platform-nav ul>li.active {
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	background-color: #063680;
}

.platform-nav ul>li:hover a,
.platform-nav ul>li.active a {
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	background-color: #063680;
}