CSS Stroke Animation | Animated Text Background With CSS Stroke | Pure Html & CSS
- MultiWebPress
- August 24, 2021
- No Comments
Hello readers, today in this blog you’ll learn how to create CSS Stroke Animation using pure HTML & CSS only. This program is for beginners who really want to learn new stuff using HTML & Css. Recently, I have shared a Typing text animation. Now it’s time to create an Animated text background with CSS Stroke effect using HTML & CSS.
How cool would it look if your text has some background effect or animation? Yes of course it will look very cool and awesome and it will make your website more creative.
To create this amazing animated text we have used some easiest methods such as CSS background-clip property, It will specify how far the background-color should be from the element.
Background-clip – The foreground text painted within the background.
In this we need to use @keyframes, which will help us to specify what should happen at specific animation moments during style waypoints along the animation sequence.
As you can see in the above images, there is text showing a CSS Stroke text with an animated background. This will make your website very cool and awesome. There are numerous ways to create animation, one of which is the CSS Stroke text with animated background.
If you’re having difficulty in understanding what is written in this blog. You can also watch the full video just scroll down below.
Video tutorial of CSS Stroke text with an animated background
You may also like:
- Responsive Navigation bar | Header in Html, CSS & Javascript?
- How to create footer in pure Html & CSS?
- Typing Text Animation CSS | Typewriter text effect CSS | Pure HTML & CSS
- How to install Bootstrap using CDN Link and Compiled bootstrap CSS manually?
- CSS Stroke Animation | Animated Text Background With CSS Stroke | Pure Html & CSS
I believe you like this CSS Stroke text with an animated background. You can also use this animation CSS text on your website or any project you want. And you can take this CSS Animation stroke to the next level with your creativity. Also I want you all to comment below if you have any question in your mind. Let’s move to the next step.
If you like the CSS Stroke text with an animated background and want to get codes for this, you just need to scroll down.
CSS Stroke text with an animated background [Source Codes]
To create this small task (CSS Stroke text with an animated background). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Let’s create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with .html extension
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">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="text">Multiwebpress</h1>
</body>
</html>
Next, create a Cascading Style Sheet(CSS) with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with .css extension
CSS
*{
margin: 0;
padding:0;
box-sizing: border-box;
background: #eee;
display:grid;
place-items:center;
min-height: 75%;
}
.text{
font-size: 14vh;
font-family: cursive;
-webkit-text-stroke: transparent 1.5vw;
text-transform: uppercase;
letter-spacing: 2vw;
background:linear-gradient(90deg, #c287e8 50%, #000 50.1%);
background-size: 40px;
-webkit-background-clip: text;
background-clip: text;
color:#eee;
text-shadow: 0 10px 25px rgba(0, 0, 0, .5);
animation: text 1s linear infinite;
}
@keyframes text{
0%{
background-position-x: 0px;
}
100% {
background-position-x: -40px;
}
}
After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created a CSS Stroke text with an animated background using HTML & CSS.
If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on instagram.
Thanks in Advance!
SHARE
Categories
- Recommended Posts (17)
- HTML & CSS (15)
- WordPress (10)
- CSS Buttons (3)
- Navigation Bar (2)
- Social Media Buttons (2)
- Templates (2)
- Footer (1)