Лента новостей бегущей строкой на CSS3
Это бегущая лента на CSS, которая актуальна для новостных сайтов или для разных объявлений, что создана в красивом оформлении под любую тематику. Возможно вы уже не раз сталкивались с несколькими веб-сайтами, которые предоставляют самые свежие новости читателям. Где можно самые актуальные новости разместить в ленту, что делается просто, но его простота делает его еще более желанным. В конце концов, анимация привлекает внимание читателя к тикеру, где при открытии страницы, лента будет всегда замечена.
Весь сам дизайн просто выполнен великолепно, где в начале можно разместить ключевое слово или название, что описание будет идти в самой ленте. Это сделано для того, чтоб можно было самый актуальный материал вывести на главную страницу, где только считаю один минус, что все нужно в ручную прописывать, и где-то лента идет на одну новостную тему, а другие могут сразу захватить несколько тем одновременно.
Так выглядит лента после установочного процесса:
HTML
Код
Код <div class="vanaudie-ncesacos"> <div class="kobndam-eneaks"> <div class="cesempa-vadekob"> News </div> <marquee id="ticker" class="sonstan-cemaben"> Здесь идет описание. </marquee> </div> </div>
CSS
Код
Код .vanaudie-ncesacos {
max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
height: 100%;
}
.kobndam-eneaks {
display: grid;
grid-template-columns: 1fr 10fr;
grid-gap: 20px;
align-items: center;
font-size: 25px;
background: #5F2580;
box-shadow: 4px 8px 5px 0 rgba(0, 0, 0, .5);
}
.sonstan-cemaben {
padding: 20px 20px;
color: white;
}
.cesempa-vadekob {
text-align: center;
text-transform: uppercase;
padding: 20px;
background-color: #48036F;
color: white;
}
Что мы делаем, так это то, что мы помечаем наши элементы списка и отслеживаем следующую запись или данные в нашем неупорядоченном списке и отправляем текущий активный элемент, который состоит виде информаций.
Демонстрация
| 
