Летающее меню на CSS3

Летающее меню на CSS3.

HTML:

<div class="fly-menu">
	<div class="fly-hover"></div>
		<ul>
			<li class="fly-item home"></li>
			<li class="fly-item about"></li>
			<li class="fly-item setting"></li>
			<li class="fly-item portfolio"></li>
			<li class="fly-item mail"></li>
		</ul>
		<div class="fly-main"></div>
	</div>
</div>

CSS:

#body {
    padding: 100px 0 150px 0;
}

.fly-menu {
  float: left;
  margin: 50px 100px 0 150px;
  width: 60px;
  height: 60px;
  position: relative;
  border-radius: 50%;
  z-index: 1;
  display: block;
}

.fly-main {
  width: 60px;
  height: 60px;
  background: red;
  position: relative;
  border-radius: 100%;
  border: 2px solid #fff;
  -moz-transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
  -o-transition: 1.5s ease;
   transition: 1.5s ease;
  position:absolute;
  cursor:pointer;
}
.fly-main:after{
    content:"";
    position:absolute;
    background:white;
    width:10px;
    height:30px;
    top:15px;
    left:25px;

}
.fly-main:before{
    content:"";
    position:absolute;
    background:white;
    width:30px;
    height:10px;
    top:25px;
    left:15px;

}

.fly-menu:hover .fly-main {
  -moz-transform: rotate(490deg);
  -webkit-transform: rotate(490deg);
   -o-transform: rotate(490deg);
    transform: rotate(490deg);
}

