Html
    Css
    Js

    
                        
.community {
	padding-top:30px;
	width:100%;
	text-align:center;
}
.community .xian {
	background-color:#036EB7;
	height:10px;
	width:11%;
	margin:0 auto;
	margin-bottom:20px;
}
.community>h2 {
	font-size:36px;
	font-weight:700;
}
.relation {
	display:flex;
	background-color:#FFFFFF;
	box-shadow:0px 12px 62px 16px rgba(0,0,0,0.1);
	padding-bottom:10px;
	width:1100px;
	border-radius:12px;
	margin:40px auto;
}
.relation .brand {
	transition:transform 0.5s;
	padding:0px 10px 0px 10px;
}
.relation .brand:hover {
	transform:scale(1.2);
	background-color:#0080D9;
}
.relation .brand img {
	filter:invert(50%);
	transition:transform 0.5s;
	margin-top:20px;
	width:50px;
	height:50px;
}
.relation .brand:hover img {
	filter:invert(0%);
	transform:scale(1.4);
}
.relation .brand p {
	width:200px;
	padding-top:24px;
	color:#036EB7;
	font-size:24px;
	font-weight:600;
}
.relation .brand:hover p {
	color:#FAFAFA;
}
.relation .brand p:last-child {
	padding:20px 0px 20px 0px;
	color:#828282;
	font-size:16px;
	font-weight:400;
}
.relation .brand:hover p:last-child {
	color:#FAFAFA;
}
.x {
	margin-top:30px;
	width:4px;
	height:130px;
	border-left:1px solid #D8D8D8;
}

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

鼠标悬停滑动效果

更新时间:2020-12-18 22:35:17

简单实用  企业级

0