Сышышь ты, выходи сюда,
поговорим !

Как сделать бесконечное вращение картинки на 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:

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

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

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

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

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

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

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

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

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

Метки: css , для сайта , эффекты для сайта

rss