|
@@ -1,80 +1,91 @@
|
|
|
-#app{
|
|
|
+#app {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.home {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.main {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.slogan{
|
|
|
+
|
|
|
+.slogan {
|
|
|
// width: 900px;
|
|
|
// height:900px;
|
|
|
width: 46.8%;
|
|
|
- height:83%;
|
|
|
+ height: 83%;
|
|
|
opacity: 0;
|
|
|
position: absolute;
|
|
|
// left: 955px;
|
|
|
// top:180px;
|
|
|
left: 49.7%;
|
|
|
- top:18%;
|
|
|
- img{
|
|
|
+ top: 16.6vh;
|
|
|
+
|
|
|
+ img {
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
left: 0px;
|
|
|
top: 0px;
|
|
|
}
|
|
|
}
|
|
|
-.sloganActive{
|
|
|
+
|
|
|
+.sloganActive {
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
|
- .slogan11{
|
|
|
+ .slogan11 {
|
|
|
width: 165px;
|
|
|
top: 0px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan11Active 1s ease-in-out 5s forwards;
|
|
|
}
|
|
|
- .slogan12{
|
|
|
+
|
|
|
+ .slogan12 {
|
|
|
width: 165px;
|
|
|
top: 0px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan12Active 1.1s ease-in-out 5.1s forwards;
|
|
|
}
|
|
|
- .slogan21{
|
|
|
+
|
|
|
+ .slogan21 {
|
|
|
width: 140px;
|
|
|
top: 297px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan21Active 1s ease-in-out 5.2s forwards;
|
|
|
}
|
|
|
- .slogan22{
|
|
|
+
|
|
|
+ .slogan22 {
|
|
|
width: 140px;
|
|
|
top: 297px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan22Active 1.1s ease-in-out 5.25s forwards;
|
|
|
}
|
|
|
- .slogan23{
|
|
|
+
|
|
|
+ .slogan23 {
|
|
|
width: 140px;
|
|
|
top: 297px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan23Active 1.2s ease-in-out 5.3s forwards;
|
|
|
}
|
|
|
- .slogan24{
|
|
|
+
|
|
|
+ .slogan24 {
|
|
|
width: 140px;
|
|
|
top: 297px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan24Active 1.3s ease-in-out 5.4s forwards;
|
|
|
}
|
|
|
- .slogan25{
|
|
|
+
|
|
|
+ .slogan25 {
|
|
|
width: 140px;
|
|
|
top: 297px;
|
|
|
opacity: 0;
|
|
@@ -82,42 +93,47 @@
|
|
|
animation: slogan25Active 1.4s ease-in-out 5.5s forwards;
|
|
|
}
|
|
|
|
|
|
- .slogan31{
|
|
|
+ .slogan31 {
|
|
|
width: 140px;
|
|
|
top: 550px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan31Active 1s ease-in-out 5.6s forwards;
|
|
|
}
|
|
|
- .slogan32{
|
|
|
+
|
|
|
+ .slogan32 {
|
|
|
width: 140px;
|
|
|
top: 550px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan32Active 1.1s ease-in-out 5.65s forwards;
|
|
|
}
|
|
|
- .slogan33{
|
|
|
+
|
|
|
+ .slogan33 {
|
|
|
width: 140px;
|
|
|
top: 550px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan33Active 1.2s ease-in-out 5.7s forwards;
|
|
|
}
|
|
|
- .slogan34{
|
|
|
+
|
|
|
+ .slogan34 {
|
|
|
width: 140px;
|
|
|
top: 550px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan34Active 1.3s ease-in-out 5.75s forwards;
|
|
|
}
|
|
|
- .slogan35{
|
|
|
+
|
|
|
+ .slogan35 {
|
|
|
width: 140px;
|
|
|
top: 550px;
|
|
|
opacity: 0;
|
|
|
z-index: 1000px;
|
|
|
animation: slogan35Active 1.4s ease-in-out 5.85s forwards;
|
|
|
}
|
|
|
- .slogan36{
|
|
|
+
|
|
|
+ .slogan36 {
|
|
|
width: 140px;
|
|
|
top: 550px;
|
|
|
opacity: 0;
|
|
@@ -125,68 +141,82 @@
|
|
|
animation: slogan36Active 1.5s ease-in-out 6s forwards;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 1行
|
|
|
@keyframes slogan11Active {
|
|
|
0% {
|
|
|
- transform: translate(100px,0);
|
|
|
- }
|
|
|
+ transform: translate(100px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(0px,0);
|
|
|
+ transform: translate(0px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan12Active {
|
|
|
0% {
|
|
|
- transform: translate(600px,0);
|
|
|
- }
|
|
|
+ transform: translate(600px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(480px,0);
|
|
|
+ transform: translate(480px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 2行
|
|
|
@keyframes slogan21Active {
|
|
|
0% {
|
|
|
- transform: translate(100px,0);
|
|
|
- }
|
|
|
+ transform: translate(100px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(0px,0);
|
|
|
+ transform: translate(0px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan22Active {
|
|
|
0% {
|
|
|
- transform: translate(300px,0);
|
|
|
- }
|
|
|
+ transform: translate(300px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(120px,0);
|
|
|
+ transform: translate(120px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan23Active {
|
|
|
0% {
|
|
|
- transform: translate(500px,0);
|
|
|
- }
|
|
|
+ transform: translate(500px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(260px,0);
|
|
|
+ transform: translate(260px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan24Active {
|
|
|
0% {
|
|
|
- transform: translate(700px,0);
|
|
|
- }
|
|
|
+ transform: translate(700px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(378px,0);
|
|
|
+ transform: translate(378px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan25Active {
|
|
|
0% {
|
|
|
- transform: translate(900px,0);
|
|
|
- }
|
|
|
+ transform: translate(900px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(505px,0);
|
|
|
+ transform: translate(505px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
@@ -194,55 +224,66 @@
|
|
|
// 第3行
|
|
|
@keyframes slogan31Active {
|
|
|
0% {
|
|
|
- transform: translate(100px,0);
|
|
|
- }
|
|
|
+ transform: translate(100px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(5px,0);
|
|
|
+ transform: translate(5px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan32Active {
|
|
|
0% {
|
|
|
- transform: translate(300px,0);
|
|
|
- }
|
|
|
+ transform: translate(300px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(118px,0);
|
|
|
+ transform: translate(118px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan33Active {
|
|
|
0% {
|
|
|
- transform: translate(500px,0);
|
|
|
- }
|
|
|
+ transform: translate(500px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(240px,0);
|
|
|
+ transform: translate(240px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan34Active {
|
|
|
0% {
|
|
|
- transform: translate(700px,0);
|
|
|
- }
|
|
|
+ transform: translate(700px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(350px,0);
|
|
|
+ transform: translate(350px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan35Active {
|
|
|
0% {
|
|
|
- transform: translate(900px,0);
|
|
|
- }
|
|
|
+ transform: translate(900px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(465px,0);
|
|
|
+ transform: translate(465px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@keyframes slogan36Active {
|
|
|
0% {
|
|
|
- transform: translate(900px,0);
|
|
|
- }
|
|
|
+ transform: translate(900px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
100% {
|
|
|
- transform: translate(560px,0);
|
|
|
+ transform: translate(560px, 0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
-}
|
|
|
+}
|