Demo Circular Icons Menu With Animation

D e m o

Letakan cursor pada Ikon...

Kode CSS
<style type="text/css">
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated undefinedx)html
is available at http://www.cssplay.co.uk/menus/cssplay-circular-icons.html
Copyright undefinedc) Stu Nicholls. All rights reserved.
This stylesheet and the associated undefinedx)html may be modified in any
way to fit your requirements.
=================================================================== */
.circles {width:320px; height:320px; border-radius:320px; margin:50px auto; position:relative; border-radius:320px;}
.circles a.tgt {display:block; position:absolute; left:128px; top:0; width:64px; height:64px; border-radius:64px; z-index:100; background:urlundefinedhttps://sites.google.com/site/archivesiugi/2013-awal/circular.trans.gif);
-webkit-transform-origin:32px 160px;
-moz-transform-origin:32px 160px;
-ms-transform-origin:32px 160px;
-o-transform-origin:32px 160px;
transform-origin:32px 160px;
}

.circle li:nth-childundefined2),
.circles a:nth-childundefined2) {
-webkit-transform: rotateundefined40deg);
-moz-transform: rotateundefined40deg);
-ms-transform: rotateundefined40deg);
-o-transform: rotateundefined40deg);
transform: rotateundefined40deg);
}
.circle li:nth-childundefined3),
.circles a:nth-childundefined3) {
-webkit-transform: rotateundefined80deg);
-moz-transform: rotateundefined80deg);
-ms-transform: rotateundefined80deg);
-o-transform: rotateundefined80deg);
transform: rotateundefined80deg);
}
.circle li:nth-childundefined4),
.circles a:nth-childundefined4) {
-webkit-transform: rotateundefined120deg);
-moz-transform: rotateundefined120deg);
-ms-transform: rotateundefined120deg);
-o-transform: rotateundefined120deg);
transform: rotateundefined120deg);
}
.circle li:nth-childundefined5),
.circles a:nth-childundefined5) {
-webkit-transform: rotateundefined160deg);
-moz-transform: rotateundefined160deg);
-ms-transform: rotateundefined160deg);
-o-transform: rotateundefined160deg);
transform: rotateundefined160deg);
}
.circle li:nth-childundefined6),
.circles a:nth-childundefined6) {
-webkit-transform: rotateundefined200deg);
-moz-transform: rotateundefined200deg);
-ms-transform: rotateundefined200deg);
-o-transform: rotateundefined200deg);
transform: rotateundefined200deg);
}
.circle li:nth-childundefined7),
.circles a:nth-childundefined7) {
-webkit-transform: rotateundefined240deg);
-moz-transform: rotateundefined240deg);
-ms-transform: rotateundefined240deg);
-o-transform: rotateundefined240deg);
transform: rotateundefined240deg);
}
.circle li:nth-childundefined8),
.circles a:nth-childundefined8) {
-webkit-transform: rotateundefined280deg);
-moz-transform: rotateundefined280deg);
-ms-transform: rotateundefined280deg);
-o-transform: rotateundefined280deg);
transform: rotateundefined280deg);
}
.circle li:nth-childundefined9),
.circles a:nth-childundefined9) {
-webkit-transform: rotateundefined320deg);
-moz-transform: rotateundefined320deg);
-ms-transform: rotateundefined320deg);
-o-transform: rotateundefined320deg);
transform: rotateundefined320deg);
}

