Commit c39dc7ee05df3bf56392614bd3730d67e2e9bdad
1 parent
b439919c
服务 add css3
Showing
4 changed files
with
82 additions
and
16 deletions
css/services.css
| ... | ... | @@ -68,6 +68,7 @@ |
| 68 | 68 | font-size:20px; |
| 69 | 69 | cursor: pointer; |
| 70 | 70 | height: 168px; |
| 71 | + position: relative; | |
| 71 | 72 | /*width: 133px;*/ |
| 72 | 73 | } |
| 73 | 74 | .services-soft-wrap li:nth-of-type(1) { |
| ... | ... | @@ -77,7 +78,7 @@ |
| 77 | 78 | .services-soft-wrap li:nth-of-type(1).active { |
| 78 | 79 | color: #3F9FFE; |
| 79 | 80 | padding-bottom: 22px; |
| 80 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 81 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 81 | 82 | background: url(../images/services_titico1_active.png) no-repeat center 0; |
| 82 | 83 | } |
| 83 | 84 | .services-soft-wrap li:nth-of-type(2) { |
| ... | ... | @@ -89,7 +90,7 @@ |
| 89 | 90 | .services-soft-wrap li:nth-of-type(2).active { |
| 90 | 91 | color: #3F9FFE; |
| 91 | 92 | padding-bottom: 22px; |
| 92 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 93 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 93 | 94 | background: url(../images/services_titico2_active.png) no-repeat center 0; |
| 94 | 95 | } |
| 95 | 96 | .services-soft-wrap li:nth-of-type(3) { |
| ... | ... | @@ -99,7 +100,7 @@ |
| 99 | 100 | .services-soft-wrap li:nth-of-type(3).active { |
| 100 | 101 | color: #3F9FFE; |
| 101 | 102 | padding-bottom: 22px; |
| 102 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 103 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 103 | 104 | background: url(../images/services_titico3_active.png) no-repeat center 0; |
| 104 | 105 | } |
| 105 | 106 | /*1------tab 右侧 cont*/ |
| ... | ... | @@ -156,6 +157,7 @@ |
| 156 | 157 | font-size:20px; |
| 157 | 158 | cursor: pointer; |
| 158 | 159 | height: 168px; |
| 160 | + position: relative; | |
| 159 | 161 | } |
| 160 | 162 | .services-park-wrap li:nth-of-type(1) { |
| 161 | 163 | padding-top: 114px; |
| ... | ... | @@ -164,7 +166,7 @@ |
| 164 | 166 | .services-park-wrap li:nth-of-type(1).active { |
| 165 | 167 | color: #3F9FFE; |
| 166 | 168 | padding-bottom: 22px; |
| 167 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 169 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 168 | 170 | background: url(../images/services_titico4_active.png) no-repeat center 0; |
| 169 | 171 | } |
| 170 | 172 | .services-park-wrap li:nth-of-type(2) { |
| ... | ... | @@ -176,7 +178,7 @@ |
| 176 | 178 | .services-park-wrap li:nth-of-type(2).active { |
| 177 | 179 | color: #3F9FFE; |
| 178 | 180 | padding-bottom: 22px; |
| 179 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 181 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 180 | 182 | background: url(../images/services_titico5_active.png) no-repeat center 0; |
| 181 | 183 | } |
| 182 | 184 | .services-park-wrap li:nth-of-type(3) { |
| ... | ... | @@ -186,7 +188,7 @@ |
| 186 | 188 | .services-park-wrap li:nth-of-type(3).active { |
| 187 | 189 | color: #3F9FFE; |
| 188 | 190 | padding-bottom: 22px; |
| 189 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 191 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 190 | 192 | background: url(../images/services_titico6_active.png) no-repeat center 0; |
| 191 | 193 | } |
| 192 | 194 | |
| ... | ... | @@ -222,6 +224,7 @@ |
| 222 | 224 | font-size:20px; |
| 223 | 225 | cursor: pointer; |
| 224 | 226 | height: 168px; |
| 227 | + position: relative; | |
| 225 | 228 | } |
| 226 | 229 | .services-user-wrap li:nth-of-type(1) { |
| 227 | 230 | padding-top: 114px; |
| ... | ... | @@ -231,7 +234,7 @@ |
| 231 | 234 | .services-user-wrap li:nth-of-type(1).active { |
| 232 | 235 | color: #3F9FFE; |
| 233 | 236 | padding-bottom: 22px; |
| 234 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 237 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 235 | 238 | background: url(../images/services_titico7_active.png) no-repeat center 0; |
| 236 | 239 | } |
| 237 | 240 | .services-user-wrap li:nth-of-type(2) { |
| ... | ... | @@ -242,7 +245,7 @@ |
| 242 | 245 | .services-user-wrap li:nth-of-type(2).active { |
| 243 | 246 | color: #3F9FFE; |
| 244 | 247 | padding-bottom: 22px; |
| 245 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 248 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 246 | 249 | background: url(../images/services_titico8_active.png) no-repeat center 0; |
| 247 | 250 | } |
| 248 | 251 | .services-user-wrap li:nth-of-type(3) { |
| ... | ... | @@ -252,7 +255,7 @@ |
| 252 | 255 | .services-user-wrap li:nth-of-type(3).active { |
| 253 | 256 | color: #3F9FFE; |
| 254 | 257 | padding-bottom: 22px; |
| 255 | - border-bottom: 2px solid rgba(63,159,254,1); | |
| 258 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ | |
| 256 | 259 | background: url(../images/services_titico9_active.png) no-repeat center 0; |
| 257 | 260 | } |
| 258 | 261 | /*footer sta*/ |
| ... | ... | @@ -306,3 +309,18 @@ |
| 306 | 309 | background: url("../images/services_footIco3.png") no-repeat; |
| 307 | 310 | /*background-size: ;*/ |
| 308 | 311 | } |
| 312 | +/*.ai-success-stories-list-bar{ | |
| 313 | + position: absolute; | |
| 314 | + left: 0; | |
| 315 | + bottom: 0px; | |
| 316 | + width: 50%; | |
| 317 | + height: 2px; | |
| 318 | + background: rgba(63,159,254,1); | |
| 319 | + transition:width .8s; | |
| 320 | + -webkit-transition:width .8s; | |
| 321 | +} | |
| 322 | +.ai-bar{ | |
| 323 | + width:100%; | |
| 324 | + transition:width .8s; | |
| 325 | + -webkit-transition:width .8s; | |
| 326 | +}*/ | ... | ... |
js/services.js
| ... | ... | @@ -2,23 +2,31 @@ |
| 2 | 2 | //集团 tab 切换 |
| 3 | 3 | $('#services-soft-wrap li').on('click',function () { |
| 4 | 4 | var _index = $(this).index(); |
| 5 | + | |
| 5 | 6 | $('#services-wrap-sass').css('background-image','url(images/services_saasIco'+(_index+1)+'.png)') |
| 6 | - $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | |
| 7 | + $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); | |
| 8 | + $('#services-soft-wrap li').children('div').addClass('displaynone'); | |
| 9 | + $('#services-soft-wrap li').eq(_index).children('div').removeClass('displaynone'); | |
| 10 | + // $('.ai-success-stories-list-bar').css('left',100*_index); | |
| 7 | 11 | $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') |
| 8 | 12 | }); |
| 9 | 13 | |
| 10 | 14 | //车场 tab 切换 |
| 11 | 15 | $('#services-park-wrap li').on('click',function () { |
| 12 | 16 | var _index = $(this).index(); |
| 13 | - $('#services_parkIco').css('background-image','url(images/services_parkIco'+(_index+1)+'.png)') | |
| 14 | - $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | |
| 15 | - $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | |
| 17 | + $('#services_parkIco').css('background-image','url(images/services_parkIco'+(_index+1)+'.png)'); | |
| 18 | + $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); | |
| 19 | + $('#services-park-wrap li').children('div').addClass('displaynone'); | |
| 20 | + $('#services-park-wrap li').eq(_index).children('div').removeClass('displaynone'); | |
| 21 | + $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); | |
| 16 | 22 | }); |
| 17 | 23 | |
| 18 | 24 | //车主 tab 切换 |
| 19 | 25 | $('#services-user-wrap li').on('click',function () { |
| 20 | 26 | var _index = $(this).index(); |
| 21 | - $('#services_userIco').css('background-image','url(images/services_userIco'+(_index+1)+'.png)') | |
| 22 | - $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | |
| 23 | - $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | |
| 27 | + $('#services_userIco').css('background-image','url(images/services_userIco'+(_index+1)+'.png)'); | |
| 28 | + $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); | |
| 29 | + $('#services-user-wrap li').children('div').addClass('displaynone'); | |
| 30 | + $('#services-user-wrap li').eq(_index).children('div').removeClass('displaynone'); | |
| 31 | + $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); | |
| 24 | 32 | }); | ... | ... |
services.html
| ... | ... | @@ -71,14 +71,18 @@ |
| 71 | 71 | <li class="text-center col-md-6 services-wrap-left-1" id="services-wrap-sass"></li> |
| 72 | 72 | <li class="text-center col-md-6 services-wrap-right-1"> |
| 73 | 73 | <ul class="services-soft-wrap" id="services-soft-wrap"> |
| 74 | + | |
| 74 | 75 | <li class="text-center float-left active"> |
| 75 | 76 | SAAS平台 |
| 77 | + <div class="ai-success-stories-list-bar"></div> | |
| 76 | 78 | </li> |
| 77 | 79 | <li class="text-center float-left"> |
| 78 | 80 | 监控中心 |
| 81 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 79 | 82 | </li> |
| 80 | 83 | <li class="text-center float-left"> |
| 81 | 84 | 数据互联 |
| 85 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 82 | 86 | </li> |
| 83 | 87 | </ul> |
| 84 | 88 | <ul class="services-section-wrap" id="services-section-wrap"> |
| ... | ... | @@ -123,12 +127,15 @@ |
| 123 | 127 | <ul class="services-park-wrap" id="services-park-wrap"> |
| 124 | 128 | <li class="text-center float-left active"> |
| 125 | 129 | 车场服务 |
| 130 | + <div class="ai-success-stories-list-bar"></div> | |
| 126 | 131 | </li> |
| 127 | 132 | <li class="text-center float-left"> |
| 128 | 133 | 云平台 |
| 134 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 129 | 135 | </li> |
| 130 | 136 | <li class="text-center float-left"> |
| 131 | 137 | 政府云 |
| 138 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 132 | 139 | </li> |
| 133 | 140 | </ul> |
| 134 | 141 | <ul class="services-section-park" id="services-section-park"> |
| ... | ... | @@ -181,12 +188,15 @@ |
| 181 | 188 | <ul class="services-user-wrap" id="services-user-wrap"> |
| 182 | 189 | <li class="text-center float-left active"> |
| 183 | 190 | 车主服务 |
| 191 | + <div class="ai-success-stories-list-bar"></div> | |
| 184 | 192 | </li> |
| 185 | 193 | <li class="text-center float-left"> |
| 186 | 194 | 移动APP |
| 195 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 187 | 196 | </li> |
| 188 | 197 | <li class="text-center float-left"> |
| 189 | 198 | 会员服务 |
| 199 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 190 | 200 | </li> |
| 191 | 201 | </ul> |
| 192 | 202 | <ul class="services-section-user" id="services-section-user"> | ... | ... |
style.css
| ... | ... | @@ -2609,3 +2609,33 @@ a:hover{ |
| 2609 | 2609 | } |
| 2610 | 2610 | } |
| 2611 | 2611 | |
| 2612 | +/*bordr css3 */ | |
| 2613 | +.ai-success-stories-list-bar { | |
| 2614 | + width:100%; | |
| 2615 | + height:2px; | |
| 2616 | + background:rgba(63,159,254,1); | |
| 2617 | + position:absolute; | |
| 2618 | + bottom: 0; | |
| 2619 | + animation:myfirst 0.3s; | |
| 2620 | + -moz-animation:myfirst 0.3s; /* Firefox */ | |
| 2621 | + -webkit-animation:myfirst 0.3s; /* Safari and Chrome */ | |
| 2622 | + -o-animation:myfirst 0.3s; /* Opera */ | |
| 2623 | +} | |
| 2624 | + | |
| 2625 | +@keyframes myfirst | |
| 2626 | +{ | |
| 2627 | + 0% {width:0%;} | |
| 2628 | + 25% {width:25%;} | |
| 2629 | + 50% {width:50%;} | |
| 2630 | + 75% {width:75%;} | |
| 2631 | + 100% {width:100%;} | |
| 2632 | +} | |
| 2633 | + | |
| 2634 | +@-webkit-keyframes myfirst /*Safari and Chrome*/ | |
| 2635 | +{ | |
| 2636 | + 0% {width:0%;} | |
| 2637 | + 25% {width:25%;} | |
| 2638 | + 50% {width:50%;} | |
| 2639 | + 75% {width:75%;} | |
| 2640 | + 100% {width:100%;} | |
| 2641 | +} | |
| 2612 | 2642 | \ No newline at end of file | ... | ... |