Enroll My Course : Next Level CSS Animation and Hover Effects …
source
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Next Level Neon Text Animation Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="box"> <span class="lightBar"></span> <div class="topLayer"></div> <h2>Next Level</h2> </div> </section> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
background: url(bg.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
overflow: hidden;
}
section:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ff086b;
z-index: 15;
mix-blend-mode: color;
animation: animateColor 15s linear infinite;
}
@keyframes animateColor
{
0%
{
filter: hue-rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
}
}
.box
{
position: relative;
width: 800px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box h2
{
color: #fff;
font-size: 6em;
white-space: nowrap;
font-weight: 600;
letter-spacing: 0.1em;
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 150px #00b3ff;
}
.topLayer
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: url(bg.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
animation: animateLayer 10s linear infinite;
}
@keyframes animateLayer
{
0%,2.5%
{
left: 0;
}
5%
{
left: 0;
}
45%
{
left: 100%;
}
47.5%,50%
{
left: 100%;
}
50.001%,52.5%
{
left: -100%;
}
55%
{
left: -100%;
}
95%
{
left: 0;
}
97.5%,100%
{
left: 0;
}
}
.lightBar
{
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
border-radius: 10px;
background: #fff;
z-index: 2;
box-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 150px #00b3ff;
animation: animatelightBar 5s linear infinite;
}
@keyframes animatelightBar
{
0%,5%
{
transform: scaleY(0) translateX(0);
}
10%
{
transform: scaleY(1) translateX(0);
}
90%
{
transform: scaleY(1) translateX(calc(800px - 10px));
}
95%,100%
{
transform: scaleY(0) translateX(calc(800px - 10px));
}
}
