Вращяющиеся шары

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
romaamor

Вращяющиеся шары

romaamor 22 окт 2013, 20:43 Сообщение

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

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

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>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

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

CabinetAdmin » Вчера, 16:06 писал(а):КОД: ВЫДЕЛИТЬ ВСЁ

Я как то хотел сделать вокруг того что Вы мне раньше посаветовали. И так,и сяк . И ни как. А как?

Аватара пользователя
romaamor

Re: Вращяющиеся шары

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>

Как правельно вписать то что в шапке ?
Ну хочится мне чтобы вокруг надписи крутилось.....антенки... ( Даже для проверки на тест сайте )

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

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%;.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

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

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

Аватара пользователя
eska

Re: Вращяющиеся шары

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

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

Аватара пользователя
romaamor

Re: Вращяющиеся шары

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

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

Да ну на. С мозилы зашли ?

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

Аватара пользователя
romaamor

Re: Вращяющиеся шары

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

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

GoDFaTHeR

Re: Вращяющиеся шары

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

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

GoDFaTHeR

Re: Вращяющиеся шары

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

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

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

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

romaamor » Сегодня, 03:44 писал(а):прейдется людей просить что бы отписывались.

Хром, лиса, опера - всё окей.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

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

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

Все равно не получается. Только адрес двоится. :(

Аватара пользователя
eska

Re: Вращяющиеся шары

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

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

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

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

romaamor
Как двоится? Не должно ничего двоится, может тег случайно открытым оставил или?...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость