BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Как сделать бесконечное вращение картинки на CSS3

Как сделать бесконечное вращение картинки на CSS3

2015-08-01 / Вр:14:08 / просмотров: 12685

Сейчас я делаю сайт для одной детской футбольной секции. На макете (там, где меню) я нарисовал  футбольные мячики:

Как сделать бесконечное вращение картинки на CSS3

У меня появилась идея сделать так, чтобы при наведении на раздел ссылки из меню, мячик бесконечно вращался.
Как это сделать?
Можно, конечно, сделать анимацию вращающегося изображения в программе flash -редакторе или фотошопе.
Код для сайта будет вот таким:

<html>
 <head>
 <meta charset="utf-8">
 <title>Способ №1 - bloggood.ru</title>

<style>
 a.rollover {
 background: url(knopka-1.png); /* рисунок, который увидим сразу */
 display: block; /* Рисунок как блочный элемент */
 width: 300px; /* Ширина рисунка */
 height: 100px; /* Высота рисунка */
 }
 a.rollover:hover {
 background: url(knopka-2.png); /* заменяемый рисунок при наведении мыши */
 }
 </style>

 </head>
 <body>


<a href="#" class="rollover"> </a>

 </body>
</html>

Где картинка «knopka-1.png» – обычная картинка, а «knopka-2.png» –  с анимацией (вращающаяся).

Но я решил не использовать графическую анимацию, а воспользоваться возможностью, которую предоставляет CSS3. В CSS3 есть свойство «animation» и «transform». С помощью этих свойств, я заставил бесконечно крутиться картинку, пока курсор мышки находиться на меню.

Итак, вот CSS код:

/* Бесконечное вращение изображения с помощью CSS3 */
	li:hover img {
	 -webkit-animation-name: spin;
    -webkit-animation-duration: 600ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 600ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 600ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
	}

А вот так будет выглядеть меню в HTML:

<ul>
  <li><a href="#"><img src="images/myah.png"> Главная</a></li>
  <li><a href="#"><img src="images/myah.png"> О нас</a></li>
  <li><a href="#"><img src="images/myah.png"> Цены</a></li>
  <li><a href="#"><img src="images/myah.png"> Контакты</a></li>
</ul>

Где «myah.png» – это название картинки.

В результате вы увидите вот это:

[посмотреть пример]

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

На примере буду использовать изображение нашей планеты. И сейчас с помощью CSS3 Земля будет вращаться.

В CSS пишу:

/* Бесконечное вращение изображения с помощью CSS3 */
	.zemla {
	 -webkit-animation-name: spin;
    -webkit-animation-duration: 10000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 10000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 10000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
	}

там где «10000ms» – число можно заменять по желанию.

В HTML:

<img src=" zemla.png" class="zemla">

где «zemla.png» – это изображение Земли.

[посмотреть пример]

Возможно, вам будет интересна статья «Три способа сделать так, чтобы картинка менялась при наведении курсора мыши»?

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

