Html
    Css
    Js

    
                        
.ourService .title_service {
	line-height:40px;
	font-size:28px;
	font-weight:500;
}
.ourService {
	display:flex;
	justify-content:space-between;
	margin:70px auto 80px;
	//  padding:0 365px;
	width:1050px;
}
.ourService .serviceBlock:hover .content_p {
	-webkit-transform:translateY(-50px);
	-moz-transform:translateY(-50px);
	-ms-transform:translateY(-50px);
	transform:translateY(-50px);
	opacity:1;
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition:-webkit-transform 0.4s,opacity 0.1s;
	-moz-transition:-moz-transform 0.4s,opacity 0.1s;
	transition:transform 0.4s,opacity 0.1s;
}
.ourService .line_top {
	height:3px;
	width:0;
	left:-110%;
	top:0;
}
.ourService .line {
	display:block;
	position:absolute;
	background:none;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
}
.ourService .serviceBlock:hover .line {
	background:#005ffb;
}
.ourService .serviceBlock:hover .line_top {
	width:100%;
	left:-2px;
}
.ourService .serviceBlock:hover img,.serviceBlock:hover .title_p {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
}
.ourService .img {
	width:50px;
	-webkit-transition:-webkit-transform 0.4s;
	-moz-transition:-moz-transform 0.4s;
	transition:transform 0.4s;
}
.ourService div {
	position:relative;
	overflow:hidden;
	height:235px;
	width:22%;
	padding:25px 30px;
	box-shadow:0px 0px 20px 0px rgba(2,38,135,0.09);
}
.ourService div img,.title_p {
	-webkit-transform:translateY(30px);
	-moz-transform:translateY(30px);
	-ms-transform:translateY(30px);
	transform:translateY(30px);
	transition:transform 0.4s,opacity 0.1s 0.3s;
}
.ourService div .title_p {
	font-size:18px;
	font-weight:600;
	line-height:30px;
}
.ourService div .distant {
	opacity:0;
	-webkit-transform:translateY(100%);
	-moz-transform:translateY(100%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
	-webkit-transition:-webkit-transform 0.4s,opacity 0.1s 0.3s;
	-moz-transition:-moz-transform 0.4s,opacity 0.1s 0.3s;
	transition:transform 0.4s,opacity 0.1s 0.3s;
}
.ourService div .content_p {
	line-height:20px;
	margin-top:10px;
	text-align:left;
	font-size:14px;
}

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

纯css hover图片划过遮罩层动画效果(原创)

更新时间:2023-04-11 20:50:05

纯css hover图片划过遮罩层动画效果

0