html marque tag | animation in html #html #htmlcss

Html marque tag

The <marque> tag was introduced in an older version of HTML called HTML 3.2, but it is not supported in modern HTML standards like HTML5.

However, if you still want to create a scrolling text effect similar to what the <marque> tag provided, you can achieve it using CSS animations or JavaScript. Here's an example using CSS animation:

<style>

  .marquee {

    width: 100%;

    white-space: nowrap;

    overflow: hidden;

    animation: marquee 10s linear infinite;

  }


  @keyframes marquee {

    0% { transform: translateX(100%); }

    100% { transform: translateX(-100%); }

  }

</style>


<div class="marquee">

  This is a scrolli

ng text.

</div>


In this example, a CSS animation is defined using the @keyframes rule, which specifies the animation's keyframes (start and end points). The .marquee class applies the animation to the <div> element, making the text scroll horizontally. Adjust the animation property to change the duration and timing function of the animation.


Remember that this approach uses CSS animations, so older browsers may not fully support it. If you require wider browser compatibility or more complex behavior, you can utilize JavaScript libraries or frameworks specifically designed for scrolling text effects.

Comments

Popular posts from this blog

html audio tag | audio in html | how to add audio in html #html #htmlcss