Блог

Эффект вращения с помощью CSS3

ПОСМОТРЕТЬ ДЕМО

Используя всего лишь CSS3 и подключения без javascript можно создать эффект вращающегося цветного колеса. 

Для этого в <body> вписываем код:

 <div id="colorWheel">
<span class="color01"></span>
<span class="color02"></span>
<span class="color03"></span>
<span class="color04"></span>
<span class="color05|></span>
<span class="color06"></span>
<span class="color07"></span>
<span class="color08"></span>
<span class="color09"></span>
<span class="color10"></span>
</div>

Далее используем CSS3 стили:

 <style type="text/css">
#colorWheel {
height: 100px;
width: 100px;
margin: 40px auto ;
position: absolute; left:10%;
-webkit-transform-origin: 50px 150px;
-moz-transform-origin: 50px 150px;
-ms-transform-origin: 50px 150px;
-o-transform-origin: 50px 150px;
transform-origin: 50px 150px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
animation: wheel 10s ease-in-out infinite alternate;
-moz-animation: wheel 10s ease-in-out infinite alternate;
-webkit-animation: wheel 10s ease-in-out infinite alternate;
-ms-animation: wheel 10s ease-in-out infinite alternate;
}
@keyframes wheel{
0%{
opacity:1;
left:-10%;
transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7}
100%{
left: 90%;
opacity:1;
transform:scale (1) rotate (2160deg);
}
}
@-webkit-keyframes wheel{
0%{
opacity:1;
left:-10%;
-webkit-transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-webkit-transform:scale (1) rotate (2160deg);
}
}
@-moz-keyframes wheel{
0%{
opacity:1;
left:-10%;
-moz-transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-moz-transform:scale (1) rotate (2160deg);
}
}
@-ms-keyframes wheel{
0%{
opacity:1;
left:-10%;
-ms-transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-ms-transform:scale (1) rotate (2160deg);
}
}
#colorWheel:hover {}
#colorWheel span {
position: absolute;
-webkit-transform-origin: 50% 50%;
border-style: solid;
border-width: 150px 50px;
box-sizing: border-box;
}
#colorWheel span.color01 {
-webkit-transform: rotate (0deg);
-moz-transform: rotate (0deg);
-ms-transform: rotate (0deg);
-o-transform: rotate (0deg);
transform: rotate (0deg);
border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
-webkit-transform: rotate (36deg);
-moz-transform: rotate (36deg);
-ms-transform: rotate (36deg);
-o-transform: rotate (36deg);
transform: rotate (36deg);
border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
-webkit-transform: rotate (72deg);
-moz-transform: rotate (72deg);
-ms-transform: rotate (72deg);
-o-transform: rotate (72deg);
transform: rotate (72deg);
border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
-webkit-transform: rotate (108deg);
-moz-transform: rotate (108deg);
-ms-transform: rotate (108deg);
-o-transform: rotate (108deg);
transform: rotate (108deg);
border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
-webkit-transform: rotate (144deg);
-moz-transform: rotate (144deg);
-ms-transform: rotate (144deg);
-o-transform: rotate (144deg);
transform: rotate (144deg);
border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
-webkit-transform: rotate (180deg);
-moz-transform: rotate (180deg);
-ms-transform: rotate (180deg);
-o-transform: rotate (180deg);
transform: rotate (180deg);
border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
-webkit-transform: rotate (216deg);
-moz-transform: rotate (216deg);
-ms-transform: rotate (216deg);
-o-transform: rotate (216deg);
transform: rotate (216deg);
border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
-webkit-transform: rotate (252deg);
-moz-transform: rotate (252deg);
-ms-transform: rotate (252deg);
-o-transform: rotate (252deg);
transform: rotate (252deg);
border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
-webkit-transform: rotate (288deg);
-moz-transform: rotate (288deg);
-ms-transform: rotate (288deg);
-o-transform: rotate (288deg);
transform: rotate (288deg);
border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
-webkit-transform: rotate (324deg);
-moz-transform: rotate (324deg);
-ms-transform: rotate (324deg);
-o-transform: rotate (324deg);
transform: rotate (324deg);
border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
content:»»;
width: 300px;
height: 300px;
overflow: hidden;
position: absolute;
top: -30px;
left: -130px;
border-radius: 100%;
border: 30px solid #ffffff;
z-index: 100;
box-shadow:0px 0px 2px 12px rgba (180,180,180,.5)
}
#colorWheel:after {
content:»»;
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 100px;
left: 0px;
border-radius: 100%;
box-shadow:0px 0px 2px 12px rgba (250,250,250,.5);
background: #444 url (Dhiraj.png); background-size:contain
}
</style>

Источник информации dhirajkumarsingh.wordpress.com

Эффект вращения с помощью CSS3

Понравилась статья? Поделитесь

Вас может заинтересовать:

  • Варианты оформления поля Поиска по сайту на CSS

    Обычное поле Поиска по сайту можно оформить более оригинально, чем просто инпут с лупой. Например, благодаря анимационным эффектам на CSS3 поле для ввода поисковой фразы можно скрыть, чтобы освободить место для другого контента...

  • Градиентная обводка блока на CSS

    Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

    1. Создадим div.linear-gradient с градиентным фоном;

    2. Создадим внутренний блок div с небольшим отступом.

  • CSS анимация обводки блоков

    Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

  • Бесплатный ФРОНТЭНД

    Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

  • HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

    Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...

  • HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS

    Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