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

Опубликовано: 05.09.2018

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

У меня появилась идея сделать так, чтобы при наведении на раздел ссылки из меню, мячик бесконечно вращался .

Как это сделать?

Можно, конечно, сделать анимацию вращающегося изображения в программе 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:

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

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

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

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

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

Последние новости категории:

Похожие статьи

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

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