revision:
<div>
<h3>City Nights Effect</h3>
</div>
<style>
@keyframes lights {
0% {color: hsl(230, 40%, 80%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2),
0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
1em 0.125em 0.5em hsla(200, 100%, 60%, 0);}
30% {color: hsl(230, 80%, 90%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);}
40% {color: hsl(230, 100%, 95%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
0 0 0.125em hsla(320, 100%, 90%, 0.5), -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);}
70% {color: hsl(230, 80%, 90%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
-0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);}
100% {color: hsl(230, 40%, 80%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2),
0 0 0.125em hsla(320, 100%, 60%, 0.3),1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
-1em 0.125em 0.5em hsla(200, 100%, 60%, 0); }
}
h3 {margin: auto; font-size: 3.5rem; font-weight: 300; animation: lights 5s 750ms linear infinite;}
</style>
<div>
<div class="frame">
<h1 class="text">
<span class="letter letter-1">N</span>
<span class="letter letter-2">E</span>
<span class="letter letter-3">O</span>
<span class="letter letter-4">N</span>
</h1>
</div>
</div>
<style>
.frame {width: 40vw; height: 20vw; background-color: #1b2431; font-size: 0.6vw;
display: flex; flex-flow: column; justify-content: center; align-items: center;}
.frame .text {font-family: Helvetica, Arial, sans-serif; font-weight: 100; font-size: 7vw;
letter-spacing: -0.25vw; flex-flow: row;}
.frame .text .letter { color: #d9fdff; text-shadow: 0 0 vw #00f0ff; display: inline-block;}
.frame .text .letter.letter-2 {transform: translate(-0.2vw, 1vw) rotate(10deg);
-webkit-animation: flicker 2s ease-in-out infinite alternate;
animation: flicker 2s ease-in-out infinite alternate;}
@-webkit-keyframes flicker {
0% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
5% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(12deg);}
5.5% {opacity: 0; transform: translate(-0.2vw, 1vw) rotate(14deg);}
6% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
6.5% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
7% {opacity: 0; transform: translate(-0.2vw, 1vw) rotate(10deg);}
8% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
50% {opacity: 1;transform: translate(-0.2vw, 1vw) rotate(13deg);}
100% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
}
@keyframes flicker {
0% {opacity: 1; transform: translate(-0.5vw, 2vw) rotate(10deg);}
5% {opacity: 1; transform: translate(-0.5vw, 2vw) rotate(12deg);}
5.5% {opacity: 0; transform: translate(-0.5vw, 1vw) rotate(14deg);}
6% {opacity: 1; transform: translate(-0.5vw, 1vw) rotate(10deg);}
6.5% {opacity: 1; transform: translate(-0.5vw, 1vw) rotate(10deg);}
7% {opacity: 0; transform: translate(-0.5vw, 1vw) rotate(10deg);}
8% {opacity: 1; transform: translate(-0.5vw, 1vw) rotate(10deg);}
50% {opacity: 1;transform: translate(-0.5vw, 5vw) rotate(13deg);}
100% {opacity: 1; transform: translate(-0.5vw, 5vw) rotate(10deg);}
}
</style>
You have brains in your head
You have feet in your shoes
You can steer yourself
Any direction you choose
<div class="frame1">
<button aria-pressed="false" onClick="this.setAttribute('aria-pressed',this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">Pause Animation</button>
<div class='marquees'>
<section class='marquee' style='--char-count: 28'>
<div class='marquee--inner'>
<p>You have brains in your head</p>
<p aria-hidden='true'>You have brains in your head</p>
<p aria-hidden='true'>You have brains in your head</p>
<p aria-hidden='true'>You have brains in your head</p>
<p aria-hidden='true'>You have brains in your head</p>
<p aria-hidden='true'>You have brains in your head</p>
</div>
</section>
<div class='marquee' style='--char-count: 30'>
<div class='marquee--inner'>
<p>You have feet in your shoes</p>
<p aria-hidden='true'>You have feet in your shoes</p>
<p aria-hidden='true'>You have feet in your shoes</p>
<p aria-hidden='true'>You have feet in your shoes</p>
<p aria-hidden='true'>You have feet in your shoes</p>
<p aria-hidden='true'>You have feet in your shoes</p>
</div>
</div>
<section class='marquee' style='--char-count: 22'>
<div class='marquee--inner'>
<p>You can steer yourself</p>
<p aria-hidden='true'>You can steer yourself</p>
<p aria-hidden='true'>You can steer yourself</p>
<p aria-hidden='true'>You can steer yourself</p>
<p aria-hidden='true'>You can steer yourself</p>
<p aria-hidden='true'>You can steer yourself</p>
</div>
</section>
<section class='marquee' style='--char-count: 24'>
<div class='marquee--inner'>
<p>Any direction you choose</p>
<p aria-hidden='true'>Any direction you choose</p>
<p aria-hidden='true'>Any direction you choose</p>
<p aria-hidden='true'>Any direction you choose</p>
<p aria-hidden='true'>Any direction you choose</p>
<p aria-hidden='true'>Any direction you choose</p>
</div>
</section>
</div>
</div>
<style>
.marquee { --marquee--colour: #f3bb0b; --marquee--repeat-count: 6; --marquee--base-duration: 1s; --marquee--repeat-size: calc(100% / var(--marquee--repeat-count));
--marquee--double-size: calc(var(--marquee--repeat-size) * 2); --marquee--duration: calc(var(--marquee--base-duration) * var(--char-count, 20));
overflow: hidden; width: 100%; margin-left: -5%; mix-blend-mode: screen; transform: rotate(-5deg); background: var(--marquee--colour); color: #000;}
.marquee:nth-child(even) { --marquee--direction: -1; transform: rotate(5deg); background: #000; color: var(--marquee--colour);}
.marquee p {transform: translateY(0.07em); font-weight: bold; margin: 0; display: flex; gap: 0.5em; line-height: 1.1; font-size: clamp(2.5rem, 12vw, 6.2rem);
font-family: "Bebas Neue", sans-serif; /* An empty psuedo element creates a gap after the last element */ }
.marquee p::after {content: "*"; transform: translateY(0.175em);}
.marquee p::before {content: "";}
.marquee--inner {width: max-content; display: flex; text-transform: uppercase;}
@media (prefers-reduced-motion: no-preference) {
.marquee--inner { animation: marquee var(--marquee--duration) infinite linear, reduce-marquee var(--marquee--duration) infinite linear paused;
animation-composition: add;}
.marquee--inner:hover {animation-play-state: running; }
}
@keyframes marquee {
from {transform: translateX(calc( (-1 * var(--marquee--double-size)) - (var(--marquee--double-size) * var(--marquee--direction, 1)) ));}
to {transform: translateX(calc(var(--marquee--double-size) * -1)); }
}
@keyframes reduce-marquee {
from {transform: translateX(calc(var(--marquee--repeat-size) * var(--marquee--direction, 1)));}
to {transfrom: translateX(calc(var(--marquee--double-size) * -1));}
}
.frame1{content: ""; position: relative; background-image: url("../images/2.jpg"); background-size: cover; background-position: top;
filter: brightness(0.75);}
.frame1{height: 100%; margin: 0;}
.marquees {align-content: center; height: 50%; display: grid; gap: 5vw; overflow: hidden;}
button { position: relative; top: 20px; left: 20px; }
button[aria-pressed=true] { filter: invert(1); }
[aria-pressed=true] + * .marquee--inner { animation-play-state: paused !important;}
</style>
<div class="frame2">
<h3>
<span>C</span>
<span>O</span>
<span>L</span>
<span>O</span>
<span>R</span>
<span>F</span>
<span>O</span>
<span>N</span>
<span>T</span>
<span>S</span>
<span>!</span>
</h3>
</div>
<style>
.frame2{ margin: 0; height: 50vh; display: grid; place-content: center;
background-color: #000;}
.frame2 h3 {font-size: 4vw; font-family: Helvetica, Arial, sans-serif; color: blue;
font-weight: 900;}
.frame2 h3 span {-webkit-animation: depth 1s ease-in-out alternate infinite;
animation: depth 1s ease-in-out alternate infinite; position: relative;
display: inline-block; }
span:nth-child(1) {-webkit-animation-delay: 0.1s; animation-delay: 0.1s;}
span:nth-child(2) {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
span:nth-child(3) {-webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
span:nth-child(4) {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
span:nth-child(5) {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
span:nth-child(6) {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
span:nth-child(7) {-webkit-animation-delay: 0.7s; animation-delay: 0.7s;}
span:nth-child(8) {-webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
span:nth-child(9) {-webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
span:nth-child(10) {-webkit-animation-delay: 1s; animation-delay: 1s;}
span:nth-child(11) {-webkit-animation-delay: 1.1s; animation-delay: 1.1s;}
span:nth-child(12) {-webkit-animation-delay: 1.2s; animation-delay: 1.2s;}
@-webkit-keyframes depth {
0% { transform: translatex(0) translatey(0); color: blue;}
100% {transform: translatex(0.15em) translatey(0.1em); color:lightgreen; }
}
@keyframes depth {
0% {transform: translatex(0) translatey(0); color: blue;}
100% {transform: translatex(0.15em) translatey(0.1em); color: lightgreen;}
}
</style>