A Pen by aloisdg.

index.html

<div class="sun"></div>
<div class="dune"></div>

script.js

// nothing to do here

style.css

* { margin: 0; padding: 0; }

body {
    width: 100%; height: 100%;
    background: midnightblue;
    overflow: hidden;
}

.sun {
    margin: 84px auto;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    background: orange;
    -webkit-animation: pulse 2s infinite alternate;
    -moz-animation: pulse 5s infinite alternate;
    -o-animation: pulse 5s infinite alternate;
    animation: pulse 5s infinite alternate;
}

.shine1 {
    background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, orange 0%, orangered 100%, red 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, orange, orangered);
    background-image: radial-gradient(45px 45px 45deg, circle cover, orange 0%, orangered 100%, red 95%);
}
.shine2 {
    box-shadow: inset 0 0 50px #ffffff, inset 20px 0 80px orange, inset -20px 0 80px red, inset 20px 0 300px orange, inset -20px 0 300px red, 0 0 50px #fff, -10px 0 80px orange, 10px 0 80px red;
}

.dune {
    position: absolute;
    bottom: -20%;
    right: 0;
    width: 100%;
    height: 55%;
    border-top-right-radius: 0;
    border-top-left-radius: 100%;
    background-color: darkorange;
    -webkit-animation: grow 1s;
    -moz-animation: grow 1s;
    -o-animation: grow 1s;
    animation: grow 1s;
}
.dune:before {
    content:'';
    position: absolute;
    bottom: -20%;
    left: -20%;
    width: 160%;
    height: 110%;
    border-top-right-radius: 100%;
    border-top-left-radius: 0%;
    background-color: orange;
    -webkit-animation: grow 1s;
    -moz-animation: grow 1s;
    -o-animation: grow 1s;
    animation: grow 1s;
}

@-webkit-keyframes grow {
  0%   { bottom: -22%; }
  100% { bottom: -20%; }
}
@-moz-keyframes grow {
  0%   { bottom: -22%; }
  100% { bottom: -20%; }
}
@-o-keyframes grow {
  0%   { bottom: -22%; }
  100% { bottom: -20%; }
}
@keyframes grow {
  0%   { bottom: -22%; }
  100% { bottom: -220; }
}

@-webkit-keyframes pulse {
  0%   { -webkit-transform: scale(0.8); }
  100% { -webkit-transform: scale(0.85); }
}
@-moz-keyframes pulse {
  0%   { -moz-transform: scale(0.8); }
  100% { -moz-transform: scale(0.8); }
}
@-o-keyframes pulse {
  0%   { -o-transform: scale(0.8); }
  100% { -o-transform: scale(0.85); }
}
@keyframes pulse {
  0%   { transform: scale(0.8); }
  100% { transform: scale(0.85); }
}

Sun-over-dunes-(full-css).markdown

Sun over dunes (full css)

A Pen by aloisdg on CodePen.

License.