CSS3圆环动画技能栏菜单

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3圆环动画技能栏菜单

分类

CSS3

描述

一款非常漂亮的动画技能栏菜单效果，页面载入的时候才可年到效果，学习CSS3前端设计比较不错的代码实例，测试本效果请使用火狐或Chrome等浏览器，IE9可运行，IE8/8/6杯具！