CSS3圆环动画技能栏菜单

2020-01-27 14:19:01

字体：大中小

来源：转载

供稿：网友

一款非常漂亮的动画技能栏菜单效果，页面载入的时候才可年到效果，学习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 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>

上一篇：CSS跨浏览兼容的图片透明代码

下一篇：CSS让列表左右两边无边距