Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.

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

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

ПафНутиЙ 25.07.2013 сниппет, css3, анимация CSS Сниппеты 5845

Простой и красивый эффект при наведении на элементы на чистом 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 - - #15116

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

Frontend MotherFucker=:^^

Админ

3457

ПафНутиЙ - - #15183

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

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

Эксперт

Nagibaka - - #15184

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

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

Frontend MotherFucker=:^^

Админ

3457

ПафНутиЙ - - #15186

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

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

Server restriction: dle-faq.ru Server restriction: www.dle-faq.ru ------ LICENSE FILE DATA ------- VU009X5YSAjbcTro6oQIH1pF0S0tHxw6 X3utgKa7k/J1knblsjqyrOfrKZkgtoH/ zjlbst4p/kmDl5KZkd2dnt5KCGOclpIJ f15Iv1BnJzXfiaZG1x35jbi5OyKhVog3 jd7sUxVMvMgUO2gUyN1fsV9o0h27MrO3 UanDBpzJbgVvUjZys0NIDuOtCgzaFIKA 3HWMRbEgADHgY0K1T7ns1t0vCFW7aDKF 5DuZpCjs2D5tIyIrfctUB1i5WiSouPDg vl2Qsrzc0NrTJ+ebSEUrnhyDjWMy7rQA Pn3LGNCiOmMRuIOLBp+NmN7hL2k/JSzd JpeoQ5gzGRR8zt7F5ZIdIcZuTfZ8+/zD dI6KQJJeu0HsU7Ra3AXJU0EkiXg8vjtd Tq6ebBesu4jGLfslfVw01bJRQz1+/OtW EmutMaoSt+S6Goja5MvWrBxW3c3v8pTF HYfzbGtLJynavG9SpPrXEFKakmD92uVk lFhOxFVAbiCq0JS8K6p3 -------------------------------- Server restriction: dle-faq.ru Server restriction: www.dle-faq.ru ------ LICENSE FILE DATA ------- VU009X5YSAjbcTro6oQIH1pF0S0tHxw6 X3utgKa7k/J1knblsjqyrOfrKZkgtoH/ zjlbst4p/kmDl5KZkd2dnt5KCGOclpIJ f15Iv1BnJzXfiaZG1x35jbi5OyKhVog3 jd7sUxVMvMgUO2gUyN1fsV9o0h27MrO3 UanDBpzJbgVvUjZys0NIDuOtCgzaFIKA 3HWMRbEgADHgY0K1T7ns1t0vCFW7aDKF 5DuZpCjs2D5tIyIrfctUB1i5WiSouPDg vl2Qsrzc0NrTJ+ebSEUrnhyDjWMy7rQA Pn3LGNCiOmMRuIOLBp+NmN7hL2k/JSzd JpeoQ5gzGRR8zt7F5ZIdIcZuTfZ8+/zD dI6KQJJeu0HsU7Ra3AXJU0EkiXg8vjtd Tq6ebBesu4jGLfslfVw01bJRQz1+/OtW EmutMaoSt+S6Goja5MvWrBxW3c3v8pTF HYfzbGtLJynavG9SpPrXEFKakmD92uVk lFhOxFVAbiCq0JS8K6p3 --------------------------------

Последние события

Puxlik | Telegram Sender ¹³

Puxlik
Telegram Sender

Версию 17.1 поддерживает ?
TeraMoune | Не загружается изображение [Ошибка HTTP] ... ²

TeraMoune
Не загружается изображение [Ошибка HTTP]. Как исправить?

В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
RedFox | Не загружается изображение [Ошибка HTTP] ... ²

RedFox
Не загружается изображение [Ошибка HTTP]. Как исправить?

"Некоторые картинки загружаются, но большинство нет."

Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
post_max_size = 100M
upload_max_filesize = 100M
max_file_uploads = 20

Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
LMakc | Модуль читалка pdf ¹

LMakc
Модуль читалка pdf

Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
ssssss | Сделать подсчет количества символов в ко ... ⁵

ssssss
Сделать подсчет количества символов в комментариях

Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
alex.sg.spb | Как вывести информацию о обновлении ново ... ⁸

alex.sg.spb
Как вывести информацию о обновлении новости, но на время?

вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Спасибо огромное. Этот вариант самый простой и рабочий!

derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

К черту htaccess давайте проще

к href добавьте id="xfield_value"

<a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

И добавьте скрипт обработчик

<script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>

Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Так сайт не работает вообще. Браузер выдает такое

Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
Попробуйте удалить файлы cookie.

ERR_TOO_MANY_REDIRECTS

Куки чистил не помогает
derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

Попробуйте так
RewriteEngine On
RewriteCond %{REQUEST_URI} %20
RewriteRule (.*)%20(.*) $1+$2 [N]
RewriteRule (.*) $1 [R=301,L]

наверх