.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图片划过遮罩层动画效果