Create Responsive Running Slideshow Using HTML And CSS

Its features:

  • It is completely responsive.

  • The back image has a length of 962 pixels and a width of 167 pixels.

  • It can be used as an advertising banner.

  • If you want, you can increase the speed of the image with the help of CSS.

Try to create like yourself by following the codes below :


Step 1) Add to folder :
First make one folder and put an images that you like.
Step 2) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1">
Step 3) Add to html :
<div class="hero"> <h1></h1> </div>
Step 4) Add to css :
.hero{ margin-top:10px; } .hero h1{ width:92%; height:164px; margin-left:4%; margin-top:0px; border:1px solid red; color:transparent; -webkit-text-stroke:0.2px #9b870c; background:url(hero01.png); -webkit-background-clip:image; background-position:0 0; animation:back 20s linear infinite; } @keyframes back{ 100%{ background-position:2000px 0; } }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.