|
|
|
@ -48,39 +48,50 @@ body {
|
|
|
|
|
animation: bg 3s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes truckMove { |
|
|
|
|
0% { |
|
|
|
|
transform: translateX(-250px); |
|
|
|
|
/* 卡车从屏幕左侧外部开始 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
50% { |
|
|
|
|
transform: translateX(calc(10px)); |
|
|
|
|
/* 卡车移出到屏幕右侧外部 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: translateX(150px); |
|
|
|
|
/* 卡车从左侧再次进入 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.truck { |
|
|
|
|
height: 110px; |
|
|
|
|
width: 150px; |
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
|
|
bottom: 48px; |
|
|
|
|
left: calc(50% + 10px); |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
animation: truckMove 2s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.truck>.truck-container { |
|
|
|
|
background: rgb(175, 189, 195); |
|
|
|
|
background: -moz-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
background: -moz-linear-gradient(-45deg, |
|
|
|
|
rgba(175, 189, 195, 1) 0%, |
|
|
|
|
rgba(175, 189, 195, 1) 50%, |
|
|
|
|
rgba(143, 163, 173, 1) 51%, |
|
|
|
|
rgba(143, 163, 173, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: -webkit-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
rgba(143, 163, 173, 1) 100%); |
|
|
|
|
background: -webkit-linear-gradient(-45deg, |
|
|
|
|
rgba(175, 189, 195, 1) 0%, |
|
|
|
|
rgba(175, 189, 195, 1) 50%, |
|
|
|
|
rgba(143, 163, 173, 1) 51%, |
|
|
|
|
rgba(143, 163, 173, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: linear-gradient( |
|
|
|
|
135deg, |
|
|
|
|
rgba(143, 163, 173, 1) 100%); |
|
|
|
|
background: linear-gradient(135deg, |
|
|
|
|
rgba(175, 189, 195, 1) 0%, |
|
|
|
|
rgba(175, 189, 195, 1) 50%, |
|
|
|
|
rgba(143, 163, 173, 1) 51%, |
|
|
|
|
rgba(143, 163, 173, 1) 100% |
|
|
|
|
); |
|
|
|
|
rgba(143, 163, 173, 1) 100%); |
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afbdc3', endColorstr='#8fa3ad', GradientType=1); |
|
|
|
|
height: 60px; |
|
|
|
|
width: 60px; |
|
|
|
@ -93,27 +104,21 @@ body {
|
|
|
|
|
|
|
|
|
|
.truck>.glases { |
|
|
|
|
background: rgb(40, 181, 245); |
|
|
|
|
background: -moz-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
background: -moz-linear-gradient(-45deg, |
|
|
|
|
rgba(40, 181, 245, 1) 0%, |
|
|
|
|
rgba(40, 181, 245, 1) 50%, |
|
|
|
|
rgba(2, 153, 227, 1) 52%, |
|
|
|
|
rgba(2, 153, 227, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: -webkit-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
rgba(2, 153, 227, 1) 100%); |
|
|
|
|
background: -webkit-linear-gradient(-45deg, |
|
|
|
|
rgba(40, 181, 245, 1) 0%, |
|
|
|
|
rgba(40, 181, 245, 1) 50%, |
|
|
|
|
rgba(2, 153, 227, 1) 52%, |
|
|
|
|
rgba(2, 153, 227, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: linear-gradient( |
|
|
|
|
135deg, |
|
|
|
|
rgba(2, 153, 227, 1) 100%); |
|
|
|
|
background: linear-gradient(135deg, |
|
|
|
|
rgba(40, 181, 245, 1) 0%, |
|
|
|
|
rgba(40, 181, 245, 1) 50%, |
|
|
|
|
rgba(2, 153, 227, 1) 52%, |
|
|
|
|
rgba(2, 153, 227, 1) 100% |
|
|
|
|
); |
|
|
|
|
rgba(2, 153, 227, 1) 100%); |
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28b5f5', endColorstr='#0299e3', GradientType=1); |
|
|
|
|
position: absolute; |
|
|
|
|
height: 25px; |
|
|
|
@ -125,6 +130,7 @@ body {
|
|
|
|
|
border-top-right-radius: 6px; |
|
|
|
|
animation: updown-half 0.4s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.truck>.glases:after { |
|
|
|
|
content: ''; |
|
|
|
|
display: block; |
|
|
|
@ -167,27 +173,21 @@ body {
|
|
|
|
|
content: ''; |
|
|
|
|
display: block; |
|
|
|
|
background: rgb(255, 255, 255); |
|
|
|
|
background: -moz-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
background: -moz-linear-gradient(-45deg, |
|
|
|
|
rgba(255, 255, 255, 1) 0%, |
|
|
|
|
rgba(241, 241, 241, 1) 50%, |
|
|
|
|
rgba(225, 225, 225, 1) 51%, |
|
|
|
|
rgba(246, 246, 246, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: -webkit-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
rgba(246, 246, 246, 1) 100%); |
|
|
|
|
background: -webkit-linear-gradient(-45deg, |
|
|
|
|
rgba(255, 255, 255, 1) 0%, |
|
|
|
|
rgba(241, 241, 241, 1) 50%, |
|
|
|
|
rgba(225, 225, 225, 1) 51%, |
|
|
|
|
rgba(246, 246, 246, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: linear-gradient( |
|
|
|
|
135deg, |
|
|
|
|
rgba(246, 246, 246, 1) 100%); |
|
|
|
|
background: linear-gradient(135deg, |
|
|
|
|
rgba(255, 255, 255, 1) 0%, |
|
|
|
|
rgba(241, 241, 241, 1) 50%, |
|
|
|
|
rgba(225, 225, 225, 1) 51%, |
|
|
|
|
rgba(246, 246, 246, 1) 100% |
|
|
|
|
); |
|
|
|
|
rgba(246, 246, 246, 1) 100%); |
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=1); |
|
|
|
|
height: 10px; |
|
|
|
|
width: 6px; |
|
|
|
@ -243,6 +243,7 @@ body {
|
|
|
|
|
border-bottom-right-radius: 4px; |
|
|
|
|
animation: updown 0.4s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.truck>.wheel-back { |
|
|
|
|
left: 20px; |
|
|
|
|
} |
|
|
|
@ -256,27 +257,21 @@ body {
|
|
|
|
|
border-radius: 100%; |
|
|
|
|
position: absolute; |
|
|
|
|
background: rgb(84, 110, 122); |
|
|
|
|
background: -moz-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
background: -moz-linear-gradient(-45deg, |
|
|
|
|
rgba(84, 110, 122, 1) 0%, |
|
|
|
|
rgba(84, 110, 122, 1) 49%, |
|
|
|
|
rgba(68, 90, 100, 1) 52%, |
|
|
|
|
rgba(68, 90, 100, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: -webkit-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
rgba(68, 90, 100, 1) 100%); |
|
|
|
|
background: -webkit-linear-gradient(-45deg, |
|
|
|
|
rgba(84, 110, 122, 1) 0%, |
|
|
|
|
rgba(84, 110, 122, 1) 49%, |
|
|
|
|
rgba(68, 90, 100, 1) 52%, |
|
|
|
|
rgba(68, 90, 100, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: linear-gradient( |
|
|
|
|
135deg, |
|
|
|
|
rgba(68, 90, 100, 1) 100%); |
|
|
|
|
background: linear-gradient(135deg, |
|
|
|
|
rgba(84, 110, 122, 1) 0%, |
|
|
|
|
rgba(84, 110, 122, 1) 49%, |
|
|
|
|
rgba(68, 90, 100, 1) 52%, |
|
|
|
|
rgba(68, 90, 100, 1) 100% |
|
|
|
|
); |
|
|
|
|
rgba(68, 90, 100, 1) 100%); |
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#546e7a', endColorstr='#445a64', GradientType=1); |
|
|
|
|
top: 80px; |
|
|
|
|
height: 22px; |
|
|
|
@ -292,27 +287,21 @@ body {
|
|
|
|
|
top: 5px; |
|
|
|
|
position: absolute; |
|
|
|
|
background: rgb(175, 189, 195); |
|
|
|
|
background: -moz-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
background: -moz-linear-gradient(-45deg, |
|
|
|
|
rgba(175, 189, 195, 1) 0%, |
|
|
|
|
rgba(175, 189, 195, 1) 50%, |
|
|
|
|
rgba(143, 163, 173, 1) 51%, |
|
|
|
|
rgba(143, 163, 173, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: -webkit-linear-gradient( |
|
|
|
|
-45deg, |
|
|
|
|
rgba(143, 163, 173, 1) 100%); |
|
|
|
|
background: -webkit-linear-gradient(-45deg, |
|
|
|
|
rgba(175, 189, 195, 1) 0%, |
|
|
|
|
rgba(175, 189, 195, 1) 50%, |
|
|
|
|
rgba(143, 163, 173, 1) 51%, |
|
|
|
|
rgba(143, 163, 173, 1) 100% |
|
|
|
|
); |
|
|
|
|
background: linear-gradient( |
|
|
|
|
135deg, |
|
|
|
|
rgba(143, 163, 173, 1) 100%); |
|
|
|
|
background: linear-gradient(135deg, |
|
|
|
|
rgba(175, 189, 195, 1) 0%, |
|
|
|
|
rgba(175, 189, 195, 1) 50%, |
|
|
|
|
rgba(143, 163, 173, 1) 51%, |
|
|
|
|
rgba(143, 163, 173, 1) 100% |
|
|
|
|
); |
|
|
|
|
rgba(143, 163, 173, 1) 100%); |
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afbdc3', endColorstr='#8fa3ad', GradientType=1); |
|
|
|
|
height: 12px; |
|
|
|
|
width: 12px; |
|
|
|
@ -322,6 +311,7 @@ body {
|
|
|
|
|
50% { |
|
|
|
|
top: 81px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: rotate(360deg); |
|
|
|
|
} |
|
|
|
@ -331,6 +321,7 @@ body {
|
|
|
|
|
30% { |
|
|
|
|
transform: rotate(1deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
50% { |
|
|
|
|
top: 11px; |
|
|
|
|
} |
|
|
|
@ -340,21 +331,6 @@ body {
|
|
|
|
|
transform: rotate(-1deg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@keyframes truckMove { |
|
|
|
|
0% { |
|
|
|
|
transform: translateX(-250px); /* 卡车从屏幕左侧外部开始 */ |
|
|
|
|
} |
|
|
|
|
50% { |
|
|
|
|
transform: translateX(calc(10px)); /* 卡车移出到屏幕右侧外部 */ |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: translateX(150px); /* 卡车从左侧再次进入 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.truck { |
|
|
|
|
animation: truckMove 1s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.truck>.smoke { |
|
|
|
@ -391,11 +367,13 @@ body {
|
|
|
|
|
left: 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes fade { |
|
|
|
|
30% { |
|
|
|
|
opacity: 0.3; |
|
|
|
|
left: 7px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
50% { |
|
|
|
|
opacity: 0.5; |
|
|
|
|
left: 6px; |
|
|
|
@ -416,6 +394,7 @@ body {
|
|
|
|
|
from { |
|
|
|
|
background-position-x: 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
to { |
|
|
|
|
background-position-x: -400px; |
|
|
|
|
} |
|
|
|
|