CSS3圆环动画技能栏菜单

时间：2013-06-04 16:52 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/style.css" rel="stylesheet">
<title>CSS3动画技能栏</title>
<style>
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
    margin: 0;
    padding: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}   
img{
	border: none;
}
/* DEMO BODY */
body{
	overflow-x: hidden;
	overflow-y: scroll;
	font-family: MuseoSans, Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	color: #444;
	border-top: 3px solid #444;
	background-color: #E4E6E5;
	overflow-x:hidden;
}
h1.title_name {
    color: #685440;
    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
    font-size: 3em;
    font-weight: normal;
    line-height: 1em;
    margin: 0;
    padding: 10px 0 0;
    text-align: center;
background-color:#555555;
}
h1.title_name span {
    color: rgba(255, 255, 255, 0.9);
    font-family: normal Georgia,'Times New Roman',Times,serif;
    font-size: 0.9em;
}
h1.title_name small {
    color: rgba(85, 85, 85, 0.5);
    display: block;
    font-family: normal Verdana,Arial,Helvetica,sans-serif;
    font-size: 0.3em;
    font-weight: bold;
    letter-spacing: 0.5em;
    text-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}
a{
	color:#409F89;
	text-decoration:none;
	-webkit-transition: color .25s ease-out;
	-moz-transition: color .25s ease-out;
	-o-transition: color .25s ease-out;
	transition: color .25s ease-out;
}
a:hover{
	color:#444;
	text-decoration:none;
}
footer {
	width:100%;
	margin: 0 auto;
	padding:10px;
	text-align: center;
	clear: both;
}
footer p { 
	letter-spacing: 1px; 
	color:#685440;
	font-size:0.9em;
	text-shadow: 1px 1px 1px #FFFFFF;
}
section .demo {
	width: 530px;
	margin:15em auto;
	overflow: hidden;
}
ul.notes { clear:both;}
ul.notes li {
	float:left;
	margin-right:3em;
	display:inline;
}
ul.notes li:last-child {margin:0;}
ul.notes li span.skill {
	display:block;
	text-align:center;
	padding: 10px 0;
	text-shadow: 1px 0 0 #FFFFFF;
}
.notesite {
	display: inline-block;
	position:relative;
	width:1em;
	height:1em;
	font-size: 5.4em;
	cursor:default;
}
.notesite > .percent {
	position: absolute;
	top: 20px;
	left: 0;
	width:100%;
	font-size:25px;
	text-align:center;
	z-index:2;
}
.notesite > .percent .dec {
	font-size:15px;
}
.notesite > #slice {
	position:absolute;
	width:1em;
	height:1em;
	clip:rect(0px,1em,1em,0.5em);
}
.notesite > #slice.gt50 {
	clip:rect(auto, auto, auto, auto);
}
.notesite > #slice > .pie {
	position:absolute;
	border: 0.1em solid #444;
	width:0.8em; 
	height:0.8em;
	clip:rect(0em,0.5em,1em,0em);
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em; 
	border-radius:0.5em;
}
li.html .notesite > #slice > .pie {
	border-color:#DF6C4F;
}
li.css .notesite > #slice > .pie {
	border-color:#ECD06F;
}
li.ps .notesite > #slice > .pie {
	border-color:#1A99AA;
}
li.php .notesite > #slice > .pie {
	border-color:#409F89;
}
li.wp .notesite > #slice > .pie {
	border-color:#999999;
}
.notesite > #slice > .pie.fill {
	-moz-transform:rotate(180deg) !important;
	-webkit-transform:rotate(180deg) !important;
	-o-transform:rotate(180deg) !important;
	transform:rotate(180deg) !important;
}
.notesite.fill > .percent {
	display: none;
}
.notesite:after {
	content:'';
	display:block;
	position:absolute;
	top:0.1em;
	left:0.1em;
	width:0.8em;
	height:0.8em;
	background:#E4E6E5;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em; 
	border-radius:0.5em;
	z-index:1;
}
.notesite:before {
	content:'';
	display:block;
	position:absolute;
	width:1em;
	height:1em;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em; 
	border-radius:0.5em;
	zoom: 1;
	filter: alpha(opacity=50);
	opacity:.5;
	z-index:0;
}
li.html .notesite:before {
	background:#DF6C4F;
}
li.css .notesite:before {
	background:#ECD06F;
}
li.ps .notesite:before {
	background:#1A99AA;
}
li.php .notesite:before {
	background:#89cabb;
}
li.wp .notesite:before {
	background:#D2D2D2;
}
</style>
</head>
<body class="home">
<div class="wrapper">
<section>
<div class="demo">
    <ul class="notes">
    <li class="html"><div class="notesite" id="note_0" dir="10"></div><span class="skill">HTML</span></li>
    <li class="css"><div class="notesite" id="note_1" dir="10"></div><span class="skill">CSS</span></li>
    <li class="ps"><div class="notesite" id="note_2" dir="8"></div><span class="skill">PHOTOSHOP</span></li>
    <li class="php"><div class="notesite" id="note_3" dir="5"></div><span class="skill">PHP</span></li>
    <li class="wp"><div class="notesite" id="note_4" dir="7"></div><span class="skill">WORDPRESS</span></li>
    </ul>
</div>
</section>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
//圆形定义
function drawTimer(id, percent) {
    $('#note_' + id).html('<div class="percent"></div><div id="slice"' + (percent > 5 ? ' class="gt50"': '') + '><div class="pie"></div>' + (percent > 5 ? '<div class="pie fill"></div>': '') + '</div>');
    var deg = 360 / 10 * percent;
    $('#note_' + id + ' #slice .pie').css({
        '-moz-transform': 'rotate(' + deg + 'deg)',
        '-webkit-transform': 'rotate(' + deg + 'deg)',
        '-o-transform': 'rotate(' + deg + 'deg)',
        'transform': 'rotate(' + deg + 'deg)'
    });
    percent = Math.floor(percent * 100) / 100;
    arr = percent.toString().split('.');
    int = arr[0];
    $('#note_' + id + ' .percent').html('<span class="int">' + int + '</span>');
}
//计算值
function stopNote(id, note) {
    var seconds = (timerFinish - (new Date().getTime())) / 100;
    var percent = 100 - ((seconds / timerSeconds) * 10);
    percent = Math.floor(percent * 100) / 100;
    if (percent <= note) {
        drawTimer(id, percent);
    } else {
        note = $('#note_' + id).attr('dir');
        arr = note.toString().split('.');
        $('#note_' + id + ' .percent .int').html(arr[0]);
    }
}
//旋转速度
$(document).ready(function() {
    timerSeconds = 8;
    timerFinish = new Date().getTime() + (timerSeconds * 1000);
    $('.notesite').each(function(id) {
        note = $('#note_' + id).attr('dir');
        timer = setInterval('stopNote(' + id + ', ' + note + ')', 0);
    });
});
</script>


<script type="text/javascript"> 
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5ba3cdaf3cd432d10c61c4fb73b69ab9' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一款非常漂亮的动画技能栏菜单效果，页面载入的时候才可年到效果，学习CSS3前端设计比较不错的代码实例，测试本效果请使用火狐或Chrome等浏览器，IE9可运行，IE8/8/6杯具！ CSS3圆环动画技能栏菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/5151.html

CSS3圆环动画技能栏菜单

网页特效