.anli .a1{ animation-name:fadeInUp; animation-duration:3s; animation-delay:0.5s; animation-fill-mode:both; } .anli .a2{ animation-name:fadeInUp; animation-duration:3s; animation-delay:0.8s; animation-fill-mode:both; } .anli .a3{ animation-name:fadeInUp; animation-duration:3s; animation-delay:1.1s; animation-fill-mode:both; } .anli { width: 100%; background-image: url(https://omo-oss-image.thefastimg.com/portal-saas/new2022081518310756506/cms/image/af9af3b5-7c58-44bb-9a8e-ca9e3ae1a533.jpg); background-repeat: no-repeat; background-position: center center; transition: all 0.8s ease; } .anli a{ width: calc(100% / 6); display: block; float: left; background: rgba(226,0,0,0); border-right: 1px solid rgba(255,255,255,0.15); transition: all 0.8s; text-align: left; color: #fff; text-decoration: none; overflow: hidden; position: relative; transition: all 0.5s; } .anli a:hover{ background: rgba(10,77,154,0.8); } .anli a .main{ width: 94%; height:170px; padding-left: 10%; left: 0%; top: 67%; position: absolute; -webkit-transform: translate(0%,-50%); -ms-transform: translate(0%,-50%); transform: translate(0%,-50%); transition: all 0.5s; } .anli a .main div{ width:100%; height:auto; float:left; } .anli a:hover .main{ top: 39%; } .anli a h2{ font-size: 30px; font-weight: bold; /* letter-spacing: 3px; */ } .anli a span { font-size: 14px; font-family: 'arial'; } .anli a p { font-size: 15px; font-weight: 100; line-height: 1.8em; margin-top: 23px; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .anli a img .anli_icon { float: left; margin-top: 25px; } .anli a img .anli_case { float: left; margin-top: 100px; opacity: 0; filter: alpha(opacity=0); transition: all 0.8s; } .anli a .anli_case img { float: left; margin-top: 100px; opacity: 0; filter: alpha(opacity=0); transition: all 0.8s; } .anli a .anli_case img:hover { } .anli a:hover .anli_case img{ margin-top: 20px; opacity: 1; filter: alpha(opacity=100); width: 100%; } .anli a:hover p{ font-weight: normal; } .anli a:hover img.anli_case{ margin-top: 20px; opacity: 1; filter: alpha(opacity=100); width: 100%; } .anli a b { font-size: 16px; font-weight: lighter; margin-top: 70px; width: auto; border: solid 1px #fff; padding: 1px 5px; float:left; opacity: 0; filter: alpha(opacity=0); transition: all 1.1s; } .anli a:hover b{ margin-top: 20px; opacity: 1; filter: alpha(opacity=100); } .anli,.anli a,#c_static_001_P_3940-1657868655566{ height:100vh; }