Here's an example of a Scrolling Text With Html & CSS | CSS Marquee.
1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS files to your HTML document.
<!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>How to Create Scrolling Text With Html and CSS | CSS Marquee>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
2. Inside the body tag, create a container element with a class of "container ".
<div class="container scroll-right">
<span>New Articles</span>
<marquee behavior="" direction="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eum quia error placeat recusandae hic, nostrum doloremque nihil ducimus repellendus ea eius architecto doloribus sed.</marquee>
</div>
3. Create a CSS file and style your Application Header to make it look nice. You can use the following code as a starting point:
*{ margin: 0; padding: 0;}
body{ background: #0084ff; font-family: sans-serif; width: 80%; margin: 0 auto;}
.container{ display: flex; align-items: center; background: #eee; margin-top: 40px;}
.container span{ position: relative; display: inline-block; flex-shrink: 0; padding: 8px 20px; background: #f00;
color: #fff; overflow: hidden; clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);}
.scroll-left span{ clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}
4. Save the file and open it in a web browser to see your Scrolling Text.
Html Code
<div class="container scroll-right">
<span>New Articles</span>
<marquee behavior="" direction="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eum quia error placeat recusandae hic, nostrum doloremque nihil ducimus repellendus ea eius architecto doloribus sed.</marquee>
</div>
Css Code
*{ margin: 0; padding: 0;}
body{ background: #0084ff; font-family: sans-serif; width: 80%; margin: 0 auto;}
.container{ display: flex; align-items: center; background: #eee; margin-top: 40px;}
.container span{ position: relative; display: inline-block; flex-shrink: 0; padding: 8px 20px; background: #f00;
color: #fff; overflow: hidden; clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);}
.scroll-left span{ clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}