body {
height: 100vh;
overflow: hidden;
background: lightskyblue;
}
/Облако/
.cloud {
position: relative;
margin: 0 auto;
margin-top: 50px;
margin-right: 0;
width: 300px;
height: 100px;
}
.cloud>div:nth-child(1),
.cloud>div:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100px;
border-radius: 100px;
background: white;
animation: 6s infinite linear ani0;
}
.cloud>div:nth-child(1):before,
.cloud>div:nth-child(1):after,
.cloud>div:nth-child(2):before,
.cloud>div:nth-child(2):after {
content: '';
position: absolute;
top: 0;
width: 200px;
height: 100px;
border-radius: 200px;
background: white;
}
.cloud>div:nth-child(1):before {
right: 20px;
transform: rotate(-85deg);
animation: 3s infinite linear ani1;
}
.cloud>div:nth-child(1):after {
left: 20px;
transform: rotate(85deg);
animation: 3s infinite linear ani2;
}
.cloud>div:nth-child(2):before {
right: 20px;
width: 250px;
transform: rotate(-30deg);
animation: 3s infinite linear ani3;
}
.cloud>div:nth-child(2):after {
left: 20px;
width: 250px;
transform: rotate(30deg);
animation: 3s infinite linear ani4;
}
@keyframes ani0 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(2deg);
}
500% {
transform: rotate(0deg);
}
75% {
transform: rotate(-2deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes ani1 {
0% {
transform: rotate(-85deg);
}
50% {
transform: rotate(-75deg);
}
100% {
transform: rotate(-85deg);
}
}
@keyframes ani2 {
0% {
transform: rotate(85deg);
}
50% {
transform: rotate(75deg);
}
100% {
transform: rotate(85deg);
}
}
@keyframes ani3 {
0% {
transform: rotate(-30deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(-30deg);
}
}
@keyframes ani4 {
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(30deg);
}
}
.cloud>span {
display: block;
position: absolute;
top: 60%;
left: calc(50% - 50px);
width: 100px;
height: 40px;
border-bottom: 2px solid lightskyblue;
box-shadow: 0px -2px 2px 0px rgba(30, 60, 80, 0.2) inset;
border-radius: 100%;
}
.cloud>span:before,
.cloud>span:after {
content: "";
position: absolute;
top: -40px;
width: 20px;
height: 20px;
border-radius: 100%;
background: lightskyblue;
background: radial-gradient(cornflowerblue, cornflowerblue 2px, lightskyblue 6px, lightskyblue 100%);
animation: 6s infinite linear ani5;
}
.cloud>span:before {
left: -20px;
}
.cloud>span:after {
right: -20px;
}
@keyframes ani5 {
2% {
transform: scaleY(1);
}
4% {
transform: scaleY(0.1);
}
6% {
transform: scaleY(1);
}
8% {
transform: scaleY(0.1);
}
10% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}
/Солнце/
.sun {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 100px/100px 100px 100px 100px;
box-shadow: 0px 0px 20px yellow;
animation: sun 30s linear infinite;
}
@keyframes sun {
0% {
border-radius: 100px/100px 100px 100px 100px;
}
2% {
border-radius: 50px/50px 50px 100px 100px;
}
4% {
border-radius: 100px/50px 50px 100px 100px;
}
6% {
border-radius: 100px/100px 50px 100px 100px;
}
8% {
border-radius: 100px/100px 100px 100px 100px;
}
10% {
border-radius: 50px/50px 50px 100px 100px;
}
12% {
border-radius: 100px/100px 100px 100px 100px;
}
18% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
.sun>div {
position: absolute;
top: -50%;
left: 50%;
height: 30px;
width: 8px;
background: yellow;
box-shadow: 0px 0px 20px yellow;
border-radius: 10px;
transform: translateX(-50%);
}
.sun>div:nth-child(2) {
top: -41%;
left: -2%;
transform: rotate(-30deg);
}
.sun>div:nth-child(3) {
top: -10%;
left: -30%;
transform: rotate(-60deg);
}
.sun>div:nth-child(4) {
top: 30%;
left: -40%;
transform: rotate(-90deg);
}
.sun>div:nth-child(5) {
top: 70%;
left: -30%;
transform: rotate(-120deg);
}
.sun>div:nth-child(6) {
top: auto;
bottom: -41%;
left: -2%;
transform: rotate(30deg);
}
.sun>div:nth-child(7) {
top: auto;
bottom: -50%;
left: 50%;
transform: translateX(-50%);
}
.sun>div:nth-child(8) {
top: auto;
bottom: -41%;
left: auto;
right: -2%;
transform: rotate(-30deg);
}
.sun>div:nth-child(9) {
top: auto;
bottom: -10%;
left: auto;
right: -30%;
transform: rotate(-60deg);
}
.sun>div:nth-child(10) {
top: auto;
bottom: 30%;
left: auto;
right: -40%;
transform: rotate(-90deg);
}
.sun>div:nth-child(11) {
top: -41%;
left: auto;
right: -2%;
transform: rotate(30deg);
}
.sun>div:nth-child(12) {
top: -10%;
right: -30%;
left: auto;
transform: rotate(60deg);
}
.sun>span {
display: block;
position: absolute;
top: 70%;
left: calc(50% - 5px);
width: 20px;
height: 6px;
border-bottom: 2px solid yellowgreen;
box-shadow: 0px -2px 4px 0px rgb(30 60 80 / 20%) inset;
border-radius: 100%;
background: linear-gradient( 45deg, transparent, transparent 6px, red);
}
.sun>span:before,
.sun>span:after {
content: "";
position: absolute;
top: -40px;
width: 14px;
height: 12px;
border-radius: 100%;
background: lightskyblue;
background: radial-gradient(green, green 1px, yellowgreen 3px, yellowgreen 100%);
animation: 30s infinite linear sun1;
}
@keyframes sun1 {
13.5% {
transform: scaleY(1);
}
13.8% {
transform: scaleY(0.1);
}
14.1% {
transform: scaleY(1);
}
14.4% {
transform: scaleY(0.1);
}
14.7% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}
.sun>span:before {
left: -12px;
}
.sun>span:after {
right: -12px;
}
