Лента новостей бегущей строкой на 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; } Что мы делаем, так это то, что мы помечаем наши элементы списка и отслеживаем следующую запись или данные в нашем неупорядоченном списке и отправляем текущий активный элемент, который состоит виде информаций. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
