<div class="page">
<div class="overlay"></div>
<p class="quote">Do not go where the path may lead, go instead where there is no path and leave a trail.<br><strong class="quote--author">Ralph Waldo Emerson</strong></p>
</div>$white: #fbfefd;
$gray-50: #7F7F7F;
$bg-color: $white;
$color-name: 'aqua';
$box-shadow: 0 3px 20px 1px rgba(24, 58, 39, 0.2);
$animation-duration: 18s;
$transition-duration: 0.3s;
@function long-shadow($depth: 10, $color1: $gray-50) {
$shadow: -1px 1px $color1;
@for $i from 1 through $depth {
$shadow: #{$shadow}, -#{$i}px #{$i}px #{$color1};
}
$shadow: #{$shadow}, 0 0 50px rgba(24, 58, 39, 0.1);
@return $shadow;
}
@keyframes change-overlay-color {
0% {
$color-name: 'aqua';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
7.14% {
$color-name: 'teal';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
14.28% {
$color-name: 'blue';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
21.43% {
$color-name: 'denim';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
28.57% {
$color-name: 'purple';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
35.71% {
$color-name: 'magenta';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
42.86% {
$color-name: 'pink';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
50% {
$color-name: 'red';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
57.14% {
$color-name: 'brown';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
64.29% {
$color-name: 'orange';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
71.43% {
$color-name: 'yellow';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
78.57% {
$color-name: 'olive';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
85.71% {
$color-name: 'yellow-green';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
92.86% {
$color-name: 'green';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
100% {
$color-name: 'aqua';
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
}
}
@keyframes change-body-background {
0% {
$color-name: 'aqua';
background: color($color-name, 10);
}
7.14% {
$color-name: 'teal';
background: color($color-name, 10);
}
14.28% {
$color-name: 'blue';
background: color($color-name, 10);
}
21.43% {
$color-name: 'denim';
background: color($color-name, 10);
}
28.57% {
$color-name: 'purple';
background: color($color-name, 10);
}
35.71% {
$color-name: 'magenta';
background: color($color-name, 10);
}
42.86% {
$color-name: 'pink';
background: color($color-name, 10);
}
50% {
$color-name: 'red';
background: color($color-name, 10);
}
57.14% {
$color-name: 'brown';
background: color($color-name, 10);
}
64.29% {
$color-name: 'orange';
background: color($color-name, 10);
}
71.43% {
$color-name: 'yellow';
background: color($color-name, 10);
}
78.57% {
$color-name: 'olive';
background: color($color-name, 10);
}
85.71% {
$color-name: 'yellow-green';
background: color($color-name, 10);
}
92.86% {
$color-name: 'green';
background: color($color-name, 10);
}
100% {
$color-name: 'aqua';
background: color($color-name, 10);
}
}
body {
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
animation: change-body-background $animation-duration linear infinite;
background: color($color-name, 10);
transition: background $transition-duration ease;
}
.page {
background: $bg-color;
box-shadow: $box-shadow;
box-sizing: border-box;
height: 90vh;
margin: 5vh auto;
overflow: hidden;
position: relative;
width: 70vh;
.overlay {
animation: change-overlay-color $animation-duration linear infinite;
background: linear-gradient(
210deg,
color($color-name, 100) 60%,
darken(color($color-name, 100), 7) 80%,
darken(color($color-name, 100), 15) 95%
);
height: 100%;
left: 0;
mix-blend-mode: overlay;
position: absolute;
top: 0;
transition: background $transition-duration ease;
width: 100%;
z-index: 10;
}
.quote {
color: $bg-color;
display: block;
font: {
family: Anton, sans-serif;
size: 7.9vh;
weight: 800;
}
left: 7%;
letter-spacing: -1px;
line-height: 1.15em;
position: absolute;
text: {
shadow: long-shadow(900);
transform: uppercase;
}
top: 5vh;
}
.quote--author {
font-size: 4vh;
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.