Salve,
stò provando a sostituire il tag marquee con uno stile css3.
Cercando sul web ho trovato un codice abbastanza semplice che funziona.
Il mio problema è che nella stessa pagina devono stare 2 div di cui uno deve scorrere verso sinistra e l'altro verso l'altro.
Di seguito il codice che stò usando:
codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title> <!-- <link href="real-world.css" rel="stylesheet" type="text/css"> --> </head> <body> <style> .marquee-sinistra { height: 40px; overflow: hidden; position: relative; } .marquee-sinistra div { display: block; width: 200%; height: 40px; position: absolute; overflow: hidden; -webkit-animation: marquee 4s linear infinite; -moz-animation: marquee 4s linear infinite; -ms-animation: marquee 4s linear infinite; -o-animation: marquee 4s linear infinite; animation: marquee 4s linear infinite; } .marquee span { float: left; width: 50%; } .marquee-sinistra div:hover { -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } @-moz-keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } @-ms-keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } @-o-keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } .marquee-su { height: 40px; overflow: hidden; position: relative; } .marquee-su div { display: block; width: 200%; height: 40px; position: absolute; overflow: hidden; -webkit-animation: marquee 4s linear infinite; -moz-animation: marquee 4s linear infinite; -ms-animation: marquee 4s linear infinite; -o-animation: marquee 4s linear infinite; animation: marquee 4s linear infinite; } .marquee span { float: left; width: 50%; } .marquee-su div:hover { -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes marquee-su { 0% { top: 0; } 100% { top: -100%; } } @-moz-keyframes marquee-su { 0% { top: 0; } 100% { top: -100%; } } @-ms-keyframes marquee-su { 0% { top: 0; } 100% { top: -100%; } } @-o-keyframes marquee-su { 0% { top: 0; } 100% { top: -100%; } } @keyframes marquee-su { 0% { top: 0; } 100% { top: -100%; } } </style> <div class="marquee-sinistra"> <div> <span>You spin me right round, baby. Like a record, baby.</span><br> <span>You spin me right round, baby. Like a record, baby.</span> </div> </div> <div class="marquee-su"> <div> <span>You spin me right round, baby. Like a record, baby.</span><br> <span>You spin me right round, baby. Like a record, baby.</span> </div> </div> </body> </html> se provate a far interpretare questo codice dal browser vedrete che i 2 div scorrono nella stessa direzione. Come posso risolvere? grazie.
Rispondi quotando
