Text Effects With CSS Neon Light Animation
Hello, my friends, welcome to my channel, In This Video, I’ll Demonstrate How To Make Pure Text Effects With CSS Neon Light Animation | With Source Code.
To create this project we need two files.
- index.html for HTML Code
- style.css for CSS Code
The name is user-defined, you can use your won name, create the file and connect CSS file with HTML, you can follow the code given below.
Basic HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML code goes here -->
<script src="app.js"></script>
</body>
</html>HTML Code For CSS Animated Neon Text Effect Structure:
<span class="neon_text" data-text="Welcome">Welcome</span>
CSS Code: Copy the code and paste it into the style.css file
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: #000;
display: grid;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
}
.neon_text {
color: #fff;
font-size: 16vw;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
position: relative;
background: #000;
filter: brightness(250%);
}
.neon_text::before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
mix-blend-mode: difference;
filter: blur(5px);
}
.neon_text::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, #00ffd0, #d2bbff, #ffd100, #00ffd0);
mix-blend-mode: multiply;
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
background-position-x: 0px;
}
100% {
background-position-x: 1000px;
}
}Codepen Preview:
Leave a Reply