.fly-hover {
  width: 60px;
  height: 60px;
  opacity: 0.5;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
   -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.fly-menu:hover .fly-hover {
  -moz-transform: scale(5);
  -webkit-transform: scale(5);
     -o-transform: scale(5);
  transform: scale(5);
}

ul{
  list-style:none;
}

.fly-item {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;

  border-radius: 100%;
}

.home,
.about,
.setting,
.portfolio,
.mail{

  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;   transition-duration: 0.3s;
  -moz-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
   -webkit-transition-timing-function: linear;
  transition-timing-function: linear;

}

.home {
  background-color: #D4F25C;
 width:50px;
  height:50px;
  top: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
  cursor:pointer;
}
.home:after{
content: "";
    border-color: transparent transparent #577305;
    border-image: none;
    border-style: solid;
    border-width: 18px;
    content: "";
    height: 16px;
    left: 7px;
    position: absolute;
    top: -30px;
    width: 0;
   display:inline-block;
}
.home:before{
width:30px;
 height:20px;
  content:"";
  background-color:#577305;
  position:absolute;
  top:20px;
  left:10px;
   display:inline-block;
}

.fly-menu:hover .home {
  top: -60px;
  left: -60px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
    transform: rotate(360deg);
  -moz-animation: home 1s 1 linear;
  -webkit-animation: home 1s 1 linear;
   -o-animation: home 1s 1 linear;
    animation: home 1s 1 linear;
}

@-moz-keyframes home {
  0% {-moz-transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {-moz-transform: rotate(0deg); top: -70px; left: -70px;}
  100% {-moz-transform: rotate(360deg); top: -60px; left: -60px;}
}

@-webkit-keyframes home {
  0% {-webkit-transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -70px; left: -70px;}
  100% {-webkit-transform: rotate(360deg) top: -60px; left: -60px;;}
}
 @-o-keyframes home {
  0% {-moz-transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {-moz-transform: rotate(0deg); top: -70px; left: -70px;}
  100% {-moz-transform: rotate(360deg); top: -60px; left: -60px;}
}
@keyframes home {
  0% {transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {transform: rotate(0deg); top: -70px; left: -70px;}
  100% {transform: rotate(360deg); top: -60px; left: -60px;}
}

.about {
  background-color: #02BDF4;
 width:50px;
  height:50px;
  top: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
  cursor:pointer;
}
.about:after{
content:"";
  width:10px;
  height:10px;
  border-radius:10px;
  position:absolute;
  top:10px;
  left:20px;
  background-color:#21383E;
  display:inline-block;

}
.about:before{
content:"";
  width:10px;
  height:20px;
  position:absolute;
  top:22px;
  left:20px;
  background-color:#21383E;
   display:inline-block;
}

.fly-menu:hover .about {
  top: -120px;
  left:50px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
    transform: rotate(360deg);
  -moz-animation: it-2 1.1s 1 linear;
  -webkit-animation: it-2 1.1s 1 linear;
   -o-animation: it-2 1.1s 1 linear;
    animation: it-2 1.1s 1 linear;
}

@-moz-keyframes about {
  0% {-moz-transform: rotate(-360deg); top: 15px;}
  50% {-moz-transform: rotate(0deg); top: -110px;}
  100% {-moz-transform: rotate(360deg); top:-100px;}
}

@-webkit-keyframes about {
  0% {-webkit-transform: rotate(-360deg); top: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -110px;}
  100% {-webkit-transform: rotate(360deg); top:-100px;}
}
 @-o-keyframes about {
  0% {-webkit-transform: rotate(-360deg); top: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -110px;}
  100% {-webkit-transform: rotate(360deg); top:-100px;}
}
@keyframes about {
  0% {transform: rotate(-360deg); top: 15px;}
  50% {transform: rotate(0deg); top: -110px;}
  100% {transform: rotate(360deg); top:-100px;}
}

.setting {
  background: #FE9732;
  width:50px;
  height:50px;
  top: 15px;
  right: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;   transition-delay: 0.4s;
  cursor:pointer;
}

.setting:after{
position:absolute;
width:7px;
height:20px;
top:17px;
 left:14px;
content:"";
 background-color:#693E13;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
    transform: rotate(45deg);

}
.setting:before{
   border:6px solid #693E13;
  border-top:0px;
  border-radius:0px 0px 10px 10px;
    top: 12px;
    left:19px;
    height: 6px;
  width:10px;
  position:absolute;
  content:'';
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
    transform: rotate(45deg);

}

.fly-menu:hover .setting {
  top: -20px;
  right: -120px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
    transform: rotate(360deg);
  /*==== Animasi Efek Bouncing ====*/
  -moz-animation: it-3 1.2s 1 linear;
  -webkit-animation: it-3 1.2s 1 linear;
   -o-animation: it-3 1.2s 1 linear;
    animation: it-3 1.2s 1 linear;
}

@-moz-keyframes setting {
  0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {-moz-transform: rotate(0deg); top: -70px; right: -70px}
  100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; }
}

@-webkit-keyframes setting {
  0% {-webkit-transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -70px; right: -70px}
  100% {-webkit-transform: rotate(360deg); top:-60px; right: -60px; }
}
 @-o-keyframes setting {
  0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {-moz-transform: rotate(0deg); top: -70px; right: -70px}
  100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; }
}
@keyframes setting {
  0% {transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {transform: rotate(0deg); top: -70px; right: -70px}
  100% {transform: rotate(360deg); top:-60px; right: -60px; }
}

.portfolio {
  background-color:#FDE674;
  bottom: -10px;
  right: 5px;
  width:50px;
  height:50px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  cursor:pointer;
}

.portfolio:after{
content:"";
background:#86680E;
  width:30px;
  height:20px;
  position:absolute;
  top:16px;
  left:10px;
}

.portfolio:before{
content:"";
background:#86680e;
  width:15px;
  height:10px;
  position:absolute;
  top:12px;
  left:25px;

}
.fly-menu:hover .portfolio {
  bottom: -90px;
  right: -110px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
    transform: rotate(360deg);
  -moz-animation: portfolio 1.2s 1 linear;
  -webkit-animation: portfolio 1.2s 1 linear;
   -o-animation: portfolio 1.2s 1 linear;
    animation: portfolio 1.2s 1 linear;
}
 @-o-keyframes portfolio {
  0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; }
}
@-moz-keyframes portfolio {
  0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; }
}

@-webkit-keyframes portfolio {
  0% {-webkit-transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {-webkit-transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {-webkit-transform: rotate(360deg); bottom:-60px; right: -60px; }
}

@keyframes  portfolio {
  0% {transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {transform: rotate(360deg); bottom:-60px; right: -60px; }
}

.it-5 {
  background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
  bottom: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
   -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.fly-menu:hover .it-5 {
  bottom: -100px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
    transform: rotate(360deg);
  -moz-animation: it-5 1.3s 1 linear;
  -webkit-animation: it-5 1.3s 1 linear;
   -o-animation: it-5 1.3s 1 linear;
    animation: it-5 1.3s 1 linear;
}
 @-o-keyframes it-5 {
  0% {-moz-transform: rotate(-360deg); bottom: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -110px;}
  100% {-moz-transform: rotate(360deg); bottom:-100px; }
}
@-moz-keyframes it-5 {
  0% {-moz-transform: rotate(-360deg); bottom: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -110px;}
  100% {-moz-transform: rotate(360deg); bottom:-100px; }
}

@-webkit-keyframes it-5 {
  0% {-webkit-transform: rotate(-360deg); bottom: 15px;}
  50% {-webkit-transform: rotate(0deg); bottom: -110px;}
  100% {-webkit-transform: rotate(360deg); bottom:-100px; }
}

@keyframes it-5 {
  0% {transform: rotate(-360deg); bottom: 15px;}
  50% {transform: rotate(0deg); bottom: -110px;}
  100% {transform: rotate(360deg); bottom:-100px; }
}

.it-6 {
  background: magenta;
  background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
  bottom: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
   -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
.fly-menu:hover .it-6 {
  bottom: -60px;
  left: -60px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  -moz-animation: it-6 1.4s 1 linear;
  -webkit-animation: it-6 1.4s 1 linear;
   -o-animation: it-6 1.4s 1 linear;
    animation: it-6 1.4s 1 linear;
}
 @-o-keyframes it-6 {
  0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; }
}
@-moz-keyframes it-6 {
  0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; }
}

@-webkit-keyframes it-6 {
  0% {-webkit-transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {-webkit-transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {-webkit-transform: rotate(360deg); bottom:-60px; left: -60px; }
}

@keyframes it-6 {
  0% {transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {transform: rotate(360deg); bottom:-60px; left: -60px; }
}

Не поддерживаются браузеры:

Internet Explorer 9 и ниже.

А вот и пример:

Перевод статьи Fly Menu с сайта cssdeck.com, автор Victor knust.

P.S. Это тоже может быть интересно:

День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari

«Родительскому селектору» :has(), скорее всего, запретят быть вложенным

Псевдокласс :has() — не только «родительский селектор»

Если вам понравилась статья, поделитесь ей!

6 комментариев

kolobok-smile:

23.10.2012 в 16:45

прикольная менюшка , отлично подойдет для иконок соц сетей

Ответить
SilentImp:

23.10.2012 в 17:49

Юзабельность стремится к 0.
Не надо скрывать пункты меню, если нет крайней необходимости.
в IE6-9 отлично работают фильтры, котрые могут вращать :)

Ответить
1. psywalker:
  
  23.10.2012 в 18:36
  
  Такие штуки вообще делаются "for fun", имхо. Благодаря таким поделкам можно продемонстрировать мощь сегодняшнего анимационного CSS:) Кстати, в Fx и Chrome баг с резким скачком одного из пунктов. А вот в Opera, как ни странно, его нет)
  
  в IE6-9 отлично работают фильтры, котрые могут вращать
  
  Чё, прям так же плавно и чётко? :)
  
  Ответить
  1. shestus:
    
    27.10.2012 в 19:57
    
    Или код слегка шизофреничный: браузеры похоже не могут (пока) определиться как или в каком порядке выполнять "одновременные" transition и animation (потому как и Opera багнутая, в другом порядке, но тоже…)
    
    Ответить
FruT:

11.04.2013 в 04:58

а как запрограммировать иконки вылетаюшие типо нажимаешь на настройик, вылазиет страница с настройками. Помогите нубу мой емаил valya.spaces@yandex.ru

Ответить
Test:

27.06.2014 в 16:54

console.log(‘test’)

Ответить