You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1044 lines
20 KiB
1044 lines
20 KiB
body {
|
|
background-color: #fffaf0;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
.container {
|
|
background-image: linear-gradient(to top, #fcf3d8 30%, #eaafc8, #654ea3);
|
|
background-image: -webkit-linear-gradient(to bottom, #fcf3d8 30%, #eaafc8, #654ea3);
|
|
background-color: #654ea3;
|
|
height: 450px;
|
|
width: 450px;
|
|
border-radius: 100%;
|
|
position: relative;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
top: 225px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mountain-range {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100px;
|
|
top: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(1) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 32px;
|
|
margin-left: -60%;
|
|
border-left: 183px solid transparent;
|
|
border-right: 183px solid transparent;
|
|
border-bottom: 91.5px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(2) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 27px;
|
|
margin-left: -60%;
|
|
border-left: 195px solid transparent;
|
|
border-right: 195px solid transparent;
|
|
border-bottom: 97.5px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(3) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 24px;
|
|
margin-left: -60%;
|
|
border-left: 198px solid transparent;
|
|
border-right: 198px solid transparent;
|
|
border-bottom: 99px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(4) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 35px;
|
|
margin-left: -60%;
|
|
border-left: 154px solid transparent;
|
|
border-right: 154px solid transparent;
|
|
border-bottom: 77px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(5) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 20px;
|
|
margin-left: -60%;
|
|
border-left: 150px solid transparent;
|
|
border-right: 150px solid transparent;
|
|
border-bottom: 75px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(6) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 33px;
|
|
margin-left: -60%;
|
|
border-left: 198px solid transparent;
|
|
border-right: 198px solid transparent;
|
|
border-bottom: 99px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(7) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 37px;
|
|
margin-left: -60%;
|
|
border-left: 152px solid transparent;
|
|
border-right: 152px solid transparent;
|
|
border-bottom: 76px solid #75bbff;
|
|
}
|
|
|
|
.mountain-range .mountain:nth-child(8) {
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 27px;
|
|
margin-left: -60%;
|
|
border-left: 166px solid transparent;
|
|
border-right: 166px solid transparent;
|
|
border-bottom: 83px solid #75bbff;
|
|
}
|
|
|
|
.forest {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100px;
|
|
top: 65%;
|
|
}
|
|
|
|
.forest .hill {
|
|
position: absolute;
|
|
background-color: #82d9a2;
|
|
}
|
|
|
|
.forest .hill:nth-child(1) {
|
|
width: 600px;
|
|
height: 300px;
|
|
top: -10px;
|
|
left: -150px;
|
|
border-top-left-radius: 300px 150px;
|
|
border-top-right-radius: 300px 150px;
|
|
border-bottom-left-radius: 300px 150px;
|
|
border-bottom-right-radius: 300px 150px;
|
|
box-shadow: inset 20px 30px 50px #2d79a0;
|
|
}
|
|
|
|
.forest .hill:nth-child(2) {
|
|
width: 500px;
|
|
height: 250px;
|
|
top: -5px;
|
|
left: 100px;
|
|
border-top-left-radius: 250px 125px;
|
|
border-top-right-radius: 250px 125px;
|
|
border-bottom-left-radius: 250px 125px;
|
|
border-bottom-right-radius: 250px 125px;
|
|
box-shadow: inset 20px 30px 50px #2d79a0;
|
|
}
|
|
|
|
.forest .hill:nth-child(3) {
|
|
width: 500px;
|
|
height: 250px;
|
|
top: 17px;
|
|
left: -180px;
|
|
border-top-left-radius: 250px 125px;
|
|
border-top-right-radius: 250px 125px;
|
|
border-bottom-left-radius: 250px 125px;
|
|
border-bottom-right-radius: 250px 125px;
|
|
box-shadow: inset 20px 30px 50px #2d79a0;
|
|
}
|
|
|
|
.grass {
|
|
position: absolute;
|
|
width: 600px;
|
|
height: 300px;
|
|
border-radius: 300px / 150px;
|
|
top: 75%;
|
|
left: -100px;
|
|
background: #82d9a2;
|
|
box-shadow: inset 20px 30px 60px #2d79a0;
|
|
}
|
|
|
|
.pokemon {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 110px;
|
|
left: calc(53% - 150px);
|
|
}
|
|
|
|
.poke {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
#bulbasaur:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 50px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 100%;
|
|
top: 50px;
|
|
left: 15px;
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
#bulbasaur .head {
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 45px;
|
|
background-color: #00efd0;
|
|
border-top-left-radius: 50% 25px;
|
|
border-top-right-radius: 50% 25px;
|
|
border-bottom-left-radius: 18px;
|
|
border-bottom-right-radius: 18px;
|
|
left: 55px;
|
|
}
|
|
|
|
#bulbasaur .ear {
|
|
position: absolute;
|
|
height: 20px;
|
|
width: 23px;
|
|
background-color: #00efd0;
|
|
border-top-left-radius: 50px 90px;
|
|
border-top-right-radius: 50px 90px;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
#bulbasaur .ear:nth-child(1) {
|
|
transform: rotate(-45deg);
|
|
left: 52px;
|
|
top: -5px;
|
|
animation: rotateLeftBulbEar 2s alternate infinite;
|
|
}
|
|
|
|
#bulbasaur .ear:nth-child(2) {
|
|
transform: rotate(45deg);
|
|
left: 87px;
|
|
top: -5px;
|
|
animation: rotateRightBulbEar 2s alternate infinite;
|
|
}
|
|
|
|
#bulbasaur .bulba-body {
|
|
position: relative;
|
|
width: 65px;
|
|
height: 55px;
|
|
background-color: #00efd0;
|
|
left: 42px;
|
|
top: 20px;
|
|
border-radius: 100%;
|
|
box-shadow: inset 10px -10px #00dbbe;
|
|
animation: bodyBreathe 2s alternate infinite;
|
|
}
|
|
|
|
#bulbasaur .bulba-body:before,
|
|
#bulbasaur .bulba-body:after {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
|
|
#bulbasaur .bulba-body:before {
|
|
width: 10px;
|
|
height: 13px;
|
|
top: 33px;
|
|
left: 8px;
|
|
background-color: #00c6ac;
|
|
border-bottom-left-radius: 100%;
|
|
border-bottom-right-radius: 30%;
|
|
border-top-right-radius: 30%;
|
|
border-top-left-radius: 50%;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
#bulbasaur .bulba-body:after {
|
|
width: 8px;
|
|
height: 8px;
|
|
top: 30px;
|
|
left: 53px;
|
|
background-color: #00dbbe;
|
|
border-bottom-left-radius: 100%;
|
|
border-bottom-right-radius: 30%;
|
|
border-top-right-radius: 30%;
|
|
border-top-left-radius: 50%;
|
|
transform: rotate(65deg);
|
|
}
|
|
|
|
#bulbasaur .leg {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 40px;
|
|
background-color: #00efd0;
|
|
border-bottom-left-radius: 35px 110%;
|
|
border-bottom-right-radius: 35px 110%;
|
|
box-shadow: inset 10px -20px #00d6ba;
|
|
left: 90px;
|
|
top: 30px;
|
|
}
|
|
|
|
#bulbasaur .bulbs {
|
|
position: absolute;
|
|
top: -1px;
|
|
width: 55px;
|
|
height: 55px;
|
|
left: 50px;
|
|
transform-origin: center;
|
|
transform: rotate(45deg);
|
|
z-index: 3;
|
|
animation: bulbaBreathe 2s alternate infinite;
|
|
}
|
|
|
|
#bulbasaur .bulbs:before,
|
|
#bulbasaur .bulbs:after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 45px;
|
|
width: 45px;
|
|
border-radius: 0 50% 50% 50%;
|
|
}
|
|
|
|
#bulbasaur .bulbs:before {
|
|
transform: translate(-5px, 10px) rotate(7deg);
|
|
background-color: #007061;
|
|
}
|
|
|
|
#bulbasaur .bulbs:after {
|
|
transform: translate(10px, -5px) rotate(-7deg);
|
|
background-color: #008a78;
|
|
}
|
|
|
|
#bulbasaur .bulb {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 2px;
|
|
left: 3px;
|
|
width: 90%;
|
|
height: 90%;
|
|
border-radius: 0 50% 100% 50%;
|
|
background-color: #00a38e;
|
|
z-index: 4;
|
|
box-shadow: inset 1px -5px #009480;
|
|
}
|
|
|
|
#pikachu {
|
|
left: -.1em;
|
|
}
|
|
|
|
#pikachu:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 80px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 100%;
|
|
top: 50px;
|
|
left: 115px;
|
|
transform: rotate(40deg);
|
|
}
|
|
|
|
#pikachu .ear {
|
|
position: absolute;
|
|
height: 40px;
|
|
width: 18px;
|
|
background-color: #fff069;
|
|
border-top-left-radius: 60px 150px;
|
|
border-top-right-radius: 60px 150px;
|
|
transform-origin: center bottom;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#pikachu .ear:nth-child(1) {
|
|
transform: rotate(-35deg);
|
|
left: 125px;
|
|
top: -35px;
|
|
animation: rotateLeftEar 1s alternate infinite;
|
|
}
|
|
|
|
#pikachu .ear:nth-child(1):after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: #444;
|
|
width: 150%;
|
|
height: 15px;
|
|
left: -8px;
|
|
transform: rotate(-30deg);
|
|
}
|
|
|
|
#pikachu .ear:nth-child(2) {
|
|
transform: rotate(50deg);
|
|
left: 157px;
|
|
top: -30px;
|
|
animation: rotateRightEar 1s alternate infinite;
|
|
}
|
|
|
|
#pikachu .ear:nth-child(2):after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: #444;
|
|
width: 150%;
|
|
height: 15px;
|
|
left: 2px;
|
|
transform: rotate(30deg);
|
|
}
|
|
|
|
#pikachu .hand {
|
|
position: absolute;
|
|
height: 38px;
|
|
width: 15px;
|
|
background-color: #fff069;
|
|
border-top-left-radius: 60px 150px;
|
|
border-top-right-radius: 60px 150px;
|
|
transform-origin: center bottom;
|
|
left: 123px;
|
|
top: 5px;
|
|
z-index: 5;
|
|
transform: rotate(-40deg);
|
|
animation: pikaPat .7s alternate infinite;
|
|
}
|
|
|
|
#pikachu .head {
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 45px;
|
|
background-color: #fff069;
|
|
border-top-left-radius: 50% 25px;
|
|
border-top-right-radius: 50% 25px;
|
|
border-bottom-left-radius: 18px;
|
|
border-bottom-right-radius: 18px;
|
|
left: 120px;
|
|
width: 60px;
|
|
height: 55px;
|
|
top: -12px;
|
|
}
|
|
|
|
#pikachu .pika-body {
|
|
position: absolute;
|
|
width: 55px;
|
|
height: 55px;
|
|
background-color: #fff069;
|
|
left: 122px;
|
|
top: 20px;
|
|
border-radius: 22px;
|
|
}
|
|
|
|
#pikachu .pika-body:before,
|
|
#pikachu .pika-body:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: #9c5200;
|
|
width: 70%;
|
|
height: 7px;
|
|
left: 13px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
#pikachu .pika-body:before {
|
|
top: 15px;
|
|
z-index: 2;
|
|
}
|
|
|
|
#pikachu .pika-body:after {
|
|
top: 30px;
|
|
}
|
|
|
|
#pikachu .pika-tail {
|
|
position: absolute;
|
|
height: 25px;
|
|
width: 16px;
|
|
background: #9c5200;
|
|
border-radius: 5px;
|
|
left: 150px;
|
|
top: 40px;
|
|
transform-origin: bottom center;
|
|
transform: rotate(55deg);
|
|
box-shadow: -2px 2px 1px rgba(68, 68, 68, 0.2);
|
|
z-index: 2;
|
|
animation: rotateTail 2s alternate infinite;
|
|
}
|
|
|
|
#pikachu .pika-tail:before,
|
|
#pikachu .pika-tail:after {
|
|
content: '';
|
|
transform-origin: bottom center;
|
|
position: absolute;
|
|
background-color: #fff069;
|
|
}
|
|
|
|
#pikachu .pika-tail:before {
|
|
height: 1.45rem;
|
|
width: 1.4rem;
|
|
top: -2rem;
|
|
left: 0.25rem;
|
|
transform: rotate(-90deg);
|
|
border: 1px solid #9c5200;
|
|
border-bottom-right-radius: 5px;
|
|
z-index: 4;
|
|
border-top: 1px solid #fff069;
|
|
}
|
|
|
|
#pikachu .pika-tail:after {
|
|
background: #fff069;
|
|
height: 3rem;
|
|
width: 2rem;
|
|
top: -2.8rem;
|
|
left: -2.5rem;
|
|
border-radius: 5px 5px 0 5px;
|
|
border: 1px solid #9c5200;
|
|
}
|
|
|
|
.moon {
|
|
position: absolute;
|
|
width: 75px;
|
|
height: 75px;
|
|
background: #FFEFBA;
|
|
background: -webkit-linear-gradient(135deg, #FFFFFF, #FFEFBA);
|
|
background: linear-gradient(135deg, #FFFFFF, #FFEFBA);
|
|
border: 5px solid #fffaf0;
|
|
top: 10%;
|
|
left: calc(50% - 45px);
|
|
padding: 0;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.moon li {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.moon li:nth-child(1) {
|
|
background: #ffe691;
|
|
background: -webkit-linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
|
|
background: linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
|
|
width: 20px;
|
|
height: 20px;
|
|
left: 5px;
|
|
top: 30px;
|
|
}
|
|
|
|
.moon li:nth-child(2) {
|
|
background: #ffe691;
|
|
background: -webkit-linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
|
|
background: linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
|
|
width: 35px;
|
|
height: 35px;
|
|
left: 35px;
|
|
top: 35px;
|
|
}
|
|
|
|
.moon li:nth-child(3) {
|
|
background: #ffe691;
|
|
background: -webkit-linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
|
|
background: linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
|
|
width: 25px;
|
|
height: 25px;
|
|
left: 25px;
|
|
top: 5px;
|
|
}
|
|
|
|
.sparkles {
|
|
position: absolute;
|
|
width: 120%;
|
|
height: 190px;
|
|
top: 30%;
|
|
left: -45px;
|
|
}
|
|
|
|
.sparkles .sparkle {
|
|
position: absolute;
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(1) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(2) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(3) {
|
|
background-color: #fffce6;
|
|
box-shadow: 0px 0px 10px #fffce6;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(4) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(5) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(6) {
|
|
background-color: #fffce6;
|
|
box-shadow: 0px 0px 10px #fffce6;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(7) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(8) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(9) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(10) {
|
|
background-color: #fffce6;
|
|
box-shadow: 0px 0px 10px #fffce6;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(11) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(12) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(13) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(14) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(15) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(16) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(17) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(18) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(19) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(20) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(21) {
|
|
background-color: #fffce6;
|
|
box-shadow: 0px 0px 10px #fffce6;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(22) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(23) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(24) {
|
|
background-color: #fffce6;
|
|
box-shadow: 0px 0px 10px #fffce6;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(25) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(26) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(27) {
|
|
background-color: #fffce6;
|
|
box-shadow: 0px 0px 10px #fffce6;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(28) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(29) {
|
|
background-color: #e9fbff;
|
|
box-shadow: 0px 0px 10px #e9fbff;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(30) {
|
|
background-color: #ffeefc;
|
|
box-shadow: 0px 0px 10px #ffeefc;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(31) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.sparkles .sparkle:nth-child(32) {
|
|
background-color: #f3ffe4;
|
|
box-shadow: 0px 0px 10px #f3ffe4;
|
|
}
|
|
|
|
.one {
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
@keyframes flyOne {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(270px, 75px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.one:nth-child(1) {
|
|
animation: flyOne 15s 0s infinite;
|
|
}
|
|
|
|
.one:nth-child(2) {
|
|
animation: flyOne 15s 6.44s infinite;
|
|
}
|
|
|
|
.one:nth-child(3) {
|
|
animation: flyOne 15s 12.88s infinite;
|
|
}
|
|
|
|
.one:nth-child(4) {
|
|
animation: flyOne 15s 19.32s infinite;
|
|
}
|
|
|
|
.two {
|
|
right: 0;
|
|
}
|
|
|
|
@keyframes flyTwo {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(-270px, 75px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.two:nth-child(5) {
|
|
animation: flyTwo 21s 2.7s infinite;
|
|
}
|
|
|
|
.two:nth-child(6) {
|
|
animation: flyTwo 21s 8s infinite;
|
|
}
|
|
|
|
.two:nth-child(7) {
|
|
animation: flyTwo 21s 13.3s infinite;
|
|
}
|
|
|
|
.two:nth-child(8) {
|
|
animation: flyTwo 21s 18.6s infinite;
|
|
}
|
|
|
|
.three {
|
|
left: 0;
|
|
top: 100%;
|
|
}
|
|
|
|
@keyframes flyThree {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(270px, -75px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.three:nth-child(9) {
|
|
animation: flyThree 17s 1.4s infinite;
|
|
}
|
|
|
|
.three:nth-child(10) {
|
|
animation: flyThree 17s 9.9s infinite;
|
|
}
|
|
|
|
.three:nth-child(11) {
|
|
animation: flyThree 17s 18.4s infinite;
|
|
}
|
|
|
|
.three:nth-child(12) {
|
|
animation: flyThree 17s 26.9s infinite;
|
|
}
|
|
|
|
.four {
|
|
right: 0;
|
|
top: 100%;
|
|
}
|
|
|
|
@keyframes flyFour {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(-270px, -75px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.four:nth-child(13) {
|
|
animation: flyFour 25s 5.8s infinite;
|
|
}
|
|
|
|
.four:nth-child(14) {
|
|
animation: flyFour 25s 10.4s infinite;
|
|
}
|
|
|
|
.four:nth-child(15) {
|
|
animation: flyFour 25s 15s infinite;
|
|
}
|
|
|
|
.four:nth-child(16) {
|
|
animation: flyFour 25s 19.6s infinite;
|
|
}
|
|
|
|
.five {
|
|
left: 0;
|
|
top: 50%;
|
|
}
|
|
|
|
@keyframes flyFive {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(270px, 0px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.five:nth-child(17) {
|
|
animation: flyFive 35s 8.7s infinite;
|
|
}
|
|
|
|
.five:nth-child(18) {
|
|
animation: flyFive 35s 14.4s infinite;
|
|
}
|
|
|
|
.five:nth-child(19) {
|
|
animation: flyFive 35s 20.1s infinite;
|
|
}
|
|
|
|
.five:nth-child(20) {
|
|
animation: flyFive 35s 25.8s infinite;
|
|
}
|
|
|
|
.six {
|
|
right: 0;
|
|
top: 50%;
|
|
}
|
|
|
|
@keyframes flySix {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(-270px, 0px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.six:nth-child(21) {
|
|
animation: flySix 23.5s 10.6s infinite;
|
|
}
|
|
|
|
.six:nth-child(22) {
|
|
animation: flySix 23.5s 15s infinite;
|
|
}
|
|
|
|
.six:nth-child(23) {
|
|
animation: flySix 23.5s 19.4s infinite;
|
|
}
|
|
|
|
.six:nth-child(24) {
|
|
animation: flySix 23.5s 23.8s infinite;
|
|
}
|
|
|
|
.seven {
|
|
left: 0;
|
|
top: 25%;
|
|
}
|
|
|
|
@keyframes flySeven {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(270px, 37px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.seven:nth-child(25) {
|
|
animation: flySeven 29s 5s infinite;
|
|
}
|
|
|
|
.seven:nth-child(26) {
|
|
animation: flySeven 29s 12.67s infinite;
|
|
}
|
|
|
|
.seven:nth-child(27) {
|
|
animation: flySeven 29s 20.34s infinite;
|
|
}
|
|
|
|
.seven:nth-child(28) {
|
|
animation: flySeven 29s 28.01s infinite;
|
|
}
|
|
|
|
.eight {
|
|
right: 0;
|
|
top: 25%;
|
|
}
|
|
|
|
@keyframes flyEight {
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(-270px, 37px) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.eight:nth-child(29) {
|
|
animation: flyEight 28.5s 1.6s infinite;
|
|
}
|
|
|
|
.eight:nth-child(30) {
|
|
animation: flyEight 28.5s 5.34s infinite;
|
|
}
|
|
|
|
.eight:nth-child(31) {
|
|
animation: flyEight 28.5s 9.08s infinite;
|
|
}
|
|
|
|
.eight:nth-child(32) {
|
|
animation: flyEight 28.5s 12.82s infinite;
|
|
}
|
|
|
|
@keyframes pikaPat {
|
|
from {
|
|
transform: rotate(-40deg);
|
|
}
|
|
to {
|
|
transform: rotate(-50deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateTail {
|
|
from {
|
|
transform: rotate(55deg);
|
|
}
|
|
to {
|
|
transform: rotate(65deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateLeftEar {
|
|
from {
|
|
transform: rotate(-35deg);
|
|
}
|
|
to {
|
|
transform: rotate(-40deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateRightEar {
|
|
from {
|
|
transform: rotate(50deg);
|
|
}
|
|
to {
|
|
transform: rotate(60deg);
|
|
}
|
|
}
|
|
|
|
@keyframes bulbaBreathe {
|
|
from {
|
|
transform: rotate(45deg) scale(1);
|
|
}
|
|
to {
|
|
transform: rotate(45deg) scale(1.01);
|
|
}
|
|
}
|
|
|
|
@keyframes bodyBreathe {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateLeftBulbEar {
|
|
from {
|
|
transform: rotate(-45deg);
|
|
}
|
|
to {
|
|
transform: rotate(-55deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateRightBulbEar {
|
|
from {
|
|
transform: rotate(45deg);
|
|
}
|
|
to {
|
|
transform: rotate(55deg);
|
|
}
|
|
}
|