Красивая анимация знаков, которая появится виде слово или обозначение при входе на страницу или сайт. Так как 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, что закреплен за материалом, как появление знаков при открытие страниц.
Демонстрация
