Reino Kawaii

Oie. Há algum tempo, dando uma olhada em um template cuja autoria pertence a Aimad, encontrei um menu feito com círculos coloridos que giravam ao passar o mouse. Achei super interessante e resolvi compartilhar com vocês. Vale lembrar que o efeito que o faz girar funciona no Google Chrome ok. Eu até já usei aqui no blog uma vez. Como é todo redondinho, dá para fazer de conta que bolhinhas estão saindo no local em que você o colocar.

Ficará mais ou menos assim

Bom, primeiro precisamos criar as bolhinhas coloridas com imagens ou HTML, escolher tamanho da fonte, estilos...ou seja, precisamos do CSS, que se adiciona acima de ]]></b:skin>:

 <!--Colorful Bubble Menu Inicio-->
#c1 {margin-left:348px;margin-top:-5px;height: 73px;width: 80px;  -moz-border-radius: 80px; border-radius: 80px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifflRX4AvLd7ky0gj8xIGkmighsyRRS4oE8BT9y51y4qM1Kcn9xB1Ctwc2xHieRfplhiRle6hZCBSjSD2labVBpQCItBTkhw1xhlDXc9a2rdZLvXbqbKuJ_hMCJFlhmyQhSu8iNoturwtZ/s80/bubble1.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c1:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
} 
#c2 {margin-top:70px; margin-left: 323px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SCJuUK0Eltltmtyufkf4aNpZgCfYEQSiIwa63uYhWDC-ICGWfZ9qNYN-zIsLqMcia0Yq83A-P0IkpbxhNy_1r4rZWmhxEPHiMpji9sOLeb6Ea6nii0uGpnaoQjyhGeopx7z1WHbQ2g6T/s80/bubble2.png)no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c2:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}  
#c3 {margin-top:125px; margin-left: 270px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnvW1Y3SX1TJBv35EqOZnc0dAXuovy745j5hOcg-QfQa2ZwUvOOhEmlF0ea-5IXPHvYStF2-moRzY5_sg185EDA44mrKd74ZfUnRwPPl-cXs8CxOR9qEHsXFWE5-X8CLqJrJmg6DDpIv_/s80/bubble3.png) no-repeat; -webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c3:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
#c4 {margin-top:155px; margin-left:200px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zusq8T5KaWRkk8RjzGTeEmp_PnxuXnpfmBSXIPyMiLG2palyAjfT8ObRBrz6R1Oxl8CraDBu-J9ee4wMmXjW7wYXTP7ql02uVnkrL3n7PR3Y64GOBOcLiXWtsGYCYjIrKmwviEG7IkfW/s80/bubble4.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c4:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
#c5 {margin-top:126px; margin-left:46px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmpKilqASPFftjbRIjNpTqqGxO9je_-H9gHXfJ4vm1qc_igGIuMpFTAZqGuk1YcpTr04_vRzLlllMtYz2y2UwyKJ_w1l0yN0gktEJtQubebjPWy6DQY4c5tS9ifaQCrCGSeI_CQDh1XJ13/s80/bubble5.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c5:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
#c6 {margin-top:158px;margin-left:120px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(4.bp.blogspot.com/-vRz4uX1i-Pk/UK-WfpUCsQI/AAAAAAAAG7Q/uWC_BhanejY/s80/bubble6.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c6:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
<!--Colorful Bubble Menu Final--> 

Note que se quiser substituir as imagens por cores, basta substituir

background: url(LINK DA IMAGEM) no-repeat;

por...

background-color: #código da cor;

...o qual você pode obter nesta tabela aqui.
Visualize e se tudo estiver bem, salve. Ainda não se vê nada de diferente.
Agora cole este código em qualquer lugar que quiser que o menu apareça:

 <div id="c1">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c2">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c3">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c4">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c5">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c6">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div> 

Você poderá colar próximo a sua foto de perfil por exemplo, ou do ladinho do blog, ou próximo a algum gadget que prefira, tudo dependede onde se posiciona ^-^ Espero que gostem e beijus