Demo Circular Icons Menu With Animation

Dengan CSS3 kita dapat menciptakan satu set ikon melingkar dengan animasi. Saat hover pada ikon, ikon akan terlihat membesar (Zoom) dan ikon lainnya, yaitu ikon yang berdekatan pada kedua sisi ikon juga akan terlihat membesar tetapi dengan ukuran zoom yang lebih kecil dari ikon yang disorot.

Ini hanya menggunakan daftar unordered sederhana dengan link grafis yang bekerja dengan sempurna di semua browser modern termasuk IE9 +. Dalam hal ini, IE9 tidak mendukung transisi animasi yang digunakan.

D e m o

Letakan cursor pada Ikon...

• 
• 
• 
• 
• 
• 
• 
• 
• 

Untuk menciptakan Circular Icons Menu with animation, silahkan gunakan kode lengkap berikut ini:

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>

Full Code

Sumber : CSSplay