html/style.css

144 lines
2.4 KiB
CSS
Raw Normal View History

2021-12-02 23:33:04 +08:00
.main{
margin-top: 15%;
}
.st0{fill:#fff}
.st2{fill:#5d89af}
.st3{fill:#709abf}
.st4,.st6{
fill:#fff;
stroke:#b3dcdf;
stroke-miterlimit:10
}
.st6{
stroke:#5d89af;
stroke-width:2
}
.st7,.st8,.st9{
stroke:#709abf;
stroke-miterlimit:10
}
.st7{
stroke-width:5;
stroke-linecap:round;
fill:none
}
.st8,.st9{
fill:#fff
}
.st9{
fill:none
}
.st10{
}
#cloud1{
animation: cloud003 15s linear infinite;
}
#cloud2{
animation: cloud002 25s linear infinite;
}
#cloud3{
animation: cloud003 20s linear infinite;
}
#cloud4{
animation: float 4s linear infinite;
}
#cloud5{
animation: float 8s linear infinite;
}
#cloud7{
animation: float 5s linear infinite;
}
#tracks{
animation: slide 650ms linear infinite;
}
#bumps{
animation: land 10000ms linear infinite;
}
@keyframes jig {
0% { transform: translateY(0px); }
50% { transform: translateY(1px); }
100% { transform: translateY(0px); }
}
#car-layers{
animation: jig 0.35s linear infinite;
}
@keyframes land {
from { transform: translateX(0); }
to { transform: translateX(1000px); }
}
@keyframes slide {
from { transform: translateX(0px); }
to { transform: translateX(100px); }
}
/* @keyframes cloudFloat {
0% { transform: translateX(0) translateY(3px); }
100% { transform: translateX(1000px) translateY(0); }
} */
@keyframes cloud001 {
0% { transform: translateX(-1000px) translateY(3px); }
100% { transform: translateX(1000px) translateY(0); }
}
@keyframes cloud002 {
0% { transform: translateX(-1000px) translateY(3px); }
100% { transform: translateX(1000px) translateY(0); }
}
@keyframes cloud003 {
0% { transform: translateX(-1000px) translateY(3px); }
100% { transform: translateX(1000px) translateY(0); }
}
@keyframes float {
0% { transform: translateY(0px) translateX(0); }
50% { transform: translateY(8px) translateX(5px); }
100% { transform: translateY(0px) translateX(0); }
}
#bracefront, #braceback{
animation: braces 1s linear infinite;
}
@keyframes braces {
0% { transform: translateX(-2px); }
25% { transform: translateX(3px); }
50% { transform: translateX(-2px); }
75% { transform: translateX(3px); }
100% { transform: translateX(-2px); }
}
.jump {
text-align:center;
margin: auto;
width: 50%;
padding: 20px;
}
a {
padding: 30px 54px;
color: #5d89af;
font-size: 28px;
font-weight: bold;
border-radius: 4px;
background: #b3dcdf;
text-decoration: none;
}