[Ликбез]
Форма входа
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » CSS анимация
CSS анимация
[1] chila [11.03.2014, 18:57]
Доброго времени суток. Была и есть готовая анимация, правда на flash, ничего сложного, вокруг надписи вращаются звезды. С приходом некоторых новых возможностей хочется отказаться от flash и сделать такую анимацию средствами css. Долго копаясь и экспериментируя, изначально получалось сделать вращение объекта только по кругу, после нескольких дней упорства, справедливость восторжествовала и звезда начала перемещаться по траектории овала. Код прилагаю:

Код

<div class="orbit">
   <div class="path"><img class="electron" src=".../star.png"></img></div>
  </div>

.orbit {
width:300px;
height:250px;
position: relative;
top: -30px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(70deg) rotateY(180deg);
}
   
                          
.path {
width:300px;
height:280px;
position: absolute;
-webkit-animation-name: pathRotate;
-webkit-transform-style: preserve-3d;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

                         
.electron {
position: absolute;
width:30px;
-webkit-animation-name: electronFix;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes pathRotate {
0% { -webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(-360deg); }
}    
                    
@-webkit-keyframes electronFix{
0% {-webkit-transform: rotateX(90deg) rotateY(0deg) scale(0.5); }
25%  {-webkit-transform: rotateX(90deg) rotateY(90deg) scale(0.7); }
50%  {-webkit-transform: rotateX(90deg) rotateY(180deg) scale(1); }
75%  {-webkit-transform: rotateX(90deg) rotateY(270deg) scale(1); }
100% {-webkit-transform: rotateX(90deg) rotateY(360deg) scale(0.5);}
}


код, временно, заточен под webkitовские браузеры, позже поправится. Основная задача так и не осталась решенной, возможно Вы поможете. Нужно чтобы, примерно 10 звезд, вращались вокруг надписи. Вышеприведенный код позволяет сделать такое только с одной звездой. Возможно, поможете поправить, заранее спасибо.
[2] likbezz [12.03.2014, 01:15]
chila,
Цитата chila, Вт, 11.03.2014, 18:57:45
Основная задача так и не осталась решенной, возможно Вы поможете. Нужно чтобы, примерно 10 звезд, вращались вокруг надписи. Вышеприведенный код позволяет сделать такое только с одной звездой. Возможно, поможете поправить, заранее спасибо.

Добрый.
Код
<div class="orbit">
     <div class="path"><img class="electron" src="http://s2.ucoz.net/a/_1/43.gif"></img></div>
</div>
<div class="orbit1">
     <div class="path"><img class="electron" src="http://s2.ucoz.net/a/_1/43.gif"></img></div>
</div>
<div class="orbit2">
     <div class="path"><img class="electron" src="http://s2.ucoz.net/a/_1/43.gif"></img></div>
</div>

<style type="text/css">
.orbit,.orbit1,.orbit2 {
width:300px;
height:250px;
position: relative;
top: -30px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(70deg) rotateY(180deg);
}
.orbit1{
   top:-280px;
   left:200px;
}
.orbit2{
   top:-530px;
   left:400px;
}
</style>


Или:
Код
<div class="orbitBox">
<div class="orbit">
    <div class="path"><img class="electron" src="http://s2.ucoz.net/a/_1/43.gif"></img></div>
</div>
<div class="orbit1">
    <div class="path"><img class="electron" src="http://s2.ucoz.net/a/_1/43.gif"></img></div>
</div>
<div class="orbit2">
    <div class="path"><img class="electron" src="http://s2.ucoz.net/a/_1/43.gif"></img></div>
</div>
</div>


Код
<style type="text/css">
.orbitBox{
  position: relative;
}

.orbit,.orbit1,.orbit2 {
width:300px;
height:250px;
position:absolute;
left:0;
top:0;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(70deg) rotateY(180deg);
}
.orbit1{
  top:0px;
  left:200px;
}
.orbit2{
  top:0px;
  left:400px;
}
</style>

---

А в общем - я бы просто сделал gif-ку и положил бы несколько раз абсолютом куда и как надо.
Это имхо, проще, кроссбаузерно.. и возможностей больше.
[3] chila [13.03.2014, 12:10]
)спасибо за помощь. Но в Вашем примере происходит смещение каждой картинки, т.е. движение получается по новой оси. Нашел выходи из этой ситуации путем задержки начала анимации каждой новой картинки - animation-delay: Ns; причем если значение положительное, то каждая картинка задерживалась на н секунд, а если установить отрицательное значение, то все стартанули как нужно))
[4] likbezz [13.03.2014, 20:48]
chila,
Цитата chila, Чт, 13.03.2014, 12:10:43
Но в Вашем примере происходит смещение каждой картинки

Мой ответ точно по вопросу)

Цитата chila, Чт, 13.03.2014, 12:10:43
причем если значение положительное, то каждая картинка задерживалась на н секунд, а если установить отрицательное значение, то все стартанули как нужно))

Можно и каждой отдельно прописать свою амплитуду ..
Можно и скриптом по любой траектории..
Но в итоге сделаете просто гифку )) (я бы так сделал)
Полная версия сайта