console
<div class='wrap'>
<div class='lake'>
<div class='ripple'></div>
</div>
<div class='mountain'>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
</div>
<div class='mountain'>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
</div>
<div class='mountain'>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
<div class='plane'>
<div class='face'></div>
</div>
</div>
<div class='sun'></div>
</div>
$bl: #83d3e5;
$y: #fadc0b;
$o: #c43720;
$g: #8eaa6f;
@function stargen ($n) {
$value: '#{random(2000)}px #{random(2000)}px #FFF';
@for $i from 2 through $n {
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
}
@return unquote($value);
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
perspective:1000px;
overflow:hidden;
background:#222;
animation:sunrise5 20s linear infinite alternate;
@keyframes sunrise5{
75%{
background:lighten($bl, 10%);
}
100%{
background:lighten($bl, 10%);
}
}
&:after{
content:'';
position:absolute;
width:1px;
height:1px;
background:#fff;
box-shadow:stargen(800);
top:0;
left:0;
z-index:-1;
animation:sunrise4 20s linear infinite alternate;
@keyframes sunrise4{
75%{
opacity:0;
}
100%{
opacity:0;
}
}
}
&:before{
content:'';
position:absolute;
width:100vw;
height:50vh;
left:0;
bottom:0;
background:darken($g, 30%);
animation:sunrise3 20s linear infinite alternate;
@keyframes sunrise3{
75%{
background:darken($g, 5%);
}
100%{
background:darken($g, 5%);
}
}
}
*{
transform-style:preserve-3d;
}
.wrap{
position:absolute;
width:500px;
height:450px;
transform:rotateX(60deg);
left:calc(50% - 250px);
top:calc(50% - 175px);
background:$g;
animation:zoom 20s linear infinite alternate;
@keyframes zoom{
75%{
transform:translateZ(250px) rotateX(70deg);
}
100%{
transform:translateZ(250px) rotateX(70deg);
}
}
&:after{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
filter:brightness(0.15);
background:rgba(75,0,6, 0.5);
animation:sunrise2 20s linear infinite alternate;
}
&:before{
content:'';
position:absolute;
width:100%;
height:10000px;
bottom:-10000px;
background:linear-gradient(to right, $g 15px, $bl 15px, $bl 482px, $g 482px);
transform-origin:top;
transform:rotateX(-60deg);
filter:brightness(0.25);
}
.sun{
position:absolute;
width:150px;
height:150px;
background:$o;
box-shadow:0 0 20px 0 $o;
border-radius:100%;
transform:rotateX(-60deg) translateY(50px);
top:-50px;
left:50%;
animation:sunrise 20s ease-in-out infinite alternate;
@keyframes sunrise{
75%{
transform:rotateX(-60deg) translateY(-200px) scale(0.8);
background:$y;
box-shadow:0 0 20px 0 $y;
}
100%{
transform:rotateX(-60deg) translateY(-200px) scale(0.8);
background:$y;
box-shadow:0 0 20px 0 $y;
}
}
}
.lake{
position:absolute;
bottom:0px;
left:2.5%;
width:75%;
height:30%;
background:$bl;
border-radius:500px 500px 0 0 / 400px 400px 0 0;
.ripple, .ripple:before, .ripple:after{
content:'';
position:absolute;
left:60%;
bottom:35%;
width:10px;
height:10px;
border-radius:100%;
animation:ripple 5s linear infinite;
@keyframes ripple{
from{
box-shadow:0 0 0 0 $bl, 0 0 0 0 lighten($bl, 20%), 0 0 0 0 $bl, 0 0 0 0 lighten($bl, 20%), 0 0 0 0 $bl, 0 0 0 0 lighten($bl, 20%);
}
to{
box-shadow:0 0 0 20px $bl, 0 0 0 21px lighten($bl, 35%), 0 0 0 30px $bl, 0 0 0 32px lighten($bl, 30%), 0 0 0 50px $bl, 0 0 0 51px lighten($bl, 20%);
opacity:0;
}
}
}
.ripple{
&:before{
left:-100px;
transform:scale(0.745);
animation-delay:-3s;
}
&:after{
left:100px;
transform:scale(0.75);
animation-delay:-1.25s;
bottom:-10px;
}
}
&:before{
content:'';
position:absolute;
width:75%;
height:75%;
right:-25%;
background:$bl;
bottom:0;
border-radius:300px 300px 0 0;
}
}
}
.mountain{
position:absolute;
width:300px;
height:300px;
left:calc(50% - 150px);
top:0;
&:nth-of-type(2){
transform:scaleZ(0.75) scale(0.5) translateZ(0px) translateY(25px) translateX(225px) rotate(0deg);
}
&:nth-of-type(3){
margin-left:-150px;
transform:scale(0.5) scaleZ(0.5) rotate(0deg);
}
.plane{
position:absolute;
width:97.5px;
height:5px;
left:calc(50% - 48.75px);
top:calc(50% - 2.5px);
transform-origin:50% 150px;
margin-top:-150px;
.face{
position:absolute;
width:100%;
height:300px;
background:red;
bottom:0;
left:0;
transform-origin:bottom;
transform:rotateX(-119deg);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
&:before{
content:'';
position:absolute;
width:100%;
height:25%;
top:0;
left:0;
}
&:after{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:rgba(75,0,6, 0.5);
filter:brightness(0.5);
animation:sunrise2 20s linear infinite alternate;
@keyframes sunrise2{
75%{
filter:brightness(1);
background:rgba(255,196,8, 0);
}
100%{
filter:brightness(1);
background:rgba(255,196,8, 0);
}
}
}
}
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
transform:rotate(#{$i * 36}deg);
.face{
background:darken(#b0926d, $i * 2%);
&:before{
background:darken(#fff, ($i * 3%));
-webkit-clip-path: polygon(100% 0, 100% 50%, random(300) + px 100%, 0 50%, 0 0);
clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 50%, 0 0);
}
}
}
}
}
}
}