CSS
body {
background: #e2f4fe;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sun {
position: relative;
width: 75px;
height: 75px;
background: linear-gradient(to top, #fb6753 0%,#fc8b53 50%,#fdd55a 100%);
background-size: 200% 200%;
border-radius: 100%;
animation: 10s rise infinite;
}
.lines {
position: absolute;
top: 60%;
width: 100%;
height: 3px;
background: #e2f4fe;
&:before {
display: block;
content: '';
position: relative;
top: 10px;
height: 3px;
background: #e2f4fe;
}
&:after {
display: block;
content: '';
position: relative;
top: 18px;
height: 3px;
background: #e2f4fe;
}
}
@keyframes rise {
0% {
top: -100px;
background-position: 50% 0%;
}
50% {
top: 0;
background-position: 50% 100%;
}
100% {
top: -100px;
background-position: 50% 0%;
}
}
