ZorNet.Ru — сайт для вебмастера » HTML и CSS » Замена слов предложений на анимации CSS

Замена слов предложений на анимации CSS

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

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

Все настраивается самостоятельно, где после настройки с последующим просмотром выполнимой задачи, что ставится от первого предложения. И как только до крайнего доходит, то идет небольшая пауза, это немного больше стандартной, что происходит перед новым предложение. И как все это происходит, то первая строка изначально появляется, и так все по кругу идет.

Где можно применить такой эффект?

Можно сделать как рекламное объявление, что изначально на небольшой отрезок времени на ресурсе присутствует. Но больше напоминает на презентацию нового материала, которое оповещает в красиво оформленном виде.

Такой обзор открывается при открытие страницы.

Приступаем к установке:

HTML

Код

<div id="rotate-words">
<div>Кинематографический, Анимированный Текстовый Эффект
<span>Someone</span></div>
<div>Идеально подходит для любого фильма
<span>Ни один. Никто</span></div>
<div>Петли для вечности
<span>Кто-нибудь</span></div>
<div>Презентация сайта Zornet.Ru
<span>Zornet.Ru</span></div>
<div>Кинематографический, Анимированный Текстовый Эффект
<span>Каждый</span></div>
<div>Идеально подходит для любого фильма
<span>Кто то</span></div>
<div>Петли для вечности
<span>Ни один. Никто</span></div>
<div>Простые CSS-трюки
<span>Кто то</span></div>
</div>

CSS

Код

body {
  background-color: #263c92;
  background-image: radial-gradient(#528bcc, #20226d);
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f9f4f4;
  text-align: center;
}

#rotate-words {
  max-width:395px;
  margin:auto;
  padding:75px 0;
  font-size:35px;
  text-transform:uppercase;
  font-family: 'Oswald', sans-serif;
}

#rotate-words span {
  display:block;
  height:48px;
  font-size:23px;
  text-transform:lowercase;
  opacity:.8;
  font-family: 'Rubik', sans-serif;
}

#rotate-words div {
  position:absolute;
  opacity:0;
  overflow:hidden;
  left:10vw;
  width:80vw;
  line-height:1.2em;
  animation: rotate-words 32s linear infinite 0s;
}

@keyframes rotate-words {
  0% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
  3% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(.9)}
  12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
  16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
  80% { opacity: 0}
  100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 4s}
#rotate-words div:nth-child(3) { animation-delay: 8s}
#rotate-words div:nth-child(4) { animation-delay: 12s}
#rotate-words div:nth-child(5) { animation-delay: 16s}
#rotate-words div:nth-child(6) { animation-delay: 20s}
#rotate-words div:nth-child(7) { animation-delay: 24s}
#rotate-words div:nth-child(8) { animation-delay: 28s}

@keyframes author {
  0% { opacity: 0; transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
  20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
  30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
  90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
  100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
}

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

Демонстрация

06 Декабря 2018 Загрузок: 1 Просмотров: 1068 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0