Hover-эффекты для круглых элементов с использованием CSS Transitions

[ShpuntiK]

В опере половина только работает…

[Magir]

Пример 6 в последней Опере не работает. И еще очень неприятно, что hover срабатывает по границе прямоугольника, в который вписаны окружности.

[spmbt]

В 11.64 Опере тоже не срабатывает только 6-й пример, остальные работают. И все срабатывают по границе прямоугольника.

[yoyurec]

оперативно перевели!

[Haoose]

Симпатично.
Firefox 14.0.1 / Win 7
6 пример
Сначала выглядит так:

После наведения мыши уже нормально отображается.

[Doktor_Gradus]

Кстати, тоже очень клёвый эффект.

[Serator]

В 17 альфе все нормально отображается.

[memtew]

В Chrome 22.0.1229.0 dev-m все примеры отображаются корректно, спасибо за перевод.

[amureki]

Спасибо!
Маленькое личное пожелание: в таких постах люблю сначала увидеть результат (в данном случае, демо) и, если он того стоит, посмотреть реализацию.

[Alex_sik]

ie10 — все ок

[fritz321]

Все красиво, спасибо за статью — внедрю в магазине какую нибудь красивую кнопочку в этом стиле

[Anonym]

Это невероятно круто.

[david_mz]

Как обычно, в хроме на машине со слабым видеоускорителем половина примеров глючит:(

[fritz321]

у меня все хорошо идет, ноут довольно таки не мощный
21.0.1180.60 m

[david_mz]

Дело не в мощности ноута как таковой, дело именно в видеоускорителе. У меня древний чипсет, G31, и его видео это не тянет. А Хром тупо сваливает трансформацию на видеокарту, а уж как она там отрисуется, его не заботит:(

Вот тут был аналогичный случай: habrahabr.ru/post/147154/#comment_4959850 (и комменты рядом). Это не только у меня так.

[nabliker]

Очень оригинальные эффекты.
(Ссылка «Вернуться кстатье» в демонстрации не работает)

[Firz]

В таких вещах есть интересный вопрос: что проще, дать пользователю скачать n КБ картинок, либо гонять его машину(или планшет, а может вообще телефон с небольшим аккумулятором), прорисовывая это каждый раз.

[Rome]

Про планшет и смартфон можно вообще забыть, там известная проблема с хувером из-за touch. Там прикосновение — это нажатие. А хувер подразумевает наведение мыши.

[Firz]

Я подразумевал не ховер, а прорисовку на стороне пользователя.

[Jemeron]

Кодропс — всегда аппетитная пища для размышлений…

[CyberLight]

Огромное спасибо за перевод статьи! Статья большая и познавательная. Googel Chrome 22.0.1229.0 dev-m полет отличный. Все эффекты отрабатывают!

[Alex_sik]

Правда с тач интерфейсом, по моему, не юзабельно.