Как сделать анимацию колечками на кнопках, как у слинки?

Question

[Сергей Шашкин]

Вот так выглядит анимация в зуме и если убрать кнопку.

Как сделать анимацию колечками вокруг кнопки, как у слинки на javascript. пример по ссылке https://www.slinky.me/%D0%9C%D0%B0%D1%80%D0%B8%D1%...

Просьба объяснить нубу и начинающему дизайнеру.

Answer 1

[Миша Васильев]

.robov {
height: 42px;
width: 42px;
cursor: pointer;
border: 1px solid #BDC3E0;
border-radius: 44px;
background-image: url(//www.slinky.me/files/spritef.png);
background-position: -1px -89px;
text-indent: -9999px;
display: block;
-webkit-transform: rotate(0deg);
}

.robov:hover {
transform: scale(1);
-webkit-filter: contrast(1) sepia(0);
-webkit-transform: rotate(-900deg);
}

Дальнейшее чтение: www.w3schools.com/css/css3_2dtransforms.asp

(ссылкой промахнулся в первый раз)

UPD: а это расходящиеся круги

.robov:after {
top: 0;
left: 0;
padding: 0;
z-index: 1;
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}

.robov:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.robov:hover:after {
-webkit-animation: sonarEffect 1.1s ease-out 55ms infinite;
-moz-animation: sonarEffect 1.1s ease-out 55ms infinite;
animation: sonarEffect 1.1s ease-out 55ms infinite;
}

Comments

[Сергей Шашкин]

На джавескрипте как ? Копировал ксс и не сработало (((((((

[Миша Васильев]

На джаваскрипте долго и бессмылсенно. Сверху, кстати, вращение только. Щас добавлю в ответ расходящиеся круги.

[Сергей Шашкин]

@vasilyev цвет тоже можно будет менять ?

[Сергей Шашкин]

@vasilyev Всё равно не выходит. Не отображается движнеие

[Миша Васильев]

@shaskin jsfiddle.net/gs37M вот, короче. Дальше сами читайте.

[Сергей Шашкин]

@vasilyev Ура!!! Теперь получилось. наконец-то спасибо