Welcome, Old Sport!

动画效果的技能栏

by ilikecss ON 2013/01/25 5810

动画效果的技能栏抓住感觉继续教程,今天介绍的是一款基于CSS3jQuery的动画技能栏。大家可以看我的About页面右边就有一个技能栏,这是以前做的还没有动画效果。此类技能栏在你的个人介绍页面是非常重要的,外行人看起来很牛X, 猎头或企业人事可以直接了解到你的技能掌握状况,下面就一起来看下如何制作的。(由于github最近不稳定,我把代码上传到code google了)。

Step1. 创建HTML

<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>

以上技能的名称可以自行修改。li class=”” 是圈圈的颜色。

Step2. 创建CSS

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; /* 1 - (2 * border width) */
	height:0.8em; /* 1 - (2 * border width) */
	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;
}

Step3. 插入脚本

//圆形定义 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);
    });
});
9条评论
  1. #1

    Marvin说道:

    这个好棒~

  2. #2

    Q_Queenia说道:

    很实用
    而且教程写得也很详尽
    :neutral:

  3. #3

    糖网说道:

    不错哦。学习了。呵呵




TOP