ZorNet.Ru — сайт для вебмастера » HTML и CSS » Бегущая строка HTML влево на чистом CSS

Бегущая строка HTML влево на чистом CSS

Бегущая строка HTML влево на чистом CSS
Этот бегущая строка, которая выполнена на чистом CSS, где сами можете задавать скоростной режим вашей небольшой заметки, а также ключевым словам. Так как можно выставить одно описание и поставить его под переход на другую страницу. Здесь изначально видим, что по своим функциям эта строка больше напоминает навигацию.

Здесь на не нужно подключать скрипты и также без JS все отлично работает. Вероятно только стиль самой подачи, ведь все выполнено в простой стилистике. А нам нужно, чтоб строка была заметна, что безусловно можно добавить красок по дизайн, и также не исключаю шрифтовые кнопки.

Установка:

HTML

Код
<div class="anukene_dsagus">
  <div class="asusma_keting"><span>Новости</span></div>
  <div class="agcopais_ulasgad">
  <div class="tickercontainer">
  <div class="usemob">
  <div class="coevenedas">
  <span>  
  <i class="fas">»</i><a href="#">Деловые сайты: наказывает ли их Google?</a>  
  <i class="fas">»</i><a href="#">Как оптимизировать ваш сайт для мобильного SEO</a>  
  <i class="fas">»</i><a href="#">Интересное адаптивное flexMenu на jQuery</a>  
  <i class="fas">»</i><a href="#">
SEO для электронной коммерции</a>  
  <i class="fas">»</i><a href="#">Как писать контент, дружественный к SEO</a>  
  <i class="fas">»</i><a href="#">Ускорению вашего изображения тяжелого веб-сайта</a>  
  <i class="fas">»</i><a href="#">Краткое руководство</a>  
  <i class="fas">»</i><a href="#">8 проверенных способов увеличить посещаемость блога</a>
  </span>
  </div>
  </div>

CSS

Код
.anukene_dsagus{
height:40px;
margin:15px 0;
clear:both;
position:relative}

.anukene_dsagus .asusma_keting{
float: left;
background: #0e61bb;
line-height: 40px;
height: 40px;
padding: 0 1px 0 7px;
color: #f5eded;
position: relative;
z-index: 2;
font-weight: 700;
text-align: center;
width: 133px;
}

.anukene_dsagus .asusma_keting:after{
left: 100%;
top: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgb(255 255 255 / 0%);
border-left-color: #0e61bb;
border-width: 20px;
margin-top: -20px;
z-index: 1;
border-left-width: 10px;
}

.agcopais_ulasgad{
background: #f7f4f4;
height: 38px;
line-height: 38px;
margin: 0;
border: 1px solid #ccc3c3;
padding: 0 2px 0 10px;
margin-left: 130px;
position: relative;
z-index: 1;
overflow: hidden;
}

.tickercontainer{
height:38px;
margin:0;
padding:0;
overflow:hidden}

.tickercontainer .usemob{
position:relative;
height:38px;
overflow:hidden}

.anukene_dsagus .asusma_keting span{
z-index:2;
position:relative}

@-webkit-keyframes scroll{
0%{
-webkit-transform:translate(0,0);
transform:translate(0,0)}

100%{
-webkit-transform:translate(-100%,0);
transform:translate(-100%,0)}

}

@-moz-keyframes scroll{
0%{
-moz-transform:translate(0,0);
transform:translate(0,0)}

100%{
-moz-transform:translate(-100%,0);
transform:translate(-100%,0)}

}

@keyframes scroll{
0%{
transform:translate(0,0)}

100%{
transform:translate(-100%,0)}

}

.fas{
margin-left:21px;
margin-right:5px}

.coevenedas{
display:block;
width:100%;
white-space:nowrap;
overflow:hidden}

.coevenedas span{
display:inline-block;
padding-left:100%;
-webkit-animation:scroll 41s infinite linear;
-moz-animation:scroll 41s infinite linear;
animation:scroll 41s infinite linear}

Как можно заметить, что не чего сложного нет, где каркас выставляем по месту, где будет полоса в движение, но стили в CSS, там и будет основная настройка, если вам она потребуется в плане оформления.

Демонстрация
2020-09-24 Загрузок: 2 Просмотров: 446 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2020-10-11 12:221
0
Простой способ, где создаем бегущее строку, что идет слева на право. Этот элемент, что делаем бегущей строкой, и его содержимое обертываем в дополнительный span.

HTML

Код
<div class="desamiu-dsanug"><span>Здесь ключевое слова идет слева на право</span></div>


CSS

Код
.desamiu-dsanug{text-align:left;width:100%;overflow:hidden;white-space: nowrap;}
.desamiu-dsanug span { display:inline-block;width:100%;text-indent:0;animation: desamiu-dsanug 10s linear infinite}
.desamiu-dsanug span:hover{animation-play-state: paused}
@keyframes desamiu-dsanug {
0%  { transform: translate(100%, 0); }
100% { transform: translate(-100%, 0); }
}
@media only screen and (max-width: 440px) {
.desamiu-dsanug span{animation:none;padding-left:0}
}
avatar