纯CSS构建的月亮和流水倒影特效

Moon and Sea

css3, moon

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3290
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    background: #140e35;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.centered,
.night-sky,
.moon,
.sea-horizon,
.sea-horizon .sea-shine {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.night-sky {
    width: 80%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImNpcmNsZSIgY3k9IiIgcj0iNDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmQ5ZGVlIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(circle, rgba(253, 157, 238, 0.5), rgba(0, 0, 0, 0) 40%);
    background: -webkit-radial-gradient(circle, rgba(253, 157, 238, 0.5), rgba(0, 0, 0, 0) 40%);
    background: radial-gradient(circle, rgba(253, 157, 238, 0.5), rgba(0, 0, 0, 0) 40%);
}
.night-sky ul li {
    position: absolute;
    list-style: none;
}
.night-sky .stars {
    width: 170px;
    top: 20%;
    position: absolute;
    z-index: 999;
    left: 30%;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
.night-sky .stars div:nth-child(1),
.night-sky .stars .clouds div:nth-child(2),
.night-sky .clouds .stars div:nth-child(2),
.night-sky .stars .clouds div:nth-child(3),
.night-sky .clouds .stars div:nth-child(3),
.night-sky .stars .clouds div:nth-child(4),
.night-sky .clouds .stars div:nth-child(4) {
    width: 20px;
    position: relative;
    height: 6px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: #fff;
    -moz-animation: twinkle-width 1s ease infinite;
    -webkit-animation: twinkle-width 1s ease infinite;
    animation: twinkle-width 1s ease infinite;
}
.night-sky .stars div:nth-child(2) {
    width: 6px;
    height: 20px;
    top: -5px;
    position: absolute;
    background: #fff;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    left: 7px;
    top: -7px;
    transform-origin: middle;
    -moz-animation: twinkle-height 1s ease infinite;
    -webkit-animation: twinkle-height 1s ease infinite;
    animation: twinkle-height 1s ease infinite;
}
.night-sky .stars div:nth-child(3) {
    background: #fff;
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 5px;
    top: -2px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}
.night-sky .stars:nth-child(3) {
    left: 40%;
    top: 10%;
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
}
.night-sky .stars:nth-child(3) div {
    -moz-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.night-sky .stars:nth-child(4) {
    left: 65%;
    top: 25%;
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
}
.night-sky .stars:nth-child(4) div {
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.night-sky .stars:nth-child(5) {
    left: 55%;
    top: 45%;
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}
.night-sky .stars:nth-child(5) div {
    -moz-animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}
.night-sky li:nth-child(1),
.night-sky .sea-horizon li:nth-child(2),
.sea-horizon .night-sky li:nth-child(2),
.night-sky .sea-horizon li:nth-child(3),
.sea-horizon .night-sky li:nth-child(3),
.night-sky .sea-horizon li:nth-child(4),
.sea-horizon .night-sky li:nth-child(4),
.night-sky .sea-horizon li:nth-child(5),
.sea-horizon .night-sky li:nth-child(5),
.night-sky .sea-horizon li:nth-child(6),
.sea-horizon .night-sky li:nth-child(6),
.night-sky .sea-horizon li:nth-child(7),
.sea-horizon .night-sky li:nth-child(7),
.night-sky .sea-horizon li:nth-child(8),
.sea-horizon .night-sky li:nth-child(8),
.night-sky .sea-horizon li:nth-child(9),
.sea-horizon .night-sky li:nth-child(9),
.night-sky .sea-horizon li:nth-child(10),
.sea-horizon .night-sky li:nth-child(10),
.night-sky .sea-horizon li:nth-child(11),
.sea-horizon .night-sky li:nth-child(11),
.night-sky .sea-horizon li:nth-child(12),
.sea-horizon .night-sky li:nth-child(12) {
    left: 32%;
    top: 221px;
    width: 2px;
    height: 2px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.night-sky li:nth-child(2) {
    left: 56%;
    top: 146px;
    width: 6px;
    height: 6px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(3) {
    left: 37%;
    top: 66px;
    width: 2px;
    height: 2px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(4) {
    left: 56%;
    top: 181px;
    width: 4px;
    height: 4px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(5) {
    left: 75%;
    top: 185px;
    width: 4px;
    height: 4px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(6) {
    left: 39%;
    top: 97px;
    width: 3px;
    height: 3px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.night-sky li:nth-child(7) {
    left: 37%;
    top: 214px;
    width: 2px;
    height: 2px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.night-sky li:nth-child(8) {
    left: 54%;
    top: 173px;
    width: 2px;
    height: 2px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(9) {
    left: 42%;
    top: 216px;
    width: 5px;
    height: 5px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.night-sky li:nth-child(10) {
    left: 64%;
    top: 128px;
    width: 4px;
    height: 4px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(11) {
    left: 50%;
    top: 168px;
    width: 5px;
    height: 5px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(12) {
    left: 41%;
    top: 185px;
    width: 4px;
    height: 4px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(13) {
    left: 55%;
    top: 177px;
    width: 2px;
    height: 2px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(14) {
    left: 67%;
    top: 116px;
    width: 4px;
    height: 4px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.night-sky li:nth-child(15) {
    left: 64%;
    top: 152px;
    width: 3px;
    height: 3px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZTVmZCIgc3RvcC1vcGFjaXR5PSIwLjU5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(157, 229, 253, 0.59)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(157, 229, 253, 0.59), rgba(0, 0, 0, 0));
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-animation: twinkle 1s ease infinite;
    -webkit-animation: twinkle 1s ease infinite;
    animation: twinkle 1s ease infinite;
    opacity: 0;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.night-sky .clouds {
    position: absolute;
    display: block;
    left: 30%;
    top: 40%;
    opacity: 0.4;
}
.night-sky .clouds div:nth-child(1),
.night-sky .clouds div:nth-child(2),
.night-sky .clouds div:nth-child(3),
.night-sky .clouds div:nth-child(4) {
    width: 80px;
    height: 80px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #fff;
    position: absolute;
}
.night-sky .clouds div:nth-child(2) {
    width: 90px;
    height: 90px;
    left: -40px;
    top: 30px;
}
.night-sky .clouds div:nth-child(3) {
    width: 60px;
    height: 60px;
    left: 60px;
    top: 40px;
}
.night-sky .clouds div:nth-child(4) {
    width: 60px;
    height: 60px;
    left: 20px;
    top: 40px;
}
.night-sky .clouds:nth-child(6) {
    left: 60%;
    top: 40%;
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}
.moon {
    width: 120px;
    height: 120px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: #fff;
    top: -35%;
    box-shadow: 0px 20px 50px rgba(157, 229, 253, 0.59);
}
.moon::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.05);
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(40%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 40%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 40%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 40%);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 40px;
    left: 82px;
}
.moon::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    top: 80px;
    left: 25px;
    background: rgba(0, 0, 0, 0.05);
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(40%, rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 40%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 40%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 40%);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.moon ul li {
    list-style: none;
    background: #fff;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImNpcmNsZSIgY3k9IiIgcj0iOTAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -moz-radial-gradient(circle, #ffffff 0%, rgba(0, 0, 0, 0) 90%);
    background: -webkit-radial-gradient(circle, #ffffff 0%, rgba(0, 0, 0, 0) 90%);
    background: radial-gradient(circle, #ffffff 0%, rgba(0, 0, 0, 0) 90%);
    position: absolute;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    opacity: 0.2;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -moz-animation: moon-glow 6s ease infinite;
    -webkit-animation: moon-glow 6s ease infinite;
    animation: moon-glow 6s ease infinite;
}
.moon li:nth-child(1),
.moon .sea-horizon li:nth-child(2),
.sea-horizon .moon li:nth-child(2),
.moon .sea-horizon li:nth-child(3),
.sea-horizon .moon li:nth-child(3),
.moon .sea-horizon li:nth-child(4),
.sea-horizon .moon li:nth-child(4),
.moon .sea-horizon li:nth-child(5),
.sea-horizon .moon li:nth-child(5),
.moon .sea-horizon li:nth-child(6),
.sea-horizon .moon li:nth-child(6),
.moon .sea-horizon li:nth-child(7),
.sea-horizon .moon li:nth-child(7),
.moon .sea-horizon li:nth-child(8),
.sea-horizon .moon li:nth-child(8),
.moon .sea-horizon li:nth-child(9),
.sea-horizon .moon li:nth-child(9),
.moon .sea-horizon li:nth-child(10),
.sea-horizon .moon li:nth-child(10),
.moon .sea-horizon li:nth-child(11),
.sea-horizon .moon li:nth-child(11),
.moon .sea-horizon li:nth-child(12),
.sea-horizon .moon li:nth-child(12) {
    width: 120%;
    height: 120%;
    left: -10px;
    top: -10px;
}
.moon li:nth-child(2) {
    width: 140%;
    height: 140%;
    left: -22.5px;
    top: -22.5px;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.moon li:nth-child(3) {
    width: 160%;
    height: 160%;
    left: -35px;
    top: -35px;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.sea-horizon {
    display: block;
    width: 80%;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIyNyUiIHN0b3AtY29sb3I9IiMxNDBlMzUiLz48c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZkOWRlZSIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjczJSIgc3RvcC1jb2xvcj0iIzE0MGUzNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(27%, #140e35), color-stop(48%, rgba(253, 157, 238, 0.5)), color-stop(73%, #140e35));
    background: -moz-linear-gradient(left, #140e35 27%, rgba(253, 157, 238, 0.5) 48%, #140e35 73%);
    background: -webkit-linear-gradient(left, #140e35 27%, rgba(253, 157, 238, 0.5) 48%, #140e35 73%);
    background: linear-gradient(to right, #140e35 27%, rgba(253, 157, 238, 0.5) 48%, #140e35 73%);
    height: 100%;
    top: 100%;
    position: absolute;
}
.sea-horizon::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 3px;
    background: #140e35;
}
.sea-horizon .sea-shine {
    width: 40%;
    left: -5%;
}
.sea-horizon ul li {
    list-style: none;
    display: block;
    position: absolute;
    z-index: 2;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.sea-horizon li:nth-child(1),
.sea-horizon li:nth-child(2),
.sea-horizon li:nth-child(3),
.sea-horizon li:nth-child(4),
.sea-horizon li:nth-child(5),
.sea-horizon li:nth-child(6),
.sea-horizon li:nth-child(7),
.sea-horizon li:nth-child(8),
.sea-horizon li:nth-child(9),
.sea-horizon li:nth-child(10),
.sea-horizon li:nth-child(11),
.sea-horizon li:nth-child(12) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSI1JSI+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmQ5ZGVlIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 4px, rgba(253, 157, 238, 0.5) 5px);
    background: -webkit-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 4px, rgba(253, 157, 238, 0.5) 5px);
    background: radial-gradient(circle at 0% 50%, rgba(204, 0, 0, 0) 4px, rgba(253, 157, 238, 0.5) 5px);
    left: 50%;
    -moz-animation: sea-glow1 4s ease infinite;
    -webkit-animation: sea-glow1 4s ease infinite;
    animation: sea-glow1 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 50%;
    }
    50% {
        left: 52%;
    }
}
@-moz-keyframes sea-glow1 {
    0% {
        left: 50%;
    }
    50% {
        left: 52%;
    }
}
@-ms-keyframes sea-glow1 {
    0% {
        left: 50%;
    }
    50% {
        left: 52%;
    }
}
@keyframes sea-glow1 {
    0% {
        left: 50%;
    }
    50% {
        left: 52%;
    }
}
.sea-horizon li:nth-child(2) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjUlIj48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZDlkZWUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -moz-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 4px, rgba(253, 157, 238, 0.5) 5px);
    background: -webkit-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 4px, rgba(253, 157, 238, 0.5) 5px);
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 4px, rgba(253, 157, 238, 0.5) 5px);
    left: 44%;
    -moz-animation: sea-glow2 4s ease infinite;
    -webkit-animation: sea-glow2 4s ease infinite;
    animation: sea-glow2 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 44%;
    }
    50% {
        left: 43%;
    }
}
@-moz-keyframes sea-glow2 {
    0% {
        left: 44%;
    }
    50% {
        left: 43%;
    }
}
@-ms-keyframes sea-glow2 {
    0% {
        left: 44%;
    }
    50% {
        left: 43%;
    }
}
@keyframes sea-glow2 {
    0% {
        left: 44%;
    }
    50% {
        left: 43%;
    }
}
.sea-horizon li:nth-child(3) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSI2JSI+PHN0b3Agb2Zmc2V0PSI4My4zMzMzMyUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmQ5ZGVlIiBzdG9wLW9wYWNpdHk9IjAuNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 5px, rgba(253, 157, 238, 0.4) 6px);
    background: -webkit-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 5px, rgba(253, 157, 238, 0.4) 6px);
    background: radial-gradient(circle at 0% 50%, rgba(204, 0, 0, 0) 5px, rgba(253, 157, 238, 0.4) 6px);
    left: 52%;
    -moz-animation: sea-glow3 4s ease infinite;
    -webkit-animation: sea-glow3 4s ease infinite;
    animation: sea-glow3 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 52%;
    }
    50% {
        left: 54%;
    }
}
@-moz-keyframes sea-glow3 {
    0% {
        left: 52%;
    }
    50% {
        left: 54%;
    }
}
@-ms-keyframes sea-glow3 {
    0% {
        left: 52%;
    }
    50% {
        left: 54%;
    }
}
@keyframes sea-glow3 {
    0% {
        left: 52%;
    }
    50% {
        left: 54%;
    }
}
.sea-horizon li:nth-child(4) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjYlIj48c3RvcCBvZmZzZXQ9IjgzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZDlkZWUiIHN0b3Atb3BhY2l0eT0iMC4zNSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 5px, rgba(253, 157, 238, 0.35) 6px);
    background: -webkit-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 5px, rgba(253, 157, 238, 0.35) 6px);
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 5px, rgba(253, 157, 238, 0.35) 6px);
    left: 36%;
    -moz-animation: sea-glow4 4s ease infinite;
    -webkit-animation: sea-glow4 4s ease infinite;
    animation: sea-glow4 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 36%;
    }
    50% {
        left: 35%;
    }
}
@-moz-keyframes sea-glow4 {
    0% {
        left: 36%;
    }
    50% {
        left: 35%;
    }
}
@-ms-keyframes sea-glow4 {
    0% {
        left: 36%;
    }
    50% {
        left: 35%;
    }
}
@keyframes sea-glow4 {
    0% {
        left: 36%;
    }
    50% {
        left: 35%;
    }
}
.sea-horizon li:nth-child(5) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSI3JSI+PHN0b3Agb2Zmc2V0PSI4NS43MTQyOSUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 6px, rgba(255, 255, 255, 0.5) 7px);
    background: -webkit-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 6px, rgba(255, 255, 255, 0.5) 7px);
    background: radial-gradient(circle at 0% 50%, rgba(204, 0, 0, 0) 6px, rgba(255, 255, 255, 0.5) 7px);
    left: 54%;
    -moz-animation: sea-glow5 4s ease infinite;
    -webkit-animation: sea-glow5 4s ease infinite;
    animation: sea-glow5 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 54%;
    }
    50% {
        left: 56%;
    }
}
@-moz-keyframes sea-glow5 {
    0% {
        left: 54%;
    }
    50% {
        left: 56%;
    }
}
@-ms-keyframes sea-glow5 {
    0% {
        left: 54%;
    }
    50% {
        left: 56%;
    }
}
@keyframes sea-glow5 {
    0% {
        left: 54%;
    }
    50% {
        left: 56%;
    }
}
.sea-horizon li:nth-child(6) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjklIj48c3RvcCBvZmZzZXQ9Ijg4Ljg4ODg5JSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -moz-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.4) 9px);
    background: -webkit-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.4) 9px);
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.4) 9px);
    left: 38%;
    -moz-animation: sea-glow6 4s ease infinite;
    -webkit-animation: sea-glow6 4s ease infinite;
    animation: sea-glow6 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 38%;
    }
    50% {
        left: 37%;
    }
}
@-moz-keyframes sea-glow6 {
    0% {
        left: 38%;
    }
    50% {
        left: 37%;
    }
}
@-ms-keyframes sea-glow6 {
    0% {
        left: 38%;
    }
    50% {
        left: 37%;
    }
}
@keyframes sea-glow6 {
    0% {
        left: 38%;
    }
    50% {
        left: 37%;
    }
}
.sea-horizon li:nth-child(7) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSI5JSI+PHN0b3Agb2Zmc2V0PSI4OC44ODg4OSUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.3) 9px);
    background: -webkit-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.3) 9px);
    background: radial-gradient(circle at 0% 50%, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.3) 9px);
    left: 48%;
    -moz-animation: sea-glow7 4s ease infinite;
    -webkit-animation: sea-glow7 4s ease infinite;
    animation: sea-glow7 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 48%;
    }
    50% {
        left: 50%;
    }
}
@-moz-keyframes sea-glow7 {
    0% {
        left: 48%;
    }
    50% {
        left: 50%;
    }
}
@-ms-keyframes sea-glow7 {
    0% {
        left: 48%;
    }
    50% {
        left: 50%;
    }
}
@keyframes sea-glow7 {
    0% {
        left: 48%;
    }
    50% {
        left: 50%;
    }
}
.sea-horizon li:nth-child(8) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjEwJSI+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 9px, rgba(255, 255, 255, 0.2) 10px);
    background: -webkit-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 9px, rgba(255, 255, 255, 0.2) 10px);
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 9px, rgba(255, 255, 255, 0.2) 10px);
    left: 32%;
    -moz-animation: sea-glow8 4s ease infinite;
    -webkit-animation: sea-glow8 4s ease infinite;
    animation: sea-glow8 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 32%;
    }
    50% {
        left: 31%;
    }
}
@-moz-keyframes sea-glow8 {
    0% {
        left: 32%;
    }
    50% {
        left: 31%;
    }
}
@-ms-keyframes sea-glow8 {
    0% {
        left: 32%;
    }
    50% {
        left: 31%;
    }
}
@keyframes sea-glow8 {
    0% {
        left: 32%;
    }
    50% {
        left: 31%;
    }
}
.sea-horizon li:nth-child(9) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSI5JSI+PHN0b3Agb2Zmc2V0PSI4OC44ODg4OSUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    background: -webkit-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    background: radial-gradient(circle at 0% 50%, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    left: 55%;
    -moz-animation: sea-glow9 4s ease infinite;
    -webkit-animation: sea-glow9 4s ease infinite;
    animation: sea-glow9 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 55%;
    }
    50% {
        left: 57%;
    }
}
@-moz-keyframes sea-glow9 {
    0% {
        left: 55%;
    }
    50% {
        left: 57%;
    }
}
@-ms-keyframes sea-glow9 {
    0% {
        left: 55%;
    }
    50% {
        left: 57%;
    }
}
@keyframes sea-glow9 {
    0% {
        left: 55%;
    }
    50% {
        left: 57%;
    }
}
.sea-horizon li:nth-child(10) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjklIj48c3RvcCBvZmZzZXQ9Ijg4Ljg4ODg5JSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.05) 9px);
    background: -webkit-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.05) 9px);
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.05) 9px);
    left: 50%;
    -moz-animation: sea-glow10 4s ease infinite;
    -webkit-animation: sea-glow10 4s ease infinite;
    animation: sea-glow10 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 50%;
    }
    50% {
        left: 49%;
    }
}
@-moz-keyframes sea-glow10 {
    0% {
        left: 50%;
    }
    50% {
        left: 49%;
    }
}
@-ms-keyframes sea-glow10 {
    0% {
        left: 50%;
    }
    50% {
        left: 49%;
    }
}
@keyframes sea-glow10 {
    0% {
        left: 50%;
    }
    50% {
        left: 49%;
    }
}
.sea-horizon li:nth-child(11) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSI5JSI+PHN0b3Agb2Zmc2V0PSI4OC44ODg4OSUiIHN0b3AtY29sb3I9IiNjYzAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    background: -webkit-radial-gradient(0% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    background: radial-gradient(circle at 0% 50%, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    left: 85%;
    -moz-animation: sea-glow11 4s ease infinite;
    -webkit-animation: sea-glow11 4s ease infinite;
    animation: sea-glow11 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 85%;
    }
    50% {
        left: 87%;
    }
}
@-moz-keyframes sea-glow11 {
    0% {
        left: 85%;
    }
    50% {
        left: 87%;
    }
}
@-ms-keyframes sea-glow11 {
    0% {
        left: 85%;
    }
    50% {
        left: 87%;
    }
}
@keyframes sea-glow11 {
    0% {
        left: 85%;
    }
    50% {
        left: 87%;
    }
}
.sea-horizon li:nth-child(12) {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjklIj48c3RvcCBvZmZzZXQ9Ijg4Ljg4ODg5JSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -moz-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    background: -webkit-radial-gradient(100% 50%, circle, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 8px, rgba(255, 255, 255, 0.1) 9px);
    left: 25%;
    -moz-animation: sea-glow12 4s ease infinite;
    -webkit-animation: sea-glow12 4s ease infinite;
    animation: sea-glow12 4s ease infinite;
}
@-webkit-keyframes $animationName {
    0% {
        left: 25%;
    }
    50% {
        left: 24%;
    }
}
@-moz-keyframes sea-glow12 {
    0% {
        left: 25%;
    }
    50% {
        left: 24%;
    }
}
@-ms-keyframes sea-glow12 {
    0% {
        left: 25%;
    }
    50% {
        left: 24%;
    }
}
@keyframes sea-glow12 {
    0% {
        left: 25%;
    }
    50% {
        left: 24%;
    }
}
.sea-horizon li:nth-child(1),
.sea-horizon li:nth-child(2),
.sea-horizon li:nth-child(3),
.sea-horizon li:nth-child(4),
.sea-horizon li:nth-child(5),
.sea-horizon li:nth-child(6),
.sea-horizon li:nth-child(7),
.sea-horizon li:nth-child(8),
.sea-horizon li:nth-child(9),
.sea-horizon li:nth-child(10),
.sea-horizon li:nth-child(11),
.sea-horizon li:nth-child(12) {
    width: 60px;
    height: 6px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    top: 3px;
}
.sea-horizon li:nth-child(2) {
    top: 9px;
    height: 8px;
    width: 75px;
}
.sea-horizon li:nth-child(3) {
    top: 17px;
    width: 105px;
    height: 8.5px;
}
.sea-horizon li:nth-child(4) {
    top: 25px;
    width: 125px;
    height: 10px;
}
.sea-horizon li:nth-child(5) {
    top: 35px;
    width: 145px;
    height: 12px;
}
.sea-horizon li:nth-child(6) {
    top: 47px;
    width: 165px;
    height: 12px;
}
.sea-horizon li:nth-child(7) {
    top: 59px;
    width: 165px;
    height: 14px;
}
.sea-horizon li:nth-child(8) {
    top: 73px;
    width: 175px;
    height: 16px;
}
.sea-horizon li:nth-child(9) {
    top: 89px;
    width: 105px;
    height: 12px;
}
.sea-horizon li:nth-child(10) {
    top: 101px;
    width: 85px;
    height: 10px;
}
.sea-horizon li:nth-child(11) {
    top: 89px;
    width: 15px;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
}
.sea-horizon li:nth-child(12) {
    top: 101px;
    width: 25px;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
}
@-webkit-keyframes $animationName {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@-moz-keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@-ms-keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@-webkit-keyframes $animationName {
    0% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
@-moz-keyframes moon-glow {
    0% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
@-ms-keyframes moon-glow {
    0% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
@keyframes moon-glow {
    0% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
@-webkit-keyframes $animationName {
    0% {
        height: 20px;
        top: -7px;
    }
    50% {
        height: 10px;
        top: -3px;
    }
    100% {
        height: 20px;
        top: -7px;
    }
}
@-moz-keyframes twinkle-height {
    0% {
        height: 20px;
        top: -7px;
    }
    50% {
        height: 10px;
        top: -3px;
    }
    100% {
        height: 20px;
        top: -7px;
    }
}
@-ms-keyframes twinkle-height {
    0% {
        height: 20px;
        top: -7px;
    }
    50% {
        height: 10px;
        top: -3px;
    }
    100% {
        height: 20px;
        top: -7px;
    }
}
@keyframes twinkle-height {
    0% {
        height: 20px;
        top: -7px;
    }
    50% {
        height: 10px;
        top: -3px;
    }
    100% {
        height: 20px;
        top: -7px;
    }
}
@-webkit-keyframes $animationName {
    0% {
        width: 20px;
        left: 0px;
    }
    50% {
        width: 10px;
        left: 5px;
    }
    100% {
        width: 20px;
        left: 0px;
    }
}
@-moz-keyframes twinkle-width {
    0% {
        width: 20px;
        left: 0px;
    }
    50% {
        width: 10px;
        left: 5px;
    }
    100% {
        width: 20px;
        left: 0px;
    }
}
@-ms-keyframes twinkle-width {
    0% {
        width: 20px;
        left: 0px;
    }
    50% {
        width: 10px;
        left: 5px;
    }
    100% {
        width: 20px;
        left: 0px;
    }
}
@keyframes twinkle-width {
    0% {
        width: 20px;
        left: 0px;
    }
    50% {
        width: 10px;
        left: 5px;
    }
    100% {
        width: 20px;
        left: 0px;
    }
}
@-webkit-keyframes $animationName {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

HTML

Moon and Sea

css3, moon

编辑器支持Emmet

快捷键

Moon and Sea

css3, moon

使用SVG turbulence实现的水中月（水面倒影）动画特效

纯CSS实现的日落水面光影摇曳动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：