Имитация электронного табло на CSS

Если вы создаете сайт спортивной тематики или сайт с расписанием авиарейсов, то вам может понадобиться имитация электронного табло. Внизу представлены несколько вариантов. Вы можете ввести ваш текст в строку ввода в реальном времени, чтобы изменить текст по умолчанию.
Теперь приведем css-style, использованный для этих трех примеров:

.containers{
width:100%;
margin: 0 auto;
}
input{
test-align:center;
width:100%;
height:24px;
font-size:17px;
margin-top:20px;
text-align:center;
}
/****** Lines *******/
.line {
overflow:hidden;
width:100%;
border:2px solid #dddddd;
box-shadow:0px 5px 5px 3px rgba(0,0,0,0.3);
display:block;
margin-top:10px;
border-radius:2px;
position:relative;
}
.line .line_cover{
width:100%;
height:100%;
position:absolute;
z-index:2;
background:url(/design/led_bg.png);
}
.line .line_text{
width:100%;
height:100%;
position:absolute;
z-index:1;
padding-top:20px;
}
/****** Line 1 *******/
#l1.line{
height:70px;
background:rgb(50,80,50);
}
#l1.line .line_text{
font-size:60px;
font-weight:bold;
color:#00ff00;
-webkit-animation: l1_animation 10s linear infinite;
-moz-animation: l1_animation 10s linear infinite;
}
@-webkit-keyframes l1_animation {
0%{left:100%;}
100%{left:-100%;}
}
@-moz-keyframes l1_animation {
0%{left:100%;}
100%{left:-100%;}
}
/****** Line 2 *******/ 
#l2.line{
height:70px;
background:rgb(90,60,50);
}
#l2.line .line_text{
font-size:60px;;
position:absolute;
color:#ffb400;
font-weight:bold;
-webkit-animation: l2_animation 5s linear infinite;
-moz-animation: l2_animation 5s linear infinite;
}
@-webkit-keyframes l2_animation {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
} 
@-moz-keyframes l2_animation {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
} 
/****** Line 3 *******/ 
#l3.line{
height:70px;
background:rgb(90,90,90);
}
#l3.line .line_text{
font-size:60px;;
position:absolute;
color:#ffb400;
font-weight:bold;
font-family:"Trebuchet MS", Helvetica, sans-serif;
-webkit-animation: l3_animation 5s linear infinite;
-moz-animation: l3_animation 5s linear infinite;
}
@-webkit-keyframes l3_animation {
0% {color: rgb(0,0,255); }
20% {color: rgb(0,255,255); }
40% {color: rgb(255,0,0); }
60% {color: rgb(255,255,0); }
80% {color: rgb(255,255,255); }
100% {color: rgb(0,0,255); }
} 
@-moz-keyframes l3_animation {
0% {color: rgb(0,0,255); }
20% {color: rgb(0,255,255); }
40% {color: rgb(255,0,0); }
60% {color: rgb(255,255,0); }
80% {color: rgb(255,255,255); }
100% {color: rgb(0,0,255); }
} 

Также вам понадобится скрипт:

jQuery(function(){
jQuery('input').keyup(function()
{ jQuery(this).next().find('.line_text').html(this.value)}).keyup();
})

И конечно же html-код:
<div class="containers"> <input placeholder = "type here" value="UpByte.Net"> <div class="line" id="l1"> <div class="line_text"></div> <div class="line_cover"></div> </div> <input placeholder = "type here" value="Счет 5 : 0"> <div class="line" id="l2"> <div class="line_text" style="text-align:center;"></div> <div class="line_cover"></div> </div> <input placeholder = "Введите Ваш текст" value=""> <div class="line" id="l3"> <div class="line_text" style="text-align:center;padding-top:0px;"></div> <div class="line_cover"></div> </div> </div> И одна единственная картинка для фона, которую можно забрать здесь. Пример реализован по материалам, опубликованным здесь.