BloGGood.ru

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

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

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

Главная » Рецепты CSS » Как сделать вращающиеся иконки для сайта на CSS?

Как сделать вращающиеся иконки для сайта на CSS?

2014-10-29 / Вр:22:29 / просмотров: 5884

Как сделать вращающиеся иконки для сайта на CSS? Прежде чем я приступлю к коду, хочу немного рассказать о том, как работает этот эффект. Всякий раз, когда пользователь наводит курсор мыши на иконку, она делает поворот на 3600.
Я уверен, что вы видели на блогах или сайтах вращающуюся иконку RSS, социальных сетей Твитер, ВКонтакте, Одноклассники.
Если вы такого не встречали, можете посмотреть ее демонстрацию.

[посмотреть на демонстрацию]

Эффект вращения иконки для сайта делается с помощью CSS свойства transform.

Ну что, приступим.
Для примера нам потребуются иконки.

Как сделать вращающиеся иконки для сайта на CSS?

  1. Создайте папку «img-ico» и залейте в нее иконки.
  1. Создайте html-файл или откройте для редактирования существующий файл и добавьте между тегами <body></body> вот этот код:
    <p id="socialicons">
    <a href="https://bloggood.ru/"><img border="0" src="img-ico/rss.png" /></a>
    <a href="https://bloggood.ru/"><img border="0" src="img-ico/f.png" /></a>
    <a href="https://bloggood.ru/"><img border="0" src="img-ico/t.png" /></a>
    <a href="https://bloggood.ru/"><img border="0" src="img-ico/y.png" /></a>
    </p>
    
  2. В CSS ставите вот этот код:
    *
    {
    margin:5px; /* размер между иконками */
    }
    
    /* здесь указываете количество переходов кадров в секунду */
    p#socialicons img{
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
     }
    
    /* здесь указываете градус поворота */
    p#socialicons img:hover{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
     }
    

В принципе, подсказки в коде я прописал. То есть, чтобы задать время эффекту (быстрый или медленный поворот), пропишите нужные секунды, сейчас на примере «0.8s».

/* здесь указываете количество переходов кадров в секунду */
p#socialicons img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
 }

Если нужно поменять градус, например, чтобы иконка не делала полный поворот на 3600, а только на 600 или 450, тогда нужно просто указать необходимый градус. В примере у меня стоит «360deg»

/* здесь указываете градус поворота */
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
 }

Еще добавлю то, что иконки крутятся в правую сторону, чтобы поменять сторону поворота, достаточно к градусу поставить минус «-». Вот так:

/* здесь указываете градус поворота */
p#socialicons img:hover{
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
 }

Итак, вот абсолютно готовый код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Как сделать вращающиеся иконки для сайта на CSS на блоге BlogGood.ru</title>
<style ENGINE="text/css">
*
{
margin:5px; /* размер между иконками */
}

/* здесь указываете количество переходов кадров в секунду */
p#socialicons img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
 }
/* здесь указываете градус поворота */
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
 }
</style>
</head>
<body>
<p id="socialicons">
<a href="#"><img border="0" src="img-ico/rss.png" /></a>
<a href="#"><img border="0" src="img-ico/f.png" /></a>
<a href="#"><img border="0" src="img-ico/t.png" /></a>
<a href="#"><img border="0" src="img-ico/y.png" /></a>
</p>
<p><a href="https://bloggood.ru/">Интересный блог Костаневича Степана - BlogGood.ru </a>
</body>
</html>

Вы можете скачать исходник:

[скачать исходник]

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

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

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

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

;-) :| :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