1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Эффекты для аватара

Тема в разделе "Модификации шаблонов", создана пользователем Skaiman, 24 июл 2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Я писал в топике Круглый аватар, как его сделать, сейчас решил продолжить с эффектами.

    Закругляем аватар при наведении курсора мыши.

    Первое делать не надо, потому, что в обычном состоянии аватар должен быть квадратный.
    Открываем EXTRA.css и добавляем:
    Код:
    .avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
      border-radius: 50%;
    }
    [​IMG]

    Постепенное закругление аватара при наведении.

    В примере выше, аватар закругляется резко, добавим свойство transition, для плавности. В EXTRA.css добавим:
    Код:
    .avatar img, .avatar .img, .avatarCropper {
      -webkit-transition: border-radius 1s ease;
      -moz-transition: border-radius 1s ease;
      -o-transition: border-radius 1s ease;
      -ms-transition:border-radius 1s ease;
      transition: border-radius 1s ease;
    }
    Код из первого примера не убираем.

    [​IMG]

    Поворот аватара при наведении на 10°

    В EXTRA.css добавляем:
    Код:
    .avatar img, .avatar .img, .avatarCropper {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
    [​IMG]

    Поворот аватара при наведении на 360°

    В EXTRA.css добавляем:
    Код:
    .avatar img, .avatar .img, .avatarCropper {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
      border-radius: 50%;
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    [​IMG]

    Я как бы не писал, но это вроде само сабой разумеющееся, НО?! Эти все фишки устанавливаются только по одной :)
     
    Desoy, Anklave, nuBokz и 13 другим нравится это.
  2. TheSmile

    TheSmile Активный пользователь

    Регистрация:
    14.03.14
    Сообщения:
    7
    Симпатии:
    0
    Версия XF:
    1.4.4
    Супер Побольшебы таких приколюх.
     
  3. Karat7

    Karat7 Заблокирован

    Регистрация:
    19.03.14
    Сообщения:
    140
    Симпатии:
    12
    Версия XF:
    1.4.2
    Идея отличная, жги еще )) :thumbsup:
     

Поделиться этой страницей