Файлы Скрипты и модификации

Изменяющийся текст

Описание:
Интересный пример создания изменяющихся слов. То есть, сначала было одно слово, после на его месте появилось другое и так далее. Этот самый пример изменения слов будем создавать без применения JS, на чистом HTML CSS, где основа будет CSS анимация. HTML:
Code
<div class="rw-sentence">  
  <span>Заголовок, если надо</span>  
  <div class="rw-words">  
  <span>слово 1</span>  
  <span>слово 2</span>  
  <span>слово 3</span>  
  <span>слово 4</span>  
  </div>  
</div>

Соответственно, если поняли, изменяться будут слова, под классом rw-words, то есть вместо слова слово 1 вместо него появится слово 2, и так далее по кругу.
CSS
Сначала украсим заголовок, если он будет вам нужен:
Code
.rw-sentence span{  
  color: #3B86F8; /* Цвет текста */  
  font-size: 30pt; /* Размер шрифта */  
}

Теперь переходим к самим изменяющимся словам.
Code
.rw-words span{  
  position: absolute; /* Позиционирование */  
  opacity: 0; /* Отсутствие прозрачности */  
  overflow: hidden; /* Все лишние будет удалено */  
  width: 100%; /* Ширина */  
  color: #A4A5A4; /* Цвет текста */  
}  

.rw-words span a{  
  color: #A4A5A4; /* Цвет ссылок */  
}

Теперь что с анимацией. Если задать одну и ту же анимацию просто тегу <span>, то слова будут просто напросто накладываться друг на друга. Поэтому, придется использовать псевдокласс :nth-child, а так же задавать вручную параметры времени, когда включать анимацию.
Code
.rw-words span{  
  -webkit-animation: rotateWordsSecond 18s linear infinite 0s;  
  -moz-animation: rotateWordsSecond 18s linear infinite 0s;  
  -o-animation: rotateWordsSecond 18s linear infinite 0s;  
  -ms-animation: rotateWordsSecond 18s linear infinite 0s;  
  animation: rotateWordsSecond 18s linear infinite 0s;  
}  

.rw-words span:nth-child(2) {  
  -webkit-animation-delay: 3s;  
  -moz-animation-delay: 3s;  
  -o-animation-delay: 3s;  
  -ms-animation-delay: 3s;  
  animation-delay: 3s;  
}  
.rw-words span:nth-child(3) {  
  -webkit-animation-delay: 6s;  
  -moz-animation-delay: 6s;  
  -o-animation-delay: 6s;  
  -ms-animation-delay: 6s;  
  animation-delay: 6s;  
}  
.rw-words span:nth-child(4) {  
  -webkit-animation-delay: 9s;  
  -moz-animation-delay: 9s;  
  -o-animation-delay: 9s;  
  -ms-animation-delay: 9s;  
  animation-delay: 9s;  
}

А так же параметры анимации под все браузеры:
Code
@-webkit-keyframes rotateWordsSecond {  
  0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@-moz-keyframes rotateWordsSecond {  
  0% { opacity: 1; -moz-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@-o-keyframes rotateWordsSecond {  
  0% { opacity: 1; -o-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@-ms-keyframes rotateWordsSecond {  
  0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@keyframes rotateWordsSecond {  
  0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}

готово!
Источник: Неизвестен
Загрузка данных...
Материал «Изменяющийся текст» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Наш опрос
Сколько вам лет?
193 ответа
Архив
Статистика
Онлайн всего: 2
Гостей: 2
Пользователей: 0
Никого нету
Сегодня нас посетили
Никто ещё не посетил
© 2012-2020 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz
Внимание! На сайте ведутся технические работы.
Некоторые изображения и файлы могут быть недоступны