CSS3圓環動畫技能欄菜單

2024-09-05 12:17:04

字體：大中小

來源：轉載

供稿：網友

一款非常漂亮的動畫技能欄菜單效果，頁面載入的時候才可年到效果，學習CSS3前端設計比較不錯的代碼實例，測試本效果請使用火狐或Chrome等瀏覽器，IE9可運行，IE8/8/6杯具！

<!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   id="tzvhp5r"   class="wrapper"><section><div   id="5vjv5jz"   class="demo">    <ul class="notes">    <li id="nthttbz"    class="html"><div   id="x55n5df"   class="notesite" id="note_0" dir="10"></div><span id="n33f3hb"    class="skill">HTML</span></li>    <li id="5nrlj5b"    class="css"><div   id="5t5dlbt"   class="notesite" id="note_1" dir="10"></div><span id="x3dj55x"    class="skill">CSS</span></li>    <li id="bl55hx5"    class="ps"><div   id="rn5r3xx"   class="notesite" id="note_2" dir="8"></div><span id="bv5db5p"    class="skill">PHOTOSHOP</span></li>    <li id="fvplbh5"    class="php"><div   id="55lp5rh"   class="notesite" id="note_3" dir="5"></div><span id="53zdrr5"    class="skill">PHP</span></li>    <li id="53vhdlt"    class="wp"><div   id="z555t55"   class="notesite" id="note_4" dir="7"></div><span id="3x15xjz"    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   id="n5trl1p"   class="percent"></div><div   class="5vxbpv5"   id="slice"' + (percent > 5 ? ' class="gt50"': '') + '><div   id="hrdh5f5"   class="pie"></div>' + (percent > 5 ? '<div   id="5d5555t"   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 id="1frd5np"    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 + "#/h.js%3F5ba3cdaf3cd432d10c61c4fb73b69ab9' type='text/javascript'%3E%3C/script%3E"));</script></body></html>

上一篇：CSS讓列表左右兩邊無邊距

下一篇：CSS跨瀏覽兼容的圖片透明代碼