188 lines
3.0 KiB
CSS
188 lines
3.0 KiB
CSS
.biggest-cloud {
|
|
animation: move 40s linear infinite;
|
|
}
|
|
.pink-cloud-2 {
|
|
animation: move 40s 3s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
.pink-center-cloud {
|
|
animation: move 40s 20s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
transform: translate(30%);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
50% {
|
|
transform: translate(60%);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(100%);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
.pink-cloud-1 {
|
|
animation: move1 40s 20s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
.sun-cloud {
|
|
animation: move1 40s 15s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
.cloud-right {
|
|
animation: move1 45s 10s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
.cloud-center {
|
|
animation: move1 50s 20s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
.blue-cloud {
|
|
animation: move1 50s 20s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes move1 {
|
|
0% {
|
|
transform: translate(-30%);
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
transform: translate(0%);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: translate(30%);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: translate(60%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.sun {
|
|
animation: sunshine 10s ease-in infinite;
|
|
/* opacity: 0; */
|
|
}
|
|
|
|
@keyframes sunshine {
|
|
from {
|
|
filter: drop-shadow(0px 0px 1px #ffd249);
|
|
}
|
|
to {
|
|
filter: drop-shadow(0px 0px 10px #ffd249);
|
|
}
|
|
}
|
|
|
|
.leaf-on-earth-left-1 {
|
|
transform-origin: 120px 100px;
|
|
animation: wave1 4.5s 1s ease-in infinite;
|
|
}
|
|
|
|
.leaf-on-earth-left-2 {
|
|
transform-origin: 120px 100px;
|
|
animation: wave1 5s 1s ease-in infinite;
|
|
}
|
|
|
|
.leaf-on-earth-left-3 {
|
|
transform-origin: 120px 100px;
|
|
animation: wave1 5.5s 0.5s ease-in infinite;
|
|
}
|
|
|
|
.leaf-on-earth-right-1 {
|
|
transform-origin: 160px 100px;
|
|
animation: wave2 5s ease-in infinite;
|
|
}
|
|
.leaf-on-earth-right-2 {
|
|
transform-origin: 160px 100px;
|
|
animation: wave2 5.5s 0.5s ease-in infinite;
|
|
}
|
|
.leaf-on-earth-right-3 {
|
|
transform-origin: 160px 100px;
|
|
animation: wave2 4.5s 1s ease-in infinite;
|
|
}
|
|
|
|
.tree {
|
|
transform-origin: 160px 100px;
|
|
animation: wave 4.5s 1s ease-in infinite;
|
|
}
|
|
|
|
@keyframes wave1 {
|
|
0%,
|
|
100% {
|
|
transform: rotateX(20deg);
|
|
transform-origin: 120px 95px;
|
|
}
|
|
50% {
|
|
transform: rotateY(25deg);
|
|
transform-origin: 119px 90px;
|
|
}
|
|
}
|
|
|
|
@keyframes wave2 {
|
|
0%,
|
|
100% {
|
|
transform: rotateX(15deg);
|
|
transform-origin: 155px 95px;
|
|
}
|
|
50% {
|
|
transform: rotateY(20deg);
|
|
transform-origin: 150px 90px;
|
|
}
|
|
}
|
|
|
|
.sun-line {
|
|
transform-origin: 165px 53px;
|
|
filter: drop-shadow(0px 0px 1px #ffd249);
|
|
animation: shine 4s ease-in infinite;
|
|
}
|
|
|
|
@keyframes shine {
|
|
/* 0%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
} */
|
|
0%,
|
|
100% {
|
|
transform: scale(0);
|
|
filter: drop-shadow(0px 0px 1px #ffd249);
|
|
}
|
|
50%,
|
|
80%,
|
|
90% {
|
|
transform: scale(1.1);
|
|
filter: drop-shadow(0px 0px 10px #ffd249);
|
|
}
|
|
}
|
|
|
|
/*
|
|
0%, 100% { transform: rotateX(10deg) },
|
|
50% { transform: rotateY(5deg) } */
|
|
|
|
.mouth {
|
|
/* opacity: 1; */
|
|
|
|
animation: smile 5s linear infinite;
|
|
transform-origin: 80px 80px;
|
|
}
|
|
|
|
@keyframes smile {
|
|
0%,
|
|
100% {
|
|
transform: scale(0.7);
|
|
}
|
|
50% {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|