Можно ли сделать так, чтобы мой нижний колонтитул был зафиксирован в центре, а текст продолжал мигать разными цветами? - PullRequest
Новая
       5

Можно ли сделать так, чтобы мой нижний колонтитул был зафиксирован в центре, а текст продолжал мигать разными цветами?

0 голосов
/ 03 декабря 2018

Это мой код нижнего колонтитула.Моя цель - зафиксировать нижний колонтитул в центре, а текст «добро пожаловать в tpopenhouse» продолжает мигать разными цветами 

}
.movement1 {
  /* footer movement*/
  
  height: 50px;
  background: #1976d2;
  position: relative;
  /*-webkit-animation: myfirst 1s 1; /* Safari 4.0 - 8.0 */
  
  -webkit-animation-direction: alternate;
  /* Safari 4.0 - 8.0 */
  
  animation: myfirst1 6s 100000;
  /*Time of animation and 5s and 100000 cycle of animation on refreshing*/
  
  animation-direction: alternate;
  */
}
<!-- Footer -->
<footer class="section  lighten-3 darken-2 white-text center " style="position:fixed;width: 80%;;bottom:0">
  <p class="flow-text movement1"> #TPOpenhouse & Stand To Win Prizes </p>
  <!-- Footer text -->
</footer>

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

BUGS BE GONE

В некоторых браузерах есть ошибка, которая препятствует запуску цветной анимации CSS.

Эту проблему можно обойти, включив альтернативный триггер анимации в начале анимации.

Это может быть что угодно, кроме цвета.В этом случае я добавил width:100% в качестве триггера на начальном этапе.

Вы можете увидеть эту ошибку в действии, удалив width:100% с начального шага. 

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: center;
  padding: 40px 10px;
  color: red;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    width: 100%;
    color: red;
  }
  25% {
    color: yellow;
  }
  50% {
    color: blue;
  }
  100% {
    color: green;
  }
}
<footer>#TPOpenhouse &amp; Stand To Win Prizes</footer>

Центрирование в CSS

Что касается центрирования, то это может быть просто.традиционный способ - просто использовать отступы.Современный способ заключается в использовании flex.Выбор за вами.

Пример Flex 

footer {
  position: fixed;
  height: 100px;
  width: 100%;
  bottom: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
<footer>#TPOpenhouse &amp; Stand To Win Prizes<footer>
0 голосов
/ 03 декабря 2018

Чтобы расположить центр нижнего колонтитула в нижней части, выполните следующие действия:

Ваш нижний колонтитул немного выше нижнего края страницы, поскольку вы применили цвет фона к элементу <p>, который имеет поле по умолчанию, поэтому применитеЦвет фона footer вместо <p>. 

footer {
    background: #1976d2;
    left: 50%;
    transform: translateX(-50%);
}

При применении свойств left и transform ваш нижний колонтитул также будет размещен в центре.

...