ul.circle {padding:0; margin:0; list-style:none; width:320px; height:320px; position:absolute; left:0; top:0; z-index:10;}
ul.circle li {position:absolute; left:128px; top:0; width:64px; height:64px; border-radius:64px;
-webkit-transform-origin:32px 160px;
-moz-transform-origin:32px 160px;
-ms-transform-origin:32px 160px;
-o-transform-origin:32px 160px;
transform-origin:32px 160px;
}
ul.circle li b {display:block; width:64px; height:64px; border-radius:64px; text-align:center; margin:0; position:relative;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.circle li b img {width:62.5%; height:62.5%; padding-top:18.75%;
-webkit-transition: 0.5s;
-moz-transition: 2s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

.circle li:nth-childundefined2) b {
-webkit-transform: rotateundefined-40deg);
-moz-transform: rotateundefined-40deg);
-ms-transform: rotateundefined-40deg);
-o-transform: rotateundefined-40deg);
transform: rotateundefined-40deg);
}
.circle li:nth-childundefined3) b {
-webkit-transform: rotateundefined-80deg);
-moz-transform: rotateundefined-80deg);
-ms-transform: rotateundefined-80deg);
-o-transform: rotateundefined-80deg);
transform: rotateundefined-80deg);
}
.circle li:nth-childundefined4) b {
-webkit-transform: rotateundefined-120deg);
-moz-transform: rotateundefined-120deg);
-ms-transform: rotateundefined-120deg);
-o-transform: rotateundefined-120deg);
transform: rotateundefined-120deg);
}
.circle li:nth-childundefined5) b {
-webkit-transform: rotateundefined-160deg);
-moz-transform: rotateundefined-160deg);
-ms-transform: rotateundefined-160deg);
-o-transform: rotateundefined-160deg);
transform: rotateundefined-160deg);
}
.circle li:nth-childundefined6) b {
-webkit-transform: rotateundefined-200deg);
-moz-transform: rotateundefined-200deg);
-ms-transform: rotateundefined-200deg);
-o-transform: rotateundefined-200deg);
transform: rotateundefined-200deg);
}
.circle li:nth-childundefined7) b {
-webkit-transform: rotateundefined-240deg);
-moz-transform: rotateundefined-240deg);
-ms-transform: rotateundefined-240deg);
-o-transform: rotateundefined-240deg);
transform: rotateundefined-240deg);
}
.circle li:nth-childundefined8) b {
-webkit-transform: rotateundefined-280deg);
-moz-transform: rotateundefined-280deg);
-ms-transform: rotateundefined-280deg);
-o-transform: rotateundefined-280deg);
transform: rotateundefined-280deg);
}
.circle li:nth-childundefined9) b {
-webkit-transform: rotateundefined-320deg);
-moz-transform: rotateundefined-320deg);
-ms-transform: rotateundefined-320deg);
-o-transform: rotateundefined-320deg);
transform: rotateundefined-320deg);
}

.circles a.tgt:hover {display:block; position:absolute; left:96px; top:-32px; width:128px; height:128px; border-radius:128px; z-index:100; z-index:50;
-webkit-transform-origin:64px 192px;
-moz-transform-origin:64px 192px;
-ms-transform-origin:64px 192px;
-o-transform-origin:64px 192px;
transform-origin:64px 192px;
}
.circles a.p1:hover ~ .circle li:nth-childundefined1) b,
.circles a.p2:hover ~ .circle li:nth-childundefined2) b,
.circles a.p3:hover ~ .circle li:nth-childundefined3) b,
.circles a.p4:hover ~ .circle li:nth-childundefined4) b,
.circles a.p5:hover ~ .circle li:nth-childundefined5) b,
.circles a.p6:hover ~ .circle li:nth-childundefined6) b,
.circles a.p7:hover ~ .circle li:nth-childundefined7) b,
.circles a.p8:hover ~ .circle li:nth-childundefined8) b,
.circles a.p9:hover ~ .circle li:nth-childundefined9) b
{width:128px; height:128px; border-radius:128px; margin-left:-32px; margin-top:-32px;}

.circles a.p1:hover ~ .circle li:nth-childundefined2) b,
.circles a.p2:hover ~ .circle li:nth-childundefined3) b,
.circles a.p3:hover ~ .circle li:nth-childundefined4) b,
.circles a.p4:hover ~ .circle li:nth-childundefined5) b,
.circles a.p5:hover ~ .circle li:nth-childundefined6) b,
.circles a.p6:hover ~ .circle li:nth-childundefined7) b,
.circles a.p7:hover ~ .circle li:nth-childundefined8) b,
.circles a.p8:hover ~ .circle li:nth-childundefined9) b,
.circles a.p9:hover ~ .circle li:nth-childundefined1) b
{width:112px; height:112px; border-radius:112px; margin-left:-24px; margin-top:-24px;}

.circles a.p1:hover ~ .circle li:nth-childundefined3) b,
.circles a.p2:hover ~ .circle li:nth-childundefined4) b,
.circles a.p3:hover ~ .circle li:nth-childundefined5) b,
.circles a.p4:hover ~ .circle li:nth-childundefined6) b,
.circles a.p5:hover ~ .circle li:nth-childundefined7) b,
.circles a.p6:hover ~ .circle li:nth-childundefined8) b,
.circles a.p7:hover ~ .circle li:nth-childundefined9) b,
.circles a.p8:hover ~ .circle li:nth-childundefined1) b,
.circles a.p9:hover ~ .circle li:nth-childundefined2) b
{width:96px; height:96px; border-radius:96px; margin-left:-16px; margin-top:-16px;}

