کد css حلقه ها
- نویسنده موضوع TIRNA
- تاریخ شروع
اینم یکی بهترش 
کد:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div.circle {
margin: 100px auto;
width:200px;
height:200px;
}
div.outer-circle {
/* Set the background and position */
background:transparent;
width:122px;
height:122px;
/* Set the border and the
border radius to be exactly
half the width and height
so that it looks like a circle */
-webkit-border-radius: 61px;
-moz-border-radius: 61px;
border-radius: 61px;
border:1px solid #aaaaaa;
/* You will need to use
position:absolute so that
the circles can appear on top of
each other.
Additionally, the z-index will
be used to determine which DIV
should appear lowest or highest */
position:absolute;
z-index:800;
/* Finally, we set the transition so
that the circle grows with an
animation */
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
div.outer-circle.hover {
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
transform: scale(1.45);
}
div.inner-circle {
margin:14px;
background:#3f96d1;
width:96px;
height:96px;
font-size:11px;
color:#FFF;
line-height:96px;
text-align:center;
font-family:Tahoma;
/* Set the border radius to half
the width and height to make it
look like a circle */
-webkit-border-radius: 48px;
-moz-border-radius: 48px;
border-radius: 48px;
/* For this circle, we will be using
an inset box shadow to replicate
the effect used. */
-webkit-box-shadow: inset 0px 1px 1px 0px #575757;
-moz-box-shadow: inset 0px 1px 1px 0px #575757;
box-shadow: inset 0px 1px 1px 0px #575757;
/* We can also add a bottom border
to make it look slightly more 3D */
border-bottom:1px solid #FFF;
/* You will need to use
position:absolute so that
the circles can appear on top of
each other.
Additionally, the z-index will
be used to determine which DIV
should appear lowest or highest */
position:absolute;
z-index:1000;
}
</style>
<script language="javascript">
$(function() {
$('div.circle').mouseover(function() {
$('div.outer-circle').addClass('hover');
$('div.middle-circle').addClass('hover');
});
$('div.circle').mouseout(function() {
$('div.outer-circle').removeClass('hover');
$('div.middle-circle').removeClass('hover');
});
});
</script>
<title>PersianScript.ir</title>
</head>
<body>
<div class="circle">
<div class="outer-circle"></div>
<div class="middle-circle"></div>
<div class="inner-circle">حلقه پرشین اسکریپت ;) </div>
</div>
</body>
</html>