CSS Flower Navigation All Codes

CSS Flower Navigation All Codes

CSS Flower Navigasi All Codes.
Cukup Salin kode berikut, lalu tempatkan pada area wilayah kode ]]></b:skin> pada Template Anda.

CSS Concept

/*!CSS flower navigation menu
inspect at: 'oct 23,2014'
visit: http://sahabatblogger77.blogspot.com/
*
type code: no javascript (lisenci MTT)
author: Devy indriyani
*/
.flower {
  width: 120px;
  height: 120px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin:80px auto;}

.flower .spinner,.flower .inner,.flower .counterspin {height: 100%;}
.flower .spinner {
  -webkit-animation: spin 45s infinite linear;
  -moz-animation: spin 45s infinite linear;
  -o-animation: spin 45s infinite linear;
  -ms-animation: spin 45s infinite linear;
  animation: spin 45s infinite linear;}

.flower .counterspin {
  -webkit-animation: counter-spin 45s infinite linear;
  -moz-animation: counter-spin 45s infinite linear;
  -o-animation: counter-spin 45s infinite linear;
  -ms-animation: counter-spin 45s infinite linear;
  animation: counter-spin 45s infinite linear;}

.flower .cover {
  width: 120px;
  height: 120px;
  background: url(https://1.bp.blogspot.com/-EyCpeqgrTk8/Umq4e9uoNUI/AAAAAAAAADA/6qMziIXwzU8/s60/734662_418084968280133_439055412_n.jpg);%3Cbr />   -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 2px 4px #d1d1d1, 0 0 20px 4px #000;
  box-shadow: 0 0 2px 4px #d1d1d1, 0 0 20px 4px #000;
  position: absolute;
  top: 0;}

.flower a {display: block;}
.flower .child {
  width: 120px;
  height: 120px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 0;}

.flower .child .leaf {
  height: 100%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  visibility: hidden;
  -webkit-transition: -webkit-transform 3.2s ease-in-out;
  -moz-transition: -moz-transform 3.2s ease-in-out;
  -o-transition: -o-transform 3.2s ease-in-out;
  -ms-transition: -ms-transform 3.2s ease-in-out;
  transition: transform 3.2s ease-in-out;}

.flower .child:nth-child(1) {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);}

.flower .child:nth-child(1) .leaf {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4AbpeVL1_jilyTwE799D-PGIywxcXCHUytdfTnJ0CXNP555l7IXVAHZtL84LhdUpyYXBYxNuO2g-HPTDGVhp34sACH8rAVBC_3Xw1w3r-7wAXYZM5vU5NjWQugKLQiNEvgcWWogRers/s170/sb77-image2.png);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
  opacity: 0.94;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
  filter: alpha(opacity=94);
  -webkit-transition: -webkit-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -moz-transition: -moz-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -o-transition: -o-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -ms-transition: -ms-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;}

.flower .child:nth-child(1) .leaf .glass-holder {
  height: 100%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);}

.flower .child:nth-child(2) {
  -webkit-transform: rotate(-18deg);
  -moz-transform: rotate(-18deg);
  -o-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  transform: rotate(-18deg);}

.flower .child:nth-child(2) .leaf {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOc8Spvyp2IbqzZIhfSCDm3wQc7skDyM8BrM-wTurU2YdSmEH7VZWZn3lRHEjJvkuVACnEe54byyPC92EqMtMQHhbvi5L1hrMFiPiUVumE3ptLtIeqmjEnamZQ7U29zlQ2rt7AZX-kEi4/s170/sb77-image3.png);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
  opacity: 0.94;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
  filter: alpha(opacity=94);
  -webkit-transition: -webkit-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -moz-transition: -moz-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -o-transition: -o-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -ms-transition: -ms-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;}

.flower .child:nth-child(2) .leaf .glass-holder {
  height: 100%;
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  transform: rotate(18deg);}

.flower .child:nth-child(3) {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  transform: rotate(54deg);}

.flower .child:nth-child(3) .leaf {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dLF798MqC9GOuZNX46DhuOrU0E3aLyYfLJK446SVbp0QXWMQ-9yoGFYxPMH55r4fxHr96KWRNivxhW_rSyjBtmNwdiHjXqBZf5MkZcUx6reeVYwnXR7eAFt6tlI0a3s_LRafpi3NVNU/s170/sb77-image4.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
  opacity: 0.94;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
  filter: alpha(opacity=94);
  -webkit-transition: -webkit-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -moz-transition: -moz-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -o-transition: -o-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -ms-transition: -ms-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;}

.flower .child:nth-child(3) .leaf .glass-holder {
  height: 100%;
  -webkit-transform: rotate(-54deg);
  -moz-transform: rotate(-54deg);
  -o-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  transform: rotate(-54deg);}

.flower .child:nth-child(4) {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  transform: rotate(126deg);}

.flower .child:nth-child(4) .leaf {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKaQZOHp3VXsuAG75rhuaNCJO_IURZWJDYs8LLBKYW_YDiwAp1_piCaE_fACuCp1QM5wVWYKsit1E2BJnhMKJkjI84bgYXww5aEDPmFLnlAsCSd3eDk5yotCJPdRvlcTB6AF4y72QeVsw/s170/sb77-image5.png);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
  opacity: 0.94;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
  filter: alpha(opacity=94);
  -webkit-transition: -webkit-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -moz-transition: -moz-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -o-transition: -o-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -ms-transition: -ms-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;}

.flower .child:nth-child(4) .leaf .glass-holder {
  height: 100%;
  -webkit-transform: rotate(-126deg);
  -moz-transform: rotate(-126deg);
  -o-transform: rotate(-126deg);
  -ms-transform: rotate(-126deg);
  transform: rotate(-126deg);}

.flower .child:nth-child(5) {
  -webkit-transform: rotate(198deg);
  -moz-transform: rotate(198deg);
  -o-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  transform: rotate(198deg);}

.flower .child:nth-child(5) .leaf {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYFtdk2wfQbefrkaNK1MV1eX6Jrw7w1nlf5YZay93zeCk6RSQH3w6_aXw4-xWOqk_ML8Napc247AM1OR3-Nz_J2SzoLF8suvEpxtpQLbt1Zub5opdIPvFZ0BICuYohyUsryMbZ_cpViU/s75/sb77-image8.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
  opacity: 0.94;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
  filter: alpha(opacity=94);
  -webkit-transition: -webkit-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -moz-transition: -moz-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -o-transition: -o-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  -ms-transition: -ms-transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;}

.flower .child:nth-child(5) .leaf .glass-holder {
  height: 100%;
  -webkit-transform: rotate(-198deg);
  -moz-transform: rotate(-198deg);
  -o-transform: rotate(-198deg);
  -ms-transform: rotate(-198deg);
  transform: rotate(-198deg);}

.flower .glass {
  height: 100%;
  -webkit-transition: -webkit-transform 3.2s ease-in-out;
  -moz-transition: -moz-transform 3.2s ease-in-out;
  -o-transition: -o-transform 3.2s ease-in-out;
  -ms-transition: -ms-transform 3.2s ease-in-out;
  transition: transform 3.2s ease-in-out;}

.flower:hover {
  -webkit-transform: scale(3.4);
  -moz-transform: scale(3.4);
  -o-transform: scale(3.4);
  -ms-transform: scale(3.4);
  transform: scale(3.4);}

.flower:hover .inner {
  -webkit-transform: scale(0.294117647058824);
  -moz-transform: scale(0.294117647058824);
  -o-transform: scale(0.294117647058824);
  -ms-transform: scale(0.294117647058824);
  transform: scale(0.294117647058824);}

.flower:hover .leaf {
  visibility: visible;
  -webkit-transform: rotate(720deg) translateX(144px) rotate(2250deg);
  -moz-transform: rotate(720deg) translateX(144px) rotate(2250deg);
  -o-transform: rotate(720deg) translateX(144px) rotate(2250deg);
  -ms-transform: rotate(720deg) translateX(144px) rotate(2250deg);
  transform: rotate(720deg) translateX(144px) rotate(2250deg);}

.flower:hover .leaf .glass {
  -webkit-transform: rotate(-2970deg);
  -moz-transform: rotate(-2970deg);
  -o-transform: rotate(-2970deg);
  -ms-transform: rotate(-2970deg);
  transform: rotate(-2970deg);}

a {outline: 0;}
@-moz-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
    -o-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);}}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
    -o-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);}}

@-o-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
    -o-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);}}

@keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
    -o-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);}}

@-moz-keyframes counter-spin {
  to {
    -webkit-transform: rotate(-1turn);
    -moz-transform: rotate(-1turn);
    -o-transform: rotate(-1turn);
    -ms-transform: rotate(-1turn);
    transform: rotate(-1turn);}}

@-webkit-keyframes counter-spin {
  to {
    -webkit-transform: rotate(-1turn);
    -moz-transform: rotate(-1turn);
    -o-transform: rotate(-1turn);
    -ms-transform: rotate(-1turn);
    transform: rotate(-1turn);}}

@-o-keyframes counter-spin {
  to {
    -webkit-transform: rotate(-1turn);
    -moz-transform: rotate(-1turn);
    -o-transform: rotate(-1turn);
    -ms-transform: rotate(-1turn);
    transform: rotate(-1turn);}}

@keyframes counter-spin {
  to {
    -webkit-transform: rotate(-1turn);
    -moz-transform: rotate(-1turn);
    -o-transform: rotate(-1turn);
    -ms-transform: rotate(-1turn);
    transform: rotate(-1turn);}}

DEMO SHOW


HTML Markup

<div class="flower">
<div class="inner">
<div class="spinner">
<div class="child">
<a href="http://sahabatblogger77.blogspot.com" target="_blank" class="leaf">
<div class="glass-holder">
<div class="counterspin">
</div>
</div>
</a></div>
<div class="child">
<a href="http://sahabatblogger77.blogspot.com/search/label/Blogging%20Tips" target="_blank" class="leaf">
<div class="glass-holder">
<div class="counterspin">
</div>
</div>
</a></div>
<div class="child">
<a href="http://sahabatblogger77.blogspot.com/search/label/CSS%20Widget" target="_blank" class="leaf">
<div class="glass-holder">
<div class="counterspin">
</div>
</div>
</a></div>
<div class="child">
<a href="http://sahabatblogger77.blogspot.com/search/label/CSS%20Code" target="_blank" class="leaf">
<div class="glass-holder">
<div class="counterspin">
</div>
</div>
</a></div>
<div class="child">
<a href="http://sahabatblogger77.blogspot.com/search/label/SEO%20Trik" target="_blank" class="leaf">
<div class="glass-holder">
<div class="counterspin">
</div>
</div>
</a></div>
</div>
<div class="cover">
</div>
</div>
</div>

Referensi URL ➟ CSS Flower Navigasi Efek Rotasi