.scene
.background
.stars
- for (var i = 0; i < 60; i++)
.star
.moon
.mountains
- for (var i = 0; i < 4; i++)
.mountain
.sea
- for (var i = 0; i < 30; i++)
.wave
.boat
.sail
.sail
.base
.lighthouse-group
.land
.lighthouse-holder
.shadow
.lighthouse
.top
.light-container
.light
.rail
.middle
.roof
.roof-light
.glow
.windows
- for (var i = 0; i < 4; i++)
.window
.door
.stairs
$x-dark: #29284c;
$dark: #4c4b82;
$medium: #717ae1;
$light: #b9befa;
$x-light: #d6d9f6;
$aqua: #75e2fa;
$grey: #9e9ebe;
$yellow: #f7f2b4;
$lightSpeed: 20s;
$boatSpeed: 100s;
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.scene {
width: 100vw;
height: 100vh;
}
.background {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
background-color: $x-dark;
background-image: linear-gradient(
$x-dark 0%,
$dark 10%,
$medium 60%,
$aqua 90%
);
}
.mountains {
width: 100%;
height: 250px;
bottom: 65px;
z-index: 3;
.mountain {
width: 250px;
height: 250px;
right: 50px;
bottom: -40px;
background-color: $medium;
transform: rotate(45deg);
border-radius: 3px;
&:after {
width: 100%;
height: 100%;
opacity: 0.7;
background-image: linear-gradient(135deg, $dark 0%, $medium 20%, $aqua 40%);
}
}
.mountain:nth-child(2) {
width: 240px;
height: 240px;
right: 220px;
z-index: 2;
}
.mountain:nth-child(3) {
width: 260px;
height: 260px;
right: 350px;
}
.mountain:nth-child(4) {
width: 200px;
height: 200px;
right: 130px;
bottom: -70px;
z-index: 3;
&:after {
background-image: linear-gradient(135deg, $dark 0%, $medium 6%, $aqua 20%);
}
}
}
.sea {
width: 100%;
height: 170px;
bottom: 0;
left: 0;
background: $x-dark;
background-image: linear-gradient(
to top,
$x-dark 0%,
$dark 30%,
$medium 60%,
$aqua 90%
);
z-index: 4;
.wave {
height: 3px;
background-color: $x-light;
border-radius: 100%;
opacity: 0.2;
animation: wave 5s linear infinite;
}
@for $i from 1 through (30) {
$size: random(100) + 50px;
.wave:nth-of-type(#{$i}) {
width: $size;
bottom: random(170) + px;
left: random(100) + vw;
opacity: random(5) * 0.1;
animation-delay: random(3) + s;
}
}
}
.boat {
width: 90px;
height: 90px;
bottom: 90px;
animation: boat $boatSpeed linear infinite;
&:after {
background-image: linear-gradient(
90deg,
transparentize($x-light, 0.3) 30%,
rgba(255, 255, 255, 0) 100%
);
width: 200px;
height: 8px;
top: 105px;
left: 20px;
border-radius: 40%;
z-index: -1;
}
&:before {
width: 92px;
height: 50px;
left: 25px;
bottom: -70px;
background-image: linear-gradient(
to bottom,
transparentize($x-dark, 0.2) 30%,
transparentize($x-dark, 1) 100%
);
z-index: -1;
animation: boatShadow $boatSpeed linear infinite;
}
.base {
width: 110px;
height: 25px;
bottom: -20px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
background-color: $dark;
}
.sail:nth-child(1) {
width: 90px;
height: 80px;
left: 5px;
clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
background: linear-gradient($light 0%, $dark 60%);
}
.sail:nth-child(2) {
width: 80px;
height: 70px;
left: 15px;
bottom: 10px;
transform: scaleX(-1);
clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
background: linear-gradient($light 0%, $dark 60%);
}
}
.moon {
width: 80px;
height: 80px;
top: 25%;
right: 10%;
border-radius: 50%;
z-index: 2;
background-color: $x-light;
box-shadow: 0 0 10px $x-light, 0 0 20px $x-light, 0 0 30px $x-light,
0 0 40px $x-light, 0 0 50px $aqua, 0 0 100px $x-light;
}
.stars {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
.star {
border-radius: 50%;
background-color: $light;
animation: twinkle 5s linear infinite;
}
@for $i from 1 through (60) {
$size: random(4)+px;
$top: random(100)+vh;
$left: random(100)+vw;
.star:nth-of-type(#{$i}) {
width: $size;
height: $size;
top: $top;
left: $left;
animation-delay: random(5) + s;
}
}
}
.lighthouse-group {
width: 50%;
height: 100%;
bottom: 0;
left: 0;
z-index: 2;
}
.land {
width: 400px;
height: 60px;
left: -30px;
bottom: 0;
background-image: linear-gradient(to top, $x-dark 80%, $medium 100%);
transform: skewX(35deg);
border-radius: 10px;
}
.lighthouse-holder {
width: 100px;
height: 480px;
bottom: 80px;
left: 180px;
.shadow {
width: 117px;
height: 50px;
left: -32px;
bottom: -70px;
background: $x-dark;
transform: skewX(-45deg);
}
.lighthouse {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: perspective(600px) rotateX(20deg);
background-color: $x-light;
background-image: repeating-linear-gradient(
-40deg,
transparent,
transparent 60px,
$dark 60px,
$dark 120px
);
&:after {
width: 100%;
height: 100%;
background-image: linear-gradient(
90deg,
transparentize($x-light, 0.4) 0%,
$x-dark 8%,
transparent 70%,
transparentize($x-light, 0.6) 100%
);
}
}
.top {
width: 94px;
height: 60px;
left: 3px;
top: -15px;
.light-container {
height: 40px;
min-width: 300px;
width: 35vw;
bottom: 4px;
left: 40px;
transform-style: preserve-3d;
transform-origin: left bottom;
transform: perspective(500px) rotateY(0);
animation: lightRotate $lightSpeed linear infinite;
.light {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: left center;
transform: perspective(500px) rotateY(-35deg);
background: linear-gradient(
90deg,
$yellow 40%,
rgba(255, 255, 255, 0) 100%
);
}
}
.rail {
width: 100%;
height: 17px;
bottom: 1px;
border: 3px solid $x-dark;
border-radius: 1px;
transform: perspective(1000px) rotateX(-35deg);
background-image: repeating-linear-gradient(
90deg,
$x-dark,
$x-dark 3px,
$grey 3px,
$yellow 10px
);
background-position: -2px 0;
}
.middle {
width: 88px;
height: 35px;
left: 3px;
bottom: 14px;
border: 2px solid $x-dark;
border-radius: 3px;
background-image: repeating-linear-gradient(
90deg,
$x-dark,
$x-dark 4px,
$grey 4px,
rgba(255, 255, 255, 0) 21px
);
background-position: -2px 0;
&:before {
width: 100%;
height: 100%;
z-index: -1;
background-color: $yellow;
box-shadow: 0 0 10px $x-light, 0 0 20px $yellow, 0 0 30px $yellow,
0 0 40px $yellow, 0 0 70px $yellow;
}
}
.roof {
width: 0;
height: 0;
bottom: 45px;
left: -3px;
border-left: 50px solid rgba(255, 255, 255, 0);
border-right: 50px solid rgba(255, 255, 255, 0);
border-bottom: 40px solid $x-dark;
&:before {
width: 14px;
height: 14px;
bottom: -7px;
left: -7px;
background-color: $x-dark;
border-radius: 50%;
}
&:after {
width: 4px;
height: 14px;
left: -2px;
bottom: 5px;
background-color: $x-dark;
border-radius: 3px;
}
.roof-light {
width: 100px;
height: 40px;
left: -50px;
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
background-image: linear-gradient(
135deg,
$x-dark 40%,
rgba($yellow, 0.5) 100%
);
}
}
.glow {
width: 100px;
height: 60px;
top: 0;
left: 0;
opacity: 0;
border-radius: 50%;
background-color: $yellow;
box-shadow: 0 0 10px $yellow, 0 0 20px $yellow, 0 0 30px $yellow,
0 0 40px $yellow, 0 0 50px $yellow, 0 0 60px $yellow, 0 0 70px $yellow,
0 0 80px $yellow;
animation: lightGlow $lightSpeed linear infinite;
}
}
.windows {
height: 100%;
width: 100%;
.window {
width: 15px;
height: 25px;
left: 43px;
background-color: $x-dark;
border-bottom: 2px solid rgba($light, 0.7);
border-radius: 25px 25px 0 0;
}
$bottom: 90px;
@for $i from 1 through (4) {
.window:nth-of-type(#{$i}) {
bottom: $bottom;
}
$bottom: $bottom + 90px;
}
}
.door {
width: 25px;
height: 40px;
background-color: $x-dark;
left: 38px;
bottom: -2px;
border-radius: 2px 2px 0 0;
.stairs {
width: 27px;
height: 28px;
top: 34px;
left: -1px;
background-color: $x-dark;
transform: perspective(100px) rotateX(45deg);
background-image: repeating-linear-gradient(
to bottom,
$x-dark,
$x-dark 4px,
$light 4px,
rgba(white, 0.1) 5px
);
}
}
}
// keyframes
@keyframes twinkle {
50% {
opacity: 0.3;
}
}
@keyframes wave {
50% {
transform: translateX(-10px);
}
}
@keyframes lightRotate {
25% {
transform: perspective(500px) rotateY(35deg);
}
75% {
transform: perspective(500px) rotateY(-35deg);
}
}
@keyframes lightGlow {
50% {
opacity: 0;
}
75% {
opacity: 1;
}
}
@keyframes boat {
0% {
transform: translateX(120vw) scale(0.8);
}
80%,
100% {
transform: translateX(-25vw) scale(0.8);
}
}
@keyframes boatShadow {
0% {
transform: skewX(35deg) translateX(15px);
}
50%,
100% {
transform: skewX(-55deg) translateX(-40px);
}
}
// Learn how to build this: https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-3-3e8a
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.