Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <title>Заголовок документа</title> <head> <style> div { background-color: #1c87c9; color: #fff; text-align: center; } p { display: inline-block; padding-top: 100%; -moz-animation: marquee 5s linear infinite; -webkit-animation: marquee 5s linear infinite; animation: marquee 5s linear infinite; } @-moz-keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -100%); } } @-webkit-keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -100%); } } @keyframes marquee { 0% { -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -moz-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } } </style> </head> <body> <div> <p>Вертикально прокручиваемый текст без использования тега marquee.</p> </div> </body> </html>