Наткнулся на интирестный сайт - https://daneden.me/animate/. Как реализованны вращающиеся шары вокруг названия ?
Комментарии: 36

CabinetAdmin 23 окт 2013, 15:06 Сообщение

На css3. Если надо выдернуть код, то как-то так:

Код: Выделить всё

*{margin:0;padding:0;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.particle{position:absolute;top:50%;left:50%;width:1rem;height:1rem;border-radius:100%;background-color:#00acff;background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3) 75%,rgba(0,0,0,0));box-shadow:inset 0 0 1px 1px rgba(0,0,0,.25);}
.particle--a{-webkit-animation:particle-a 1.4s infinite linear;-moz-animation:particle-a 1.4s infinite linear;-o-animation:particle-a 1.4s infinite linear;animation:particle-a 1.4s infinite linear;}
.particle--b{-webkit-animation:particle-b 1.3s infinite linear;-moz-animation:particle-b 1.3s infinite linear;-o-animation:particle-b 1.3s infinite linear;animation:particle-b 1.3s infinite linear;background-color:#dc50ff;}
.particle--c{-webkit-animation:particle-c 1.5s infinite linear;-moz-animation:particle-c 1.5s infinite linear;-o-animation:particle-c 1.5s infinite linear;animation:particle-c 1.5s infinite linear;background-color:#ffbf03;}
@-webkit-keyframes particle-a {
  0% {
   -webkit-transform: translate3D(-3rem,-3rem,0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  } 25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    -webkit-transform: translate3D(4rem, 3rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .75rem;
    height: .75rem;
    opacity: .5;
  }
  
  100% {
   -webkit-transform: translate3D(-3rem,-3rem,0); 
    z-index: -1;
  }
}

@-moz-keyframes particle-a {
  0% {
   -moz-transform: translate3D(-3rem,-3rem,0);
    z-index: 1;
    -moz-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    -moz-transform: translate3D(4rem, 3rem, 0);
    opacity: 1;
    z-index: 1;
    -moz-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .75rem;
    height: .75rem;
    opacity: .5;
  }
  
  100% {
   -moz-transform: translate3D(-3rem,-3rem,0); 
    z-index: -1;
  }
}

@-o-keyframes particle-a {
  0% {
   -o-transform: translate3D(-3rem,-3rem,0);
    z-index: 1;
    -o-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    -o-transform: translate3D(4rem, 3rem, 0);
    opacity: 1;
    z-index: 1;
    -o-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .75rem;
    height: .75rem;
    opacity: .5;
  }
  
  100% {
   -o-transform: translate3D(-3rem,-3rem,0); 
    z-index: -1;
  }
}

@keyframes particle-a {
  0% {
   transform: translate3D(-3rem,-3rem,0);
    z-index: 1;
    animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    transform: translate3D(4rem, 3rem, 0);
    opacity: 1;
    z-index: 1;
    animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .75rem;
    height: .75rem;
    opacity: .5;
  }
  
  100% {
   transform: translate3D(-3rem,-3rem,0); 
    z-index: -1;
  }
}

@-webkit-keyframes particle-b {
  0% {
   -webkit-transform: translate3D(3rem,-3rem,0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    -webkit-transform: translate3D(-3rem, 3.5rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   -webkit-transform: translate3D(3rem,-3rem,0); 
    z-index: -1;
  }
}

@-moz-keyframes particle-b {
  0% {
   -moz-transform: translate3D(3rem,-3rem,0);
    z-index: 1;
    -moz-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    -moz-transform: translate3D(-3rem, 3.5rem, 0);
    opacity: 1;
    z-index: 1;
    -moz-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   -moz-transform: translate3D(3rem,-3rem,0); 
    z-index: -1;
  }
}

@-o-keyframes particle-b {
  0% {
   -o-transform: translate3D(3rem,-3rem,0);
    z-index: 1;
    -o-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    -o-transform: translate3D(-3rem, 3.5rem, 0);
    opacity: 1;
    z-index: 1;
    -o-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   -o-transform: translate3D(3rem,-3rem,0); 
    z-index: -1;
  }
}

@keyframes particle-b {
  0% {
   transform: translate3D(3rem,-3rem,0);
    z-index: 1;
    animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  50% {
    transform: translate3D(-3rem, 3.5rem, 0);
    opacity: 1;
    z-index: 1;
    animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   transform: translate3D(3rem,-3rem,0); 
    z-index: -1;
  }
}

@-webkit-keyframes particle-c {
  0% {
   -webkit-transform: translate3D(-1rem,-3rem,0);
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.3rem;
    height: 1.3rem;
  }
  
  50% {
    -webkit-transform: translate3D(2rem, 2.5rem, 0);
    opacity: 1;
    z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   -webkit-transform: translate3D(-1rem,-3rem,0); 
    z-index: -1;
  }
}

@-moz-keyframes particle-c {
  0% {
   -moz-transform: translate3D(-1rem,-3rem,0);
    z-index: 1;
    -moz-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.3rem;
    height: 1.3rem;
  }
  
  50% {
    -moz-transform: translate3D(2rem, 2.5rem, 0);
    opacity: 1;
    z-index: 1;
    -moz-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   -moz-transform: translate3D(-1rem,-3rem,0); 
    z-index: -1;
  }
}

@-o-keyframes particle-c {
  0% {
   -o-transform: translate3D(-1rem,-3rem,0);
    z-index: 1;
    -o-animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.3rem;
    height: 1.3rem;
  }
  
  50% {
    -o-transform: translate3D(2rem, 2.5rem, 0);
    opacity: 1;
    z-index: 1;
    -o-animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   -o-transform: translate3D(-1rem,-3rem,0); 
    z-index: -1;
  }
}

@keyframes particle-c {
  0% {
   transform: translate3D(-1rem,-3rem,0);
    z-index: 1;
    animation-timing-function: ease-in-out;
  }
  
  25% {
    width: 1.3rem;
    height: 1.3rem;
  }
  
  50% {
    transform: translate3D(2rem, 2.5rem, 0);
    opacity: 1;
    z-index: 1;
    animation-timing-function: ease-in-out;
  }
  
  55% {
    z-index: -1;
  }
  
  75% {
    width: .5rem;
    height: .5rem;
    opacity: .5;
  }
  
  100% {
   transform: translate3D(-1rem,-3rem,0); 
    z-index: -1;
  }
}

Код: Выделить всё

<h1>Animate.css
    <span class="particle particle--c"></span>
    <span class="particle particle--a"></span>
    <span class="particle particle--b"></span>
</h1>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 24 окт 2013, 00:22 Сообщение

CabinetAdmin » Вчера, 16:06 писал(а):КОД: ВЫДЕЛИТЬ ВСЁ
Я как то хотел сделать вокруг того что Вы мне раньше посаветовали. И так,и сяк . И ни как. А как?
  • 0

romaamor 24 окт 2013, 00:26 Сообщение

CabinetAdmin » Вчера, 16:06 писал(а):<h1>Animate.css
    <span class="particle particle--c"></span>
    <span class="particle particle--a"></span>
    <span class="particle particle--b"></span>
</h1>
Как правельно вписать то что в шапке ?
Ну хочится мне чтобы вокруг надписи крутилось.....антенки... ( Даже для проверки на тест сайте )
  • 0

CabinetAdmin 24 окт 2013, 14:03 Сообщение

romaamor
Попробуй поставить после названия форума, примерно так:

Код: Выделить всё

<a href="{U_INDEX}">SatRay.ru
    <span class="particle particle--c"></span>
    <span class="particle particle--a"></span>
    <span class="particle particle--b"></span>
</a>
Правда будет не вокруг антенны, а вокруг надписи, чтобы вокруг антенны было, в css:

Код: Выделить всё

.particle{position:absolute;top:50%;left:50%;....
left:50%; поменяй на left:100%;.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 25 окт 2013, 00:10 Сообщение

Спасибо. :drink:
Звиняйте за тупые вопросы. :oops:
  • 0

eska 25 окт 2013, 07:17 Сообщение

romaamor
У вас глюк на сайте, каждую секунду у гостя обновляется страница
  • 0

romaamor 26 окт 2013, 00:44 Сообщение

eska » Вчера, 08:17 писал(а):У вас глюк на сайте, каждую секунду у гостя обновляется страница
Да ну на. С мозилы зашли ?

Блин, проверил. Даже ишак работает. Проверка в гугле на наличие вирусов и кретических ошибок , сказало что 15% ошибок кода. Где Вы такое нашли ? Млин, прейдется людей просить что бы отписывались. :(
  • 0

romaamor 26 окт 2013, 01:01 Сообщение

Млин, даже комп поставил на проверку. Вылезло типа такое окно -
Изображение
Час даже антевируса в активный режим включил. Пока молчит.
  • 0

GoDFaTHeR 26 окт 2013, 04:08 Сообщение

romaamor
с лисы гостем... все ок
ничего не обновляется
eska
проверяйте свой комп :)
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

GoDFaTHeR 26 окт 2013, 04:09 Сообщение

eska
или может на какой странице одной такое происходит? на главной все ок
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

CabinetAdmin 26 окт 2013, 06:13 Сообщение

romaamor » Сегодня, 03:44 писал(а):прейдется людей просить что бы отписывались.
Хром, лиса, опера - всё окей.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 29 окт 2013, 11:30 Сообщение

CabinetAdmin » 24 окт 2013, 15:03 писал(а):Попробуй поставить после названия форума, примерно так:
Все равно не получается. Только адрес двоится. :(
  • 0

eska 29 окт 2013, 11:51 Сообщение

Скорее всего администратор ставил такую же фишку, что и я, что бы автоматически перекидывало на страницу регистрации, и поставил в коде 0 секунд, колись :Bravo:
  • 0

CabinetAdmin 29 окт 2013, 13:55 Сообщение

romaamor
Как двоится? Не должно ничего двоится, может тег случайно открытым оставил или?...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!