.circles a.p1:hover ~ .circle li:nth-childundefined4) b,
.circles a.p2:hover ~ .circle li:nth-childundefined5) b,
.circles a.p3:hover ~ .circle li:nth-childundefined6) b,
.circles a.p4:hover ~ .circle li:nth-childundefined7) b,
.circles a.p5:hover ~ .circle li:nth-childundefined8) b,
.circles a.p6:hover ~ .circle li:nth-childundefined9) b,
.circles a.p7:hover ~ .circle li:nth-childundefined1) b,
.circles a.p8:hover ~ .circle li:nth-childundefined2) b,
.circles a.p9:hover ~ .circle li:nth-childundefined3) b
{width:80px; height:80px; border-radius:80px; margin-left:-8px; margin-top:-8px;}

.circles a.p1:hover ~ .circle li:nth-childundefined9) b,
.circles a.p2:hover ~ .circle li:nth-childundefined1) b,
.circles a.p3:hover ~ .circle li:nth-childundefined2) b,
.circles a.p4:hover ~ .circle li:nth-childundefined3) b,
.circles a.p5:hover ~ .circle li:nth-childundefined4) b,
.circles a.p6:hover ~ .circle li:nth-childundefined5) b,
.circles a.p7:hover ~ .circle li:nth-childundefined6) b,
.circles a.p8:hover ~ .circle li:nth-childundefined7) b,
.circles a.p9:hover ~ .circle li:nth-childundefined8) b
{width:112px; height:112px; border-radius:112px; margin-left:-24px; margin-top:-24px;}

.circles a.p1:hover ~ .circle li:nth-childundefined8) b,
.circles a.p2:hover ~ .circle li:nth-childundefined9) b,
.circles a.p3:hover ~ .circle li:nth-childundefined1) b,
.circles a.p4:hover ~ .circle li:nth-childundefined2) b,
.circles a.p5:hover ~ .circle li:nth-childundefined3) b,
.circles a.p6:hover ~ .circle li:nth-childundefined4) b,
.circles a.p7:hover ~ .circle li:nth-childundefined5) b,
.circles a.p8:hover ~ .circle li:nth-childundefined6) b,
.circles a.p9:hover ~ .circle li:nth-childundefined7) b
{width:96px; height:96px; border-radius:96px; margin-left:-16px; margin-top:-16px;}

.circles a.p1:hover ~ .circle li:nth-childundefined7) b,
.circles a.p2:hover ~ .circle li:nth-childundefined8) b,
.circles a.p3:hover ~ .circle li:nth-childundefined9) b,
.circles a.p4:hover ~ .circle li:nth-childundefined1) b,
.circles a.p5:hover ~ .circle li:nth-childundefined2) b,
.circles a.p6:hover ~ .circle li:nth-childundefined3) b,
.circles a.p7:hover ~ .circle li:nth-childundefined4) b,
.circles a.p8:hover ~ .circle li:nth-childundefined5) b,
.circles a.p9:hover ~ .circle li:nth-childundefined6) b
{width:80px; height:80px; border-radius:80px; margin-left:-8px; margin-top:-8px;}
</style>
<style type="text/css">
.isipost {
background :transparent;font:14px Georgia,Tahoma;color: rgbundefined25, 48, 8);
}
.poststart ul li {
background-image : urlundefined);
}
</style>

Kode HTML
<div class="circles">
<a class="tgt p1" href="index.html"></a>
<a class="tgt p2" href="index.html"></a>
<a class="tgt p3" href="index.html"></a>
<a class="tgt p4" href="index.html"></a>
<a class="tgt p5" href="index.html"></a>
<a class="tgt p6" href="index.html"></a>
<a class="tgt p7" href="index.html"></a>
<a class="tgt p8" href="index.html"></a>
<a class="tgt p9" href="index.html"></a>

<ul class="circle">
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i1.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i2.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i3.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i4.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i5.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i6.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i7.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i8.png" alt="" /></b></li>
<li><b><img src="https://sites.google.com/site/archivesiugi/2013-awal/circular.i9.png" alt="" /></b></li>
</ul>