17 Ответов на комментарий - Как сделать бесконечное вращение картинки на CSS3

  1. Тимофей

    :grin: Теперь на всём блоге картинки крутятся :lol:
    Есть косячок, когда на строку с картинкой наводишь, крутится неплохо, но когда на саму картинку, за ней появляется тень и видно, что крутится она вместе с рамкой, некрасиво. и где земля крутится, края белого фона задевают окружающие элементы, не айс. и вообще-то Земля в другой плоскости вращается :lol:

  2. Степан => автор блога Степан => автор блога

    :lol: :lol: :lol: Ну вы, Тимофей, даете! Вы пробовали это сделать по примеру? Нет, не пробовали.
    Отвечаю на ваши вопросики:
    “…но когда на саму картинку, за ней появляется тень…” – это стиль подвязан с блога. Моя цель была показать не красоту, а работоспособность. По поводу земли, я думаю у вас, Тимофей хватит ума, чтобы сделать фон прозрачным и сохранить картинку в формате “png”.
    “Земля в другой плоскости вращается…” – еще раз повторюсь, моя цель была не красота и не показ астрономических познаний. Если разобраться, то земля не круглая. :grin:
    Да, Тимофей, рассмешили вы своим комментарием. :lol: :lol: :lol: :lol: :smile:

  3. Тимофей

    Взаимно. отвечаю на ваши вопросики.
    – по вашему примеру не пробовал, потому как полгода назад наигрался с «animation» и «transform», в частности со вращением, но мне не понравилось, так как более приятно смотрится вращение не по часовой стрелке, а изнутри наружу, т.е. в другой плоскости.
    – потому как никакого функционала вращение картинок не несёт, делаем вывод, что это делается для красоты, верно?
    а раз так, то для профессионала, коим я Вас, Степан, считаю, не составит трудности сделать прозрачный фон для Земли и убрать тень на четырёх картинках. Профессионализм в мелочах, так ведь? Вы рассказываете об интересных вещах, так почему бы не делать это более наглядно. Конечно, это Ваш блог, и Вы можете остаться при своём мнении, но у меня, как у читателя и возможного клиента, остается ощущение какой-то незавершенности

  4. Людмила Лао

    с Земля png надо было фон убрать, белые квадраты видно при вращении.

  5. Степан => автор блога Степан => автор блога

    Спасибо! Будет время, исправлю.

  6. Степан => автор блога Степан => автор блога

    исправил!

  7. Степан => автор блога Степан => автор блога

    исправил!

  8. Людмила Лао

    ;-)

  9. Алексей

    все ок! спасибо.

    два изображения почему то не получается крутить
    хотел один по часовой
    другой против ((

    все перестает работать
    название spin менял на spin2
    не помогает

  10. Степан => автор блога Степан => автор блога
    <html>
    <head>
    <title> Как сделать бесконечное вращение картинки на CSS3 </title>
    <meta charset="utf-8">
    <style>
    li {
        float: left;
    }
    a {
        font-size: 20px;
        text-decoration: none;
    }
    /* Бесконечное вращение изображения с помощью CSS3 */
    	li.kartinka1:hover img {
    
        animation-name: spin;
        animation-duration: 600ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    li.kartinka2:hover img {
    
        animation-name: spin2;
        animation-duration: 600ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    @keyframes spin {
        from {
            transform:rotate(0deg);
        }
        to {
            transform:rotate(360deg);
        }
    }
    	
    
    @keyframes spin2 {
        from {
            transform:rotate(0deg);
        }
        to {
            transform:rotate(-360deg);
        }
    }
    	
    </style>
    </head>
    <body>
    <ul>
      <li class="kartinka1"><a href="#"><img src="https://bloggood.ru/wp-content/uploads/2015/08/myah.png"> Главная</a></li>
      <li class="kartinka2"><a href="#"><img src="https://bloggood.ru/wp-content/uploads/2015/08/myah.png"> О нас</a></li>
    </ul>
    </body>
    </html>
    
  11. Алексей

    СПасибо! :gazeta:

  12. Степан => автор блога Степан => автор блога

    Пожалуйста!

  13. Максим

    Сделал все как написано, даже формата не менял, оставил “PNG”, но почемуто картинка не прогружается, а сам блок крутится. Буду ждать ответа)

  14. Степан => автор блога Степан => автор блога

    Максим, проверьте правильный путь до картинки
    Для пример, можете попробовать вставить путь вот такой

    <ul>
      <li><a href="#"><img src="https://bloggood.ru/wp-content/uploads/2015/08/myah.png"> Главная</a></li>
      <li><a href="#"><img src="https://bloggood.ru/wp-content/uploads/2015/08/myah.png"> О нас</a></li>
      <li><a href="#"><img src="https://bloggood.ru/wp-content/uploads/2015/08/myah.png"> Цены</a></li>
      <li><a href="#"><img src="https://bloggood.ru/wp-content/uploads/2015/08/myah.png"> Контакты</a></li>
    </ul>
    
  15. Mgin

    :smile: ;-) вот спасибо тебе дружище от души))помог и время дополнительное высвободил

  16. Максим

    Спасибо большое, респект тебе)

  17. Степан => автор блога Степан => автор блога

    :smile:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573