.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;
}
更新时间:2023-04-11 20:50:05
纯css hover图片划过遮罩层动画效果