手风琴css

标签：ul top height width css 手风琴 li servicea1

 

 html

   <div class="servicea1_list">                             <ul class="servicea1_ul servicea1_on">                                 <li>                                     <img class="img1" src="img/index/servicea1.jpg" alt="">                                     <div class="servicea1_icon">                                         <img class="service_icon1 service_icon2" src="img/index/servicea6.svg" alt="">                                         <p>电案</p>                                     </div>                                 </li>                                 <li class="servicea1_li">                                     <p>                                         管理优势。                                     </p>                                     <!-- platform-1.html -->                                     <a class="gcloamore gclo0amore2">                                         了解更多                                         <i class="icon-zarrow-right innolight">                                         </i>                                     </a>                                 </li>                             </ul>                             <ul class="servicea1_ul">                                 <li>                                     <img class="img1" src="img/index/servicea2.jpg" alt="">                                     <div class="servicea1_icon">                                         <img class="service_icon1 service_icon2" src="img/index/servicea7.svg" alt="">                                         <p>决方案</p>                                     </div>                                 </li>                                 <li class="servicea1_li">                                     <p>                                       大优势。                                     </p>                                     <a class="gcloamore gclo0amore2">                                         了解更多                                         <i class="icon-zarrow-right innolight"></i>                                     </a>                                 </li>                             </ul>                             <ul class="servicea1_ul">                                 <li>                                     <img class="img1" src="img/index/servicea3.jpg" alt="">                                     <div class="servicea1_icon">                                         <img class="service_icon1 service_icon2" src="img/index/servicea8.svg" alt="">                                         <p>决方案</p>                                     </div>                                 </li>                                 <li class="servicea1_li">                                     <p>                                         势。                                     </p>                                     <a class="gcloamore gclo0amore2">                                         了解更多                                         <i class="icon-zarrow-right innolight"></i>                                     </a>                                 </li>                             </ul>                             <ul class="servicea1_ul">                                 <li>                                     <img class="img1" src="img/index/servicea4.jpg" alt="">                                     <div class="servicea1_icon">                                         <img class="service_icon1 service_icon2" src="img/index/servicea9.svg" alt="">                                         <p>鑫</p>                                     </div>                                 </li>                                 <li class="servicea1_li">                                     <p>                                         方案。                                     </p>                                     <a class="gcloamore gclo0amore2">                                         了解更多                                         <i class="icon-zarrow-right innolight"></i>                                     </a>                                 </li>                             </ul>                         </div>   css .servicea1_list {     display: flex;     justify-content: space-between;     /* flex-wrap: wrap; */     margin-top: 60px; }
.servicea1_ul {     position: relative;     display: flex;     justify-content: space-between;     transition: all 0.5s ease;     overflow: hidden;     /* width: 22%; */     width: 268px;     margin-right: 12px;     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.servicea1_ul .img1 {     /* width: 268px; */     width: 100%;     height: 413px; }
.servicea1_li {     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);     background: #fff;     padding: 50px 35px;     width: 50%;     height: 100%;     visibility: hidden;     opacity: 0;     transition: all 0.3s ease;     position: absolute;     top: 0;     left: 50%; }
.servicea1_li a {     margin-top: 50px; }
.servicea1_li p {     width: 198px; }
.servicea1_on .servicea1_li {     visibility: visible;     opacity: 1;     transition: all 0.3s ease; }
.servicea1_on {     /* width: 30%; */     width: 536px; }
.servicea1_icon {     position: absolute;     top: 15%;     left: 15%; }
.servicea1_icon p {     color: #fff;     margin-top: 10px; }
.service_icon1 {     height: 46px; }
.service_icon2 {     height: 40px; }
.service_icon3 {     height: 45px; } js $('.servicea1_ul').mousemove(function () {     $(this).addClass('servicea1_on').siblings().removeClass('servicea1_on'); }) $('.servicea1_ul').click(function () {     $(this).addClass('servicea1_on').siblings().removeClass('servicea1_on'); })

标签：ul,top,height,width,css,手风琴,li,servicea1
From： https://www.cnblogs.com/yangcaicai/p/16895376.html