Не нравятся результаты поиска? Попробуйте другой поиск!

Вращаем элементы при наведении на чистом CSS


     25.07.2013    CSS Сниппеты    3826

Простой и красивый эффект при наведении на элементы на чистом CSS? как всегда с демонстрацией
HTML:
<div class="fancy">01</div>
<div class="fancy">02</div>
<div class="fancy">03</div>
<div class="fancy">04</div>

CSS:
.fancy {
    width: 120px;
    height: 120px;
    background: #c0392b;
    color: #fff;
    font: 3em/120px Arial, sans-serif;
    text-align: center;
    float: left;
    margin-right: 30px;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -ms-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
}
.fancy:hover {
    background: #fff;
    color: #c0392b;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    border-radius: 100px;
}
Демо

Комментарии пользователей (4)

Nagibaka
5

42 | 34

Nagibaka - 26 июля 2013 04:29 - Эксперт

Предлагаю еще добавить сниппет для создания бесконечно вращающейся иконки прелоадера по смене класса на элементе, заодно будет наглядно видно, как можно использовать animation - недавно углубленно ковырялся - оочень занятная штука, можно кстати сразу сделать с деградацией под старые ие.

Frontend MotherFucker=:^^

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 29 июля 2013 22:30 - Админ

Не, подгонка визуальных эфектов под старьё не для меня, это делается только для конкретного заказа и за дополнительные деньги)

Каков вопрос - таков и ответ. Просто помните об этом.

Nagibaka
5

42 | 34

Nagibaka - 29 июля 2013 22:49 - Эксперт

Очень зря, кроссбраузерные пуленепробиваемые решения - вот настоящий профессионализм. Интерес к таким решениям у посетителей сайта значительно выше, поскольку намного большая аудитория сможет использовать ваш сниппет.
Пусть даже 1% будет использовать ие, докажите себе свою крутость. До абсурда конечно доводить не надо, как например несколько дополнительных тегов и картинок для реализации круглых уголков, но мягкую деградацию вы делать обязаны.

"Веб должен быть доступен даже убогим."

Frontend MotherFucker=:^^

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 29 июля 2013 23:03 - Админ

Про доступность согласен, но тут всё таки сниппет - короткий кусочек кода. А если навешивать на него ещё и деградацию и т.п. - это будет уже не сниппет) К тому же пользователь пусть думает головой, а то привыкли на всё готовенькое smile

Каков вопрос - таков и ответ. Просто помните об этом.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте