0

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(http://3.bp.blogspot.com/-EyCpeqgrTk8/Umq4e9uoNUI/AAAAAAAAADA/6qMziIXwzU8/s60/734662_418084968280133_439055412_n.jpg);
  -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(http://3.bp.blogspot.com/-jqLaKoyVk4U/U9ExRFyyvWI/AAAAAAAAAuU/0mFetpnESfo/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(http://1.bp.blogspot.com/-7KhQIS1814A/U9Esp_GjyFI/AAAAAAAAAt4/SpxT7d5jTW8/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(http://4.bp.blogspot.com/-y3vayUFhGso/U9E_3WTlrRI/AAAAAAAAAvE/0ZLAhTJkMTQ/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(http://3.bp.blogspot.com/-yQaXbMykCQ0/U9E5cPE31BI/AAAAAAAAAuk/5U8Sl8AiMOg/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(http://2.bp.blogspot.com/-e7eUUarVtlQ/U9E5ce4jjRI/AAAAAAAAAuo/FdmiEHTmKnk/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