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

Эффект вращения с помощью 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>
Эффект вращения с помощью CSS3

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

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

Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)
Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)
Это вопрос задают довольно часто: Можно ли создавать тени из градиентов вместо сплошных цветов? Нет конкретного свойства CSS, которое делает это, и любая информация, которую вы найдёте об этом, в основном представляет собой множество приемов CSS для аппроксимации градиента. Мы на самом деле рассмотрим некоторые из них по ходу дела.

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

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

Несколько полезных CSS-трюков для Front-end разработчиков
Несколько полезных CSS-трюков для Front-end разработчиков
Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов. Они позволят вам без использования Javascript создать анимацию и эффекты.

Как создать пользовательский ползунок диапазона с помощью CSS
Как создать пользовательский ползунок диапазона с помощью CSS
Ползунки диапазона (<input type="range">) позволяют пользователям выбирать значение в пределах заданного диапазона, предоставляя альтернативные типы ввода, такие как <input type="number">.

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

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.