LESS
*{margin:0px;padding:0px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;cursor: default;}
body{background: #4FC3F7;}
div{display: block;position: absolute;}
.layout{
width: 100vw;
height: 100vh;
left: 0px;
top: 0px;
overflow: hidden;
}
.night{
width: 100%;
height: 200%;
left: 0px;
top: 0px;
transition: 0.5s;
background: #4FC3F7;
background: linear-gradient(to top, #4FC3F7, #333);
}
.ground{
width: 100vw;
height: 30vh;
left: 0px;
bottom: 0px;
background: #F4511E;
z-index: 10;
}
.sun{
width: 600px;
height: 600px;
background: #FFF;
border-radius: 50%;
bottom: 35vh;
left: 50%;
transform: translate(-50%,0px);
z-index: 1;
transition: 0.5s;
}
.shadow{
width: 100%;
height: 100%;
top: 8%;
left: -50%;
background: #333;
transform: rotate(30deg);
}
.pyramid{
width: 1000px;
height: 50vw;
left: 50%;
bottom:30vh;
transform: translate(-50%,0px);
z-index: 2;
.p1,.p2,.p3{
background: #F4511E;
overflow: hidden;
transform: rotate(45deg) translate(50%,50%);
}
.p1{
width: 500px;
height: 500px;
bottom: 30px;
left: 20%;
z-index: 2;
}
.p2{
width: 400px;
height: 400px;
bottom: 0px;
right: 20px;
z-index: 3;
}
.p3{
width: 200px;
height: 200px;
bottom: 0px;
left: 30px;
z-index: 4;
}
}
@media screen and (max-device-width: 900px), only screen and (max-width: 900px){
.pyramid{width: 100vw;}
}
JAVASCRIPT
$(document).on('mousemove', function(e){
$('.sun').css('top',e.pageY-300);
$('.night').css('top',e.pageY-$('.night').height()/2);
});
