• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимированный текст при открытие страницы (Создать анимированный текст на сайте при появление на сайте)
Анимированный текст при открытие страницы
Kosten
Четверг, 20 Июня 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Красивая анимация знаков, которая появится виде слово или обозначение при входе на страницу или сайт. Так как CSS3 анимационные функции включают в себя функции, похожие на эффекты перехода и многое другое. В этом материале поговорим о создании анимации, которая поставляется с CSS3.

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



HTML

Код
<div class="sinir">
  <div class="box" id="box1">Z</div>
  <div class="box" id="box2">O</div>
  <div class="box" id="box3">R</div>
  <div class="box" id="box4">N</div>
  <div class="box" id="box5">E</div>
  <div class="box" id="box6">T</div>
  <div class="box" id="box7">.</div>
  <div class="box" id="box8">R</div>
<div class="box" id="box9">U</div>
</div>

CSS

Код
body{background-color:#5d216c;width:950px;margin:100px auto;}
.box {
  width:auto;
  height:1100px;
  background-color:#6a2e79;
  margin:0 auto;
  float:left;
  font-size:100px;
  padding:20px;
  color:#fff;
}

/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}

/* Step 2: Call the Animation */
#box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

#box2 {
  -webkit-animation:aniload 1s;
  -moz-animation:aniload 1s;
  -ms-animation:aniload 1s;
  -o-animation:aniload 1s;
  animation:aniload 1s;
}

#box3 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

#box4 {
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;
}

#box5 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

#box6 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

#box7 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

#box8 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

#box9 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

.copyright{width:100%;height:auto; background-color:#171717;color:#aaa;position:fixed; bottom:0px;font:  12px Arial;padding:5px;opacity:0.4;border-top:#a00 2px solid;z-index:99999;left:0px;right:0px;}.copyright:hover{opacity:1}

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

Демонстрация
Прикрепления: 5303946.png (15.0 Kb) · css-animasyon-y.zip (3.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимированный текст при открытие страницы (Создать анимированный текст на сайте при появление на сайте)
  • Страница 1 из 1
  • 1
Поиск: