Skip to content
Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Janma Kundali
  • Gadgets
    • Phones
    • Android Phones

Categories

  • Artificial Intelligence (1)
  • Automobiles (12)
    • Cars (7)
  • Blog (107)
    • Poems (2)
    • Space (2)
  • Command (2)
  • Education (2)
  • Entertainment (4)
  • Gadgets (9)
    • Phones (8)
      • Android Phones (4)
  • HTML Templates (11)
  • IT Training Institutes (1)
  • Lifestyle (4)
  • News (396)
  • Others (23)
  • Programming (296)
    • API (16)
    • CSS (83)
    • Database (4)
    • Hosting (1)
    • HTML (37)
    • JavaScript (117)
      • JQuery (27)
      • ReactJS (7)
    • PHP (116)
  • Python (3)
  • recipes (1)
  • SEE Result (1)
  • Server (3)
  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Janma Kundali
  • Gadgets
    • Phones
    • Android Phones
Close

Search

CSS

Create Marquee in webpage using CSS

By Admin
February 15, 2021 1 Min Read
0

Marquee is an animation effect for web pages used to create horizontal or vertical scrolling text and images. The <marquee> element of HTML is not a standard-compliant, ie the element is not part of the W3 HTML specifications.

For creating a marquee using CSS, we have to use the CSS animation property together with the @keyframes rule.

Source Code :

<style>
  body{
    background:#000;
    overflow-x: hidden;
  }
  .marquee{
    color:#fff;
    font-size: 3em;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;    
    transform:translateX(100%);
    animation: cssmarquee 25s linear infinite;
  }
  
  @keyframes cssmarquee {
    0%{ 
      transform: translateX(100%);       
    }

    100%{
      transform: translateX(-100%); 
    }
  }
</style>
  
<h1 class="marquee">
  CSS Marquee Goes Here ..... Text Scrolling 
</h1>

 

Follow this video for complete guidance :

Tags:

CSSmarquee
Author

Admin

Follow Me
Other Articles
Previous

Bulb On/Off Effect using JavaScript

Next

Simple News Ticker using JQuery Plugin

No Comment! Be the first one.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • What REALLY Happens When You Type a URL and Press Enter?
  • Balen Shah UN Speech 2026: Full Text & Audio UN General Assembly
  • inDrive Provides Safe Driving Training and Certificates to 1,500+ Driver Partners in Nepal
  • NEPSE’s Data Center Faces Technical Issue: Today’s Share Trading Suspended
  • KIST Teaching Hospital Ranks First in Public Health Office’s Evaluation

Tags

adsense ai animation animation using HTML and CSS API blog calculator chatgpt clock Cryptocurrency CSS css animation custom file manager Cyber Security design Email Facebook featured filemanager free template google htaccess HTML image Instagram interview javascript JQuery NADA AutoShow NADA Auto Show 2024 password PHP Progressive Web App QR random react reactjs Rotate seo travel Twitter vpn youthforum youthsforum youtube

About Us

At Youths Forum, we are passionate about sharing knowledge that empowers students, educators, professionals, and technology enthusiasts.

Our Mission

Our mission is simple: to make technology and education accessible, understandable, and beneficial for everyone. We strive to create content that helps our readers learn new skills and stay updated with industry developments.

RSS RSS

  • What REALLY Happens When You Type a URL and Press Enter? Admin
  • Balen Shah UN Speech 2026: Full Text & Audio UN General Assembly Admin
  • inDrive Provides Safe Driving Training and Certificates to 1,500+ Driver Partners in Nepal Admin

Quick Links

  • Stock Market Live
  • Parliament Election 2082
Copyright 2026 — Youths Forum. All rights reserved. Blogsy WordPress Theme