<div class="frame">
<div class="center">
<div class="circle">
<div class="sky"></div>
<div class="ground"></div>
<div class="pyramid"></div>
<div class="ufo"></div>
</div>
</div>
</div>
// Inspired by https://100dayscss.com/?dayIndex=2
// Variables ====================================
$pyramid: #e4cAb4;
$pyramid-shadow: desaturate(darken($pyramid, 15%), 30%);
$sand-light: #e7c99f;
$sand-dark: desaturate(darken($sand-light, 15%), 30%);
$sky-light: #c9d2dd;
$sky-dark: #99b5d0;
$sun: #f2f0ea;
$day-duration: 10s;
// Picture Styles ===============================
.circle {
position: relative;
overflow: hidden;
background: linear-gradient(0deg, $sky-light, $sky-dark);
width: 200px;
height: 200px;
border-radius: 50%;
&:before,
&:after {
content: '';
animation: ($day-duration/2) infinite alternate ease-in-out;
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
}
&:before {
animation-name: sunset;
background-color: grey;
background: linear-gradient(0deg, #b9665c, grey);
}
&:after {
// darken
animation-name: nightfall;
background-color: rgba(black, .6);
}
}
.pyramid {
position: absolute;
left: 0;
right: 0;
bottom: 33%;
width: 65%;
height: 33%;
margin: auto;
&:before,
&:after {
animation: $day-duration infinite ease-in-out;
animation-delay: -($day-duration * .05);
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
&:before {
// left side
animation-name: pyramid-left;
background-color: $pyramid;
clip-path: polygon(
0% 100%,
50% 0%,
60% 105%
);
}
&:after {
// right side
animation-name: pyramid-right;
background-color: $pyramid-shadow;
clip-path: polygon(
60% 105%,
50% 0%,
100% 105%
);
}
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 33%;
background-color: $sand-light;
background: linear-gradient(0deg, $sand-dark, $sand-light);
}
.sky {
animation: $day-duration infinite linear earth-turn;
position: absolute;
top: 15%;
bottom: -110%;
left: -60%;
right: -60%;
&:after {
// sun
content: '';
display: block;
margin: auto;
width: 10px;
height: 10px;
background-color: $sun;
box-shadow: 0px 0px 10px 5px rgba($sun, 0.5);
border-radius: 50%;
}
}
.ufo {
animation: ($day-duration * 2) infinite ease-in-out ufo-streak;
animation-delay: -($day-duration * .8);
position: absolute;
top: 20%;
left: 20%;
width: 5%;
height: 1%;
background-color: rgba(white, .8);
border-radius: 50%;
&:before {
// cockpit
content: '';
transform: scale(.5, 2);
transform-origin: bottom;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(white, .5);
}
}
// Animations ====================================
@keyframes earth-turn {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes sunset {
0% {
opacity: 0;
}
40%, 50% {
opacity: .8;
}
80%, 100% {
opacity: 0;
}
}
@keyframes nightfall {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pyramid-left {
0% {
background-color: $pyramid;
}
10% {
background-color: $pyramid-shadow;
}
100% {
background-color: $pyramid;
}
}
@keyframes pyramid-right {
0% {
background-color: $pyramid-shadow;
}
10% {
background-color: $pyramid;
}
100% {
background-color: $pyramid-shadow;
}
}
@keyframes ufo-streak {
0% {
transform: translate(-50px, -100px);
}
10% {
transform: translate(30px, 80px) rotate(-20deg);
}
15% {
transform: translate(25px, 60px);
}
20% {
transform: translate(120px, 70px) rotate(20deg);
}
25% {
transform: translate(300px, -100px) rotate(30deg);
}
30% {
transform: translate(700px, -200px) rotate(10deg);
}
35% {
transform: translate(700px, -200px) rotate(20deg);
}
40%, 100% {
transform: translate(700px, -200px) rotate(10deg);
}
}
// From 100 Days of CSS =========================
// use only the available space inside the 400x400 frame
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
max-width: 100%;
max-height: 100%;
margin-top: -200px;
margin-left: -200px;
overflow: hidden;
background: #222;
color: #fff;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.