Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Анимация букв с помощью CSS
Анимация букв с помощью CSS
workman
Дата: Суббота, 16.01.2016, 18:59 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


Нашел как-то 15 минут свободного времени и правда на скорую руку написал вот такой кодик, на базе логотипа Zornet
Прошу прощения сразу за не качественный скрин,просто делал его как раз в песочнице.



А вот и сами коды которые отвечают за такое. Если кто понимает, то может отредактировать полностью под себя.

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>

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

@-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)}
}

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

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

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

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

#box5 {
  -webkit-animation:aniload 5s;
  -moz-animation:aniload 5s;
  -ms-animation:aniload 5s;
  -o-animation:aniload 5s;
  animation:aniload 5s;
}
#box6 {
  -webkit-animation:aniload 6s;
  -moz-animation:aniload 6s;
  -ms-animation:aniload 6s;
  -o-animation:aniload 6s;
  animation:aniload 6s;
}


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

Сообщение отредактировал workman - Суббота, 16.01.2016, 19:05
Kosten
Дата: Суббота, 16.01.2016, 19:14 | Сообщение # 2
Администраторы
Сообщений:12657
Награды: 38


workman, круто!

workman
Дата: Суббота, 16.01.2016, 19:27 | Сообщение # 3
Vip
Сообщений:1576
Награды: 7


Kosten, А такое? )) biggrin biggrin biggrin



Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
tsakonter
Дата: Суббота, 16.01.2016, 19:29 | Сообщение # 4
Пользователи
Сообщений:150
Награды: 0


Вообще первую не понял, вторая мне понятно, не ново.
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Анимация букв с помощью CSS
Страница 1 из 11
Поиск: