|
@@ -102,20 +102,24 @@
|
|
|
<!-- 管道 -->
|
|
|
<div class="guan1">
|
|
|
<img src="@/assets/steamImg/8.png" style="width:1065px;height:29px">
|
|
|
+ <img src="@/assets/steamImg/aniimg1.png" style="width:6px;height:12px" class="aniMove">
|
|
|
</div>
|
|
|
<!-- 管道 -->
|
|
|
<div class="guan2">
|
|
|
<img src="@/assets/steamImg/9.png" style="width:1174px;height:30px">
|
|
|
+ <img src="@/assets/steamImg/aniimg2.png" style="width:6px;height:12px" class="aniMove">
|
|
|
</div>
|
|
|
|
|
|
<!-- 管道 -->
|
|
|
<div class="guan3">
|
|
|
<img src="@/assets/steamImg/10.png" style="width:864px;height:30px">
|
|
|
+ <img src="@/assets/steamImg/aniimg3.png" style="width:6px;height:12px" class="aniMove">
|
|
|
</div>
|
|
|
|
|
|
<!-- 管道 -->
|
|
|
<div class="guan4">
|
|
|
<img src="@/assets/steamImg/11.png" style="width:1174px;height:30px">
|
|
|
+ <img src="@/assets/steamImg/aniimg4.png" style="width:6px;height:12px" class="aniMove">
|
|
|
</div>
|
|
|
|
|
|
|
|
@@ -291,62 +295,82 @@
|
|
|
<div class="jiantoulan pos-1">
|
|
|
<p class="text1">BFW</p>
|
|
|
<img src="@/assets/steamImg/jiantoulan1.png" style="width:75px;height:31px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan1">
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-2">
|
|
|
<img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan2">
|
|
|
<p class="num2">5.4</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-3">
|
|
|
<img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan3">
|
|
|
<p class="num2">264</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-4">
|
|
|
<img src="@/assets/steamImg/jiantoulan1.png" style="width:100px;height:31px">
|
|
|
- <p class="num2">105</p>
|
|
|
- <p class="name">SC</p>
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan4">
|
|
|
+ <p class="num2">105</p>
|
|
|
+ <p class="name">SC</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-5">
|
|
|
<img src="@/assets/steamImg/jiantoulan3.png" style="width:80px;height:347px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5-2">
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-6">
|
|
|
<img src="@/assets/steamImg/jiantoulan4.png" style="width:31px;height:150px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan6">
|
|
|
<p class="num2">33</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-7">
|
|
|
<img src="@/assets/steamImg/jiantoulan5.png" style="width:45px;height:251px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan7">
|
|
|
<p class="num2">1</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-8">
|
|
|
<img src="@/assets/steamImg/jiantoulan6.png" style="width:34px;height:89px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan8">
|
|
|
<p class="num2">2</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-9">
|
|
|
<img src="@/assets/steamImg/jiantoulan11.png" style="width:31px;height:75px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan9">
|
|
|
<p class="num2">5.4</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-10">
|
|
|
<img src="@/assets/steamImg/jiantoulan7.png" style="width:30px;height:46px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan10">
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-11">
|
|
|
<img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan11">
|
|
|
<p class="num2">0.37</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-12">
|
|
|
<img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan12">
|
|
|
<p class="num2">109</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-13">
|
|
|
<img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan13">
|
|
|
<p class="num2">109</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-14">
|
|
|
<img src="@/assets/steamImg/jiantoulan10.png" style="width:201px;height:64px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan14-1">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan14-2">
|
|
|
<p class="num2">87</p>
|
|
|
<p class="num3">28</p>
|
|
|
<p class="name">SC</p>
|
|
|
</div>
|
|
|
<div class="jiantoulan pos-15">
|
|
|
<img src="@/assets/steamImg/jiantoulan9.png" style="width:114px;height:127px">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-1">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-2">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-3">
|
|
|
+ <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-4">
|
|
|
<p class="num2">6</p>
|
|
|
<p class="num3">4.3</p>
|
|
|
<p class="num4">0/0</p>
|
|
@@ -412,6 +436,26 @@
|
|
|
position: absolute;
|
|
|
left: 20px;
|
|
|
}
|
|
|
+ .aniMovelan1{
|
|
|
+ -webkit-animation-name:aniMovelan1;
|
|
|
+ animation-name:aniMovelan1;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan1 {
|
|
|
+ 0% {left: 0; opacity: 0;}
|
|
|
+ 100% {left:40px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-2{
|
|
|
top: 130px;
|
|
@@ -422,6 +466,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan2{
|
|
|
+ -webkit-animation-name:aniMovelan2;
|
|
|
+ animation-name:aniMovelan2;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan2 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top:40px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-3{
|
|
|
top: 130px;
|
|
@@ -432,6 +498,27 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+ .aniMovelan3{
|
|
|
+ -webkit-animation-name:aniMovelan3;
|
|
|
+ animation-name:aniMovelan3;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan3 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top:40px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-4{
|
|
|
top: 80px;
|
|
@@ -448,10 +535,74 @@
|
|
|
color: #fff;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan4{
|
|
|
+ -webkit-animation-name:aniMovelan4;
|
|
|
+ animation-name:aniMovelan4;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan4 {
|
|
|
+ 0% {left: 0; opacity: 0;}
|
|
|
+ 100% {left:50px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-5{
|
|
|
top: 200px;
|
|
|
left: 52px;
|
|
|
+ .aniMovelan5{
|
|
|
+ -webkit-animation-name:aniMovelan5;
|
|
|
+ animation-name:aniMovelan5;
|
|
|
+ -webkit-animation-duration:3s;
|
|
|
+ animation-duration:3s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 72px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan5 {
|
|
|
+ 0% {left: 10px;top: 72px; opacity: 0;}
|
|
|
+ 25%{left: 47px;top: 72px; opacity: 1;transform: rotate(90deg);}
|
|
|
+ 100% {left: 47px; top:314px;opacity: 0;transform: rotate(90deg);}
|
|
|
+ }
|
|
|
+
|
|
|
+ .aniMovelan5-2{
|
|
|
+ -webkit-animation-name:aniMovelan5-2;
|
|
|
+ animation-name:aniMovelan5-2;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 72px;
|
|
|
+ left: 0px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan5-2 {
|
|
|
+ 0% {top: 72px; opacity: 0;}
|
|
|
+ 100% {top:0;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-6{
|
|
|
top: 400px;
|
|
@@ -462,6 +613,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan6{
|
|
|
+ -webkit-animation-name:aniMovelan6;
|
|
|
+ animation-name:aniMovelan6;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -1px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan6 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top:118px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-7{
|
|
|
top: 300px;
|
|
@@ -472,6 +645,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan7{
|
|
|
+ -webkit-animation-name:aniMovelan7;
|
|
|
+ animation-name:aniMovelan7;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -1px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan7 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top:215px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-8{
|
|
|
top: 300px;
|
|
@@ -482,6 +677,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan8{
|
|
|
+ -webkit-animation-name:aniMovelan8;
|
|
|
+ animation-name:aniMovelan8;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan8 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top:60px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-9{
|
|
|
top: 300px;
|
|
@@ -492,10 +709,53 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan9{
|
|
|
+ -webkit-animation-name:aniMovelan9;
|
|
|
+ animation-name:aniMovelan9;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan9 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top:40px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-10{
|
|
|
top: 510px;
|
|
|
left: 330px;
|
|
|
+ .aniMovelan10{
|
|
|
+ -webkit-animation-name:aniMovelan10;
|
|
|
+ animation-name:aniMovelan10;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 26px;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan10 {
|
|
|
+ 0% {top: 26px; opacity: 0;}
|
|
|
+ 100% {top: 0;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-11{
|
|
|
top: 500px;
|
|
@@ -506,6 +766,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan11{
|
|
|
+ -webkit-animation-name:aniMovelan11;
|
|
|
+ animation-name:aniMovelan11;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan11 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top: 26px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-12{
|
|
|
top: 340px;
|
|
@@ -516,6 +798,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan12{
|
|
|
+ -webkit-animation-name:aniMovelan12;
|
|
|
+ animation-name:aniMovelan12;
|
|
|
+ -webkit-animation-duration:1s;
|
|
|
+ animation-duration:1s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan12 {
|
|
|
+ 0% {top: 0; opacity: 0;}
|
|
|
+ 100% {top: 26px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-13{
|
|
|
top: 340px;
|
|
@@ -526,6 +830,28 @@
|
|
|
color: #3659ab;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan13{
|
|
|
+ -webkit-animation-name:aniMovelan13;
|
|
|
+ animation-name:aniMovelan13;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: -15px;
|
|
|
+ left: -2px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan13 {
|
|
|
+ 0% {top: -15px; opacity: 0;}
|
|
|
+ 100% {top: 26px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-14{
|
|
|
top: 300px;
|
|
@@ -548,6 +874,50 @@
|
|
|
color: #fff;
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan14-1{
|
|
|
+ -webkit-animation-name:aniMovelan14-1;
|
|
|
+ animation-name:aniMovelan14-1;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 34px;
|
|
|
+ left: 0px;
|
|
|
+ // transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan14-1 {
|
|
|
+ 0% {left:0 ; opacity: 0;}
|
|
|
+ 100% {left: 166px;opacity: 1;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .aniMovelan14-2{
|
|
|
+ -webkit-animation-name:aniMovelan14-2;
|
|
|
+ animation-name:aniMovelan14-2;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 80px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan14-2 {
|
|
|
+ 0% {top:10px ; opacity: 0;}
|
|
|
+ 100% {top: 30px;opacity: 1;}
|
|
|
+ }
|
|
|
}
|
|
|
&.pos-15{
|
|
|
top: 580px;
|
|
@@ -600,6 +970,91 @@
|
|
|
left: 110px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .aniMovelan15-1{
|
|
|
+ -webkit-animation-name:aniMovelan15-1;
|
|
|
+ animation-name:aniMovelan15-1;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: -12px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan15-1 {
|
|
|
+ 0% {left:0 ; opacity: 0;}
|
|
|
+ 100% {left: 80px;opacity: 1;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .aniMovelan15-2{
|
|
|
+ -webkit-animation-name:aniMovelan15-2;
|
|
|
+ animation-name:aniMovelan15-2;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 34px;
|
|
|
+ left: 15px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan15-2 {
|
|
|
+ 0% {left:15px ; opacity: 0;}
|
|
|
+ 100% {left: 80px;opacity: 1;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .aniMovelan15-3{
|
|
|
+ -webkit-animation-name:aniMovelan15-3;
|
|
|
+ animation-name:aniMovelan15-3;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 62px;
|
|
|
+ left: 15px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan15-3 {
|
|
|
+ 0% {left:15px ; opacity: 0;}
|
|
|
+ 100% {left: 80px;opacity: 1;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .aniMovelan15-4{
|
|
|
+ -webkit-animation-name:aniMovelan15-4;
|
|
|
+ animation-name:aniMovelan15-4;
|
|
|
+ -webkit-animation-duration:2s;
|
|
|
+ animation-duration:2s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 96px;
|
|
|
+ left: -12px;
|
|
|
+ }
|
|
|
+ @keyframes aniMovelan15-4 {
|
|
|
+ 0% {left:-12px ; opacity: 0;}
|
|
|
+ 100% {left: 80px;opacity: 1;}
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.kuang{
|
|
@@ -808,24 +1263,104 @@
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
left: 130px;
|
|
|
+ .aniMove{
|
|
|
+ -webkit-animation-name:aniMove;
|
|
|
+ animation-name:aniMove;
|
|
|
+ -webkit-animation-duration:10s;
|
|
|
+ animation-duration:10s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ @keyframes aniMove {
|
|
|
+ 0% {left: 10px; }
|
|
|
+ 100% {left: 1050px;}
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.guan2{
|
|
|
position: absolute;
|
|
|
top: 170px;
|
|
|
left: 20px;
|
|
|
+ .aniMove{
|
|
|
+ -webkit-animation-name:aniMove2;
|
|
|
+ animation-name:aniMove2;
|
|
|
+ -webkit-animation-duration:10s;
|
|
|
+ animation-duration:10s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ @keyframes aniMove2 {
|
|
|
+ 0% {left: 10px; }
|
|
|
+ 100% {left: 1160px;}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.guan3{
|
|
|
position: absolute;
|
|
|
top: 380px;
|
|
|
left: 330px;
|
|
|
+ .aniMove{
|
|
|
+ -webkit-animation-name:aniMove3;
|
|
|
+ animation-name:aniMove3;
|
|
|
+ -webkit-animation-duration:10s;
|
|
|
+ animation-duration:10s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ @keyframes aniMove3 {
|
|
|
+ 0% {left: 10px; }
|
|
|
+ 100% {left: 850px;}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.guan4{
|
|
|
position: absolute;
|
|
|
top: 550px;
|
|
|
left: 20px;
|
|
|
+ .aniMove{
|
|
|
+ -webkit-animation-name:aniMove4;
|
|
|
+ animation-name:aniMove4;
|
|
|
+ -webkit-animation-duration:10s;
|
|
|
+ animation-duration:10s;
|
|
|
+ -webkit-animation-fill-mode:both;
|
|
|
+ animation-fill-mode:both;
|
|
|
+ animation-iteration-count:infinite;
|
|
|
+ -webkit-animation-iteration-count:infinite;
|
|
|
+ font-style:inherit;
|
|
|
+ -webkit-animation-timing-function:linear;
|
|
|
+ animation-timing-function:linear;
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ @keyframes aniMove4 {
|
|
|
+ 0% {left: 10px; }
|
|
|
+ 100% {left: 1160px;}
|
|
|
+ }
|
|
|
}
|
|
|
.jiantou1{
|
|
|
position: absolute;
|
|
@@ -837,6 +1372,24 @@
|
|
|
left: -26px;
|
|
|
top: 20px;
|
|
|
}
|
|
|
+ // img{
|
|
|
+ // -webkit-animation-name:jiantou1-img;
|
|
|
+ // animation-name:jiantou1-img;
|
|
|
+ // -webkit-animation-duration:3s;
|
|
|
+ // animation-duration:3s;
|
|
|
+ // -webkit-animation-fill-mode:both;
|
|
|
+ // animation-fill-mode:both;
|
|
|
+ // animation-iteration-count:infinite;
|
|
|
+ // -webkit-animation-iteration-count:infinite;
|
|
|
+ // font-style:inherit;
|
|
|
+ // -webkit-animation-timing-function:linear;
|
|
|
+ // animation-timing-function:linear;
|
|
|
+ // }
|
|
|
+ // @keyframes jiantou1-img {
|
|
|
+ // 0% {opacity: 0;}
|
|
|
+ // 50% {opacity: 1;}
|
|
|
+ // 100% {opacity: 0;}
|
|
|
+ // }
|
|
|
}
|
|
|
.jiantou2{
|
|
|
position: absolute;
|
|
@@ -1164,4 +1717,5 @@
|
|
|
left: 770px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
</style>
|