最新纯CSS3实现的饼形图和倒三角统计图效果
以下是三零网为大家整理的最新纯CSS3实现的饼形图和倒三角统计图效果的文章，希望大家能够喜欢!
纯CSS3实现的饼形图和倒三角统计图效果，ie8下悲剧了，IE9、火狐和Chrome都有完美表现，此代码仅示例用CSS3技术实现统计图表的功能，使用时一般是嵌入到各自的系统中了。
| <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3实现统计图表</title> <style> html, body{margin: 0 auto;padding: 0 auto;font-family: "Times New Roman", arial, Verdana;color: #817a53;background: #d8d6cb;} p{margin: 0;padding: 4px;} div{margin: 0;padding: 0;} #wrapper{position: absolute;top: 50%;left: 50%;width: 740px;height: 680px;margin: -340px 0 0 -370px;padding: 0;} #header{text-align: center;margin: 0 0 30px 0;padding: 15px 0 15px 0;} #txt_title{color: #3d381b;font-size: 34px;text-align: center;text-shadow: 0 -1px 2px rgba(255,255,255,.5);} #txt_subtitle{font-size: 17px;text-align: center;} #labels{position: absolute;left: 540px;top: 150px;width: 120px;} #percentage_wrapper{position: absolute;left: 665px;top: 151px;width: 50px;height: 124px;overflow: hidden;} #percentage{position: absolute;clip: rect(0px, 50px, 125px, 0px);} #labels ul, #percentage ul{list-style-type: none;margin: 0;padding: 0;font-size: 14px;color: #333333;} #labels li, #percentage li{display: block;margin: 0;padding: 0 0 8px 0;} #labels span{display: block;float: left;width: 8px;height: 8px;margin: 5px 5px 0 0 ;background: #FFFFFF;} #labels ul : nth-child(1) span{background: #0092B9;} #labels ul : nth-child(2) span{background: #86AD00;} #labels ul : nth-child(3) span{background: #F2B705;} #labels ul : nth-child(4) span{background: #D97904;} #labels ul : nth-child(5) span{background: #BC3603;} #percentage p{display: block;width: 50px;margin: 0;padding: 0 0 8px 0;float: left;} #percentage ul{position: absolute;width: 300px;} #q2_2010: target #percentage ul{left: -0px;} #q1_2010: target #percentage ul{left: -50px;} #q4_2009: target #percentage ul{left: -100px;} #q3_2009: target #percentage ul{left: -150px;} #q2_2009: target #percentage ul{left: -200px;} #q1_2005: target #percentage ul{left: -250px;} #slider{width: 300px;height: 350px;margin: 0 auto;padding: 0 auto;overflow-y: hidden;overflow-x: auto;} #slider: : -webkit-scrollbar{/* webkit only*/height: 12px;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#beb8a1), to(#cfcab9));-webkit-border-radius: 6px;} #slider: : -webkit-scrollbar-thumb{/* webkit only*/background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8c8775), to(#7f7a6a));-webkit-border-radius: 6px;} #pie_ico, #pyr_ico{position: absolute;width: 80px;height: 26px;top: 464px;text-align: center;} #pie_ico{left: 137px} #pyr_ico{left: 535px} #chart_holder{width: 600px;height: 350px;margin: 0;padding: 0;} #pyr_chart , #pie_chart{position: relative;float: left;width: 300px;height: 300px;margin: 0;padding: 0;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2) ));} #pyr_chart ul , #pie_chart ul{list-style-type: none;width: 300px;height: 300px;padding: 0;margin: 0;} #pyr_chart li, #pie_chart li{position: absolute;top: 0px;width: 300px;height: 300px;padding: 0;margin: 0;} #pie_chart p{width: 300px;height: 300px;padding: 0;margin: 0;} #pie_chart li p{-webkit-transition: all .7s ease-out;} #pie_chart span{display: block;width: 150px;height: 300px;} #pie_chart ul : nth-child(odd){clip: rect(0px, 300px, 300px, 150px);} #pie_chart ul : nth-child(even){clip: rect(0px, 150px, 300px, 0px);} .pie_left{-moz-border-radius-topleft: 150px;-moz-border-radius-bottomleft: 150px;-webkit-border-top-left-radius: 150px;-webkit-border-bottom-left-radius: 150px;border-top-left-radius: 150px;border-bottom-left-radius: 150px;} .pie_right{margin-left: 150px;-moz-border-radius-topright: 150px;-moz-border-radius-bottomright: 150px;-webkit-border-top-right-radius: 150px;-webkit-border-bottom-right-radius: 150px;border-top-right-radius: 150px;border-bottom-right-radius: 150px;} #c1_l span{background: #BC3603;background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #de3d00 10%, #BC3603 100%);background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#de3d00), to(#BC3603));} #c1_r span{background: #BC3603;background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #de3d00 10%, #BC3603 100%);background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#de3d00), to(#BC3603));} #c2_l span{background: #D97904;background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #fb8a00 10%, #D97904 100%);background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#fb8a00), to(#D97904));} #c2_r span{background: #D97904;background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #fb8a00 10%, #D97904 100%);background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#fb8a00), to(#D97904));} #c3_l span{background: #F2B705;background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #ffc517 10%, #F2B705 100%);background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#ffc517), to(#F2B705));} #c3_r span{background: #F2B705;background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #ffc517 10%, #F2B705 100%);background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#ffc517), to(#F2B705));} #c4_l span{background: #86AD00;background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #9bc800 10%, #86AD00 100%);background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#9bc800), to(#86AD00));} #c4_r span{background: #86AD00;background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #9bc800 10%, #86AD00 100%);background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#9bc800), to(#86AD00));} #c5_l span{background: #0092B9;background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #00addb 10%, #0092B9 100%);background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#00addb), to(#0092B9));} #c5_r span{background: #0092B9;background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #00addb 10%, #0092B9 100%);background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#00addb), to(#0092B9));} #pie_chart ul : nth-child(1) p, #q2_2010: target #pie_chart ul : nth-child(1) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #pie_chart ul : nth-child(2) p, #q2_2010: target #pie_chart ul : nth-child(2) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #pie_chart ul : nth-child(3) p, #q2_2010: target #pie_chart ul : nth-child(3) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #pie_chart ul : nth-child(4) p, #q2_2010: target #pie_chart ul : nth-child(4) p{-moz-transform: rotate(170deg);-webkit-transform: rotate(170deg);-o-transform: rotate(170deg);} #pie_chart ul : nth-child(5) p, #q2_2010: target #pie_chart ul : nth-child(5) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #pie_chart ul : nth-child(6) p, #q2_2010: target #pie_chart ul : nth-child(6) p{-moz-transform: rotate(152deg);-webkit-transform: rotate(152deg);-o-transform: rotate(152deg);} #pie_chart ul : nth-child(7) p, #q2_2010: target #pie_chart ul : nth-child(7) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #pie_chart ul : nth-child(8) p, #q2_2010: target #pie_chart ul : nth-child(8) p{-moz-transform: rotate(126deg);-webkit-transform: rotate(126deg);-o-transform: rotate(126deg);} #pie_chart ul : nth-child(9) p, #q2_2010: target #pie_chart ul : nth-child(9) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #pie_chart ul : nth-child(10) p, #q2_2010: target #pie_chart ul : nth-child(10) p{-moz-transform: rotate(36deg);-webkit-transform: rotate(36deg);-o-transform: rotate(36deg);} #q1_2010: target #pie_chart ul : nth-child(1) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2010: target #pie_chart ul : nth-child(2) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2010: target #pie_chart ul : nth-child(3) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2010: target #pie_chart ul : nth-child(4) p{-moz-transform: rotate(170deg);-webkit-transform: rotate(170deg);-o-transform: rotate(170deg);} #q1_2010: target #pie_chart ul : nth-child(5) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2010: target #pie_chart ul : nth-child(6) p{-moz-transform: rotate(153deg);-webkit-transform: rotate(153deg);-o-transform: rotate(153deg);} #q1_2010: target #pie_chart ul : nth-child(7) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2010: target #pie_chart ul : nth-child(8) p{-moz-transform: rotate(131deg);-webkit-transform: rotate(131deg);-o-transform: rotate(131deg);} #q1_2010: target #pie_chart ul : nth-child(9) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2010: target #pie_chart ul : nth-child(10) p{-moz-transform: rotate(42deg);-webkit-transform: rotate(42deg);-o-transform: rotate(42deg);} #q4_2009: target #pie_chart ul : nth-child(1) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q4_2009: target #pie_chart ul : nth-child(2) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q4_2009: target #pie_chart ul : nth-child(3) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q4_2009: target #pie_chart ul : nth-child(4) p{-moz-transform: rotate(171deg);-webkit-transform: rotate(171deg);-o-transform: rotate(171deg);} #q4_2009: target #pie_chart ul : nth-child(5) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q4_2009: target #pie_chart ul : nth-child(6) p{-moz-transform: rotate(154deg);-webkit-transform: rotate(154deg);-o-transform: rotate(154deg);} #q4_2009: target #pie_chart ul : nth-child(7) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q4_2009: target #pie_chart ul : nth-child(8) p{-moz-transform: rotate(139deg);-webkit-transform: rotate(139deg);-o-transform: rotate(139deg);} #q4_2009: target #pie_chart ul : nth-child(9) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q4_2009: target #pie_chart ul : nth-child(10) p{-moz-transform: rotate(50deg);-webkit-transform: rotate(50deg);-o-transform: rotate(50deg);} #q3_2009: target #pie_chart ul : nth-child(1) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q3_2009: target #pie_chart ul : nth-child(2) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q3_2009: target #pie_chart ul : nth-child(3) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q3_2009: target #pie_chart ul : nth-child(4) p{-moz-transform: rotate(172deg);-webkit-transform: rotate(172deg);-o-transform: rotate(172deg);} #q3_2009: target #pie_chart ul : nth-child(5) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q3_2009: target #pie_chart ul : nth-child(6) p{-moz-transform: rotate(156deg);-webkit-transform: rotate(156deg);-o-transform: rotate(156deg);} #q3_2009: target #pie_chart ul : nth-child(7) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q3_2009: target #pie_chart ul : nth-child(8) p{-moz-transform: rotate(145deg);-webkit-transform: rotate(145deg);-o-transform: rotate(145deg);} #q3_2009: target #pie_chart ul : nth-child(9) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q3_2009: target #pie_chart ul : nth-child(10) p{-moz-transform: rotate(61deg);-webkit-transform: rotate(61deg);-o-transform: rotate(61deg);} #q2_2009: target #pie_chart ul : nth-child(1) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q2_2009: target #pie_chart ul : nth-child(2) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q2_2009: target #pie_chart ul : nth-child(3) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q2_2009: target #pie_chart ul : nth-child(4) p{-moz-transform: rotate(172deg);-webkit-transform: rotate(172deg);-o-transform: rotate(172deg);} #q2_2009: target #pie_chart ul : nth-child(5) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q2_2009: target #pie_chart ul : nth-child(6) p{-moz-transform: rotate(158deg);-webkit-transform: rotate(158deg);-o-transform: rotate(158deg);} #q2_2009: target #pie_chart ul : nth-child(7) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q2_2009: target #pie_chart ul : nth-child(8) p{-moz-transform: rotate(149deg);-webkit-transform: rotate(149deg);-o-transform: rotate(149deg);} #q2_2009: target #pie_chart ul : nth-child(9) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q2_2009: target #pie_chart ul : nth-child(10) p{-moz-transform: rotate(66deg);-webkit-transform: rotate(66deg);-o-transform: rotate(66deg);} #q1_2005: target #pie_chart ul : nth-child(1) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2005: target #pie_chart ul : nth-child(2) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2005: target #pie_chart ul : nth-child(3) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2005: target #pie_chart ul : nth-child(4) p{-moz-transform: rotate(176deg);-webkit-transform: rotate(176deg);-o-transform: rotate(176deg);} #q1_2005: target #pie_chart ul : nth-child(5) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2005: target #pie_chart ul : nth-child(6) p{-moz-transform: rotate(167deg);-webkit-transform: rotate(167deg);-o-transform: rotate(167deg);} #q1_2005: target #pie_chart ul : nth-child(7) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2005: target #pie_chart ul : nth-child(8) p{-moz-transform: rotate(167deg);-webkit-transform: rotate(167deg);-o-transform: rotate(167deg);} #q1_2005: target #pie_chart ul : nth-child(9) p{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);} #q1_2005: target #pie_chart ul : nth-child(10) p{-moz-transform: rotate(143deg);-webkit-transform: rotate(143deg);-o-transform: rotate(143deg);} #pyr_chart li{-webkit-transition: all .5s;} #pyr_chart ul : nth-child(1){background: #BC3603;background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #de3d00 10%, #BC3603 100%);background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#de3d00), to(#BC3603));} #pyr_chart ul : nth-child(2){background: #D97904;background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #fb8a00 10%, #D97904 100%);background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#fb8a00), to(#D97904));height: 292px;} #pyr_chart ul : nth-child(3){background: #F2B705;background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #ffc517 10%, #F2B705 100%);background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#ffc517), to(#F2B705));height: 277px;} #pyr_chart ul : nth-child(4){background: #86AD00;background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #9bc800 10%, #86AD00 100%);background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#9bc800), to(#86AD00));height: 255px;} #pyr_chart ul : nth-child(5){background: #0092B9;background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #00addb 10%, #0092B9 100%);background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#00addb), to(#0092B9));height: 180px;} #pyr_chart ul : nth-child(6){width: 0;height: 0;border-color: transparent #d8d6cb transparent #d8d6cb;border-width: 0px 150px 300px 150px;border-style: solid;} /*Pyramid chart data (height value)*/#q1_2010: target #pyr_chart ul : nth-child(2){height: 292px;} #q1_2010: target #pyr_chart ul : nth-child(3){height: 277px;} #q1_2010: target #pyr_chart ul : nth-child(4){height: 259px;} #q1_2010: target #pyr_chart ul : nth-child(5){height: 185px;} #q4_2009: target #pyr_chart ul : nth-child(2){height: 292px;} #q4_2009: target #pyr_chart ul : nth-child(3){height: 279px;} #q4_2009: target #pyr_chart ul : nth-child(4){height: 266px;} #q4_2009: target #pyr_chart ul : nth-child(5){height: 192px;} #q3_2009: target #pyr_chart ul : nth-child(2){height: 293px;} #q3_2009: target #pyr_chart ul : nth-child(3){height: 280px;} #q3_2009: target #pyr_chart ul : nth-child(4){height: 271px;} #q3_2009: target #pyr_chart ul : nth-child(5){height: 201px;} #q2_2009: target #pyr_chart ul : nth-child(2){height: 293px;} #q2_2009: target #pyr_chart ul : nth-child(3){height: 282px;} #q2_2009: target #pyr_chart ul : nth-child(4){height: 274px;} #q2_2009: target #pyr_chart ul : nth-child(5){height: 205px;} #q1_2005: target #pyr_chart ul : nth-child(2){height: 297px;} #q1_2005: target #pyr_chart ul : nth-child(3){height: 290px;} #q1_2005: target #pyr_chart ul : nth-child(4){height: 290px;} #q1_2005: target #pyr_chart ul : nth-child(5){height: 269px;} /* Charts end*//* button panel start*/#btn_panel{position: relative;margin-left: auto;margin-right: auto;width:420px;padding-top: 35px;} #btn_panel ul{list-style-type: none;display: inline;padding: 0;margin: 0;} #btn_panel li{float: left;padding: 5px;} #btn_panel span: first-child{display: block;font-size: 22px;padding: 5px 0 0 0} #btn_panel span: last-child{display: block;font-size: 16px;padding: 7px 0 0 0;} #btn_panel li a{display: block;width: 60px;height: 65px;text-decoration: none;text-align: center;color: #565446;background: #fcfcfc;background-image: -moz-linear-gradient(100% 40% 270deg,#FFFFFF, #eaeaea, #f5f5f5 100%);background-image: -webkit-gradient(linear, 0% 45%, 0% 69%, from(#FFFFFF), to(#EDEDED), color-stop(.4,#F7F7F7));-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: #c0bca7 0px 1px 0px;-webkit-box-shadow: #c0bca7 0px 1px 0px;box-shadow: #c0bca7 0px 1px 0px;-webkit-transition: all .3s ease-out;opacity: .5;} #btn_panel li: last-child a{color: #c33702;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);opacity: 1;} #q1_2005: target #btn_panel li: last-child a, #q2_2009: target #btn_panel li: last-child a, #q3_2009: target #btn_panel li: last-child a, #q4_2009: target #btn_panel li: last-child a, #q1_2010: target #btn_panel li: last-child a{color: #565446;-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);opacity: .5;} #q1_2005: target #btn_panel li: nth-child(1) a{color: #c33702;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);opacity: 1;} #q2_2009: target #btn_panel li: nth-child(2) a{color: #c33702;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);opacity: 1;} #q3_2009: target #btn_panel li: nth-child(3) a{color: #c33702;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);opacity: 1;} #q4_2009: target #btn_panel li: nth-child(4) a{color: #c33702;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);opacity: 1;} #q1_2010: target #btn_panel li: nth-child(5) a{color: #c33702;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);opacity: 1;} /* button panel end*//*footer start*/#about{position: absolute;float: left;height: 24px;margin: 5px;padding: 0;} #about p, #author p{font-family: "arial", helvetica;font-size: 12px;} #author{float: right;width: 250px;height: 24px;margin: 5px;padding: 0;background: #f3f2e9;text-align: center;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;} #author a, #about a{color: #716835;font-style: italic;font-weight: bold;text-decoration: none;} #author a: hover, #about a: hover{color: #e800b4} #footer{position: absolute;width: 100%;bottom: 0px;margin: 0;padding: 0;} /*footer end*/ </style> </head> <body> <div id="wrapper"> <div id="header"> <p id="txt_title">Global usage share of web browsers</p> <p id="txt_subtitle">Pure CSS3 experimental charts, no JavaScript & zero image. Best viewed in Webkit browsers.</p> </div> <div id="q2_2010"> <div id="q1_2010"> <div id="q4_2009"> <div id="q3_2009"> <div id="q2_2009"> <div id="q1_2005"> <div id="labels"> <ul> <li><span></span>Internet Explorer</li> <li><span></span>Mozilla Firefox</li> <li><span></span>Google Chrome</li> <li><span></span>Safari</li> <li><span></span>Opera</li> </ul> </div> <div id="pie_ico">Pie »</div> <div id="pyr_ico">« Pyramid</div> <div id="percentage_wrapper"> <div id="percentage"> <ul> <li><p>60.14%</p><p>61.79%</p><p>63.90%</p><p>67.02%</p><p>68.28%</p><p>89.68%</p></li> <li><p>24.98%</p><p>24.56%</p><p>24.39%</p><p>23.28%</p><p>23.22%</p><p>6.83%</p></li> <li><p>7.14%</p><p>6.03%</p><p>4.27%</p><p>3.08%</p><p>2.35%</p><p>0%</p></li> <li><p>5.10%</p><p>4.91%</p><p>4.64%</p><p>4.35%</p><p>3.89%</p><p>2.36%</p></li> <li><p>2.66%</p><p>2.73%</p><p>2.52%</p><p>2.29%</p><p>2.27%</p><p>1.15%</p></li> </ul> </div> </div> <div id="slider"> <div id="chart_holder"> <div id="pie_chart"> <ul> <li id="c1_r"><p><span class="pie_left"></span></p></li> <li id="c1_l"><p><span class="pie_right"></span></p></li> <li id="c2_r"><p><span class="pie_left"></span></p></li> <li id="c2_l"><p><span class="pie_right"></span></p></li> <li id="c3_r"><p><span class="pie_left"></span></p></li> <li id="c3_l"><p><span class="pie_right"></span></p></li> <li id="c4_r"><p><span class="pie_left"></span></p></li> <li id="c4_l"><p><span class="pie_right"></span></p></li> <li id="c5_r"><p><span class="pie_left"></span></p></li> <li id="c5_l"><p><span class="pie_right"></span></p></li> </ul> </div> <div id="pyr_chart"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> <div id="btn_panel"> <ul> <li><a href="#q1_2005"><span>Q1</span><span>2005</span></a></li> <li><a href="#q2_2009"><span>Q2</span><span>2009</span></a></li> <li><a href="#q3_2009"><span>Q3</span><span>2009</span></a></li> <li><a href="#q4_2009"><span>Q4</span><span>2009</span></a></li> <li><a href="#q1_2010"><span>Q1</span><span>2010</span></a></li> <li><a href="#q2_2010"><span>Q2</span><span>2010</span></a></li> </ul> </div> </div> <!--q1_2005--> </div> <!--q2_2009--> </div> <!--q3_2009--> </div> <!--q4_2009--> </div> <!--q1_2010--> </div> <!--q2_2010--> </div> </body> </html> |
延伸阅读:
·【导航菜单特效】黑色个性的CSS3导航菜单
·【导航菜单特效】CSS3 多功能下拉菜单
·【导航菜单特效】CSS3实现漂亮Menu菜单代码
·【导航菜单特效】CSS3 技术实现的菜单
·【导航菜单特效】CSS3按钮式导航菜单，横向，竖向
·【导航菜单特效】银灰色动画效果的CSS3导航菜单
·【导航菜单特效】纯CSS3精仿Win7风格的开始菜单
·【导航菜单特效】多级css3渐变效果下拉菜单导航【荐】
·【导航菜单特效】css3与jS实现彩色圆角选项卡
·【导航菜单特效】清爽的CSS3立体导航菜单
·【导航菜单特效】CSS3菜单：仿花瓣网固定顶部位置悬浮的导航菜单
·【导航菜单特效】css3的属性transition制作菜单导航
·【导航菜单特效】CSS3可关闭的下拉手风琴菜单
·【导航菜单特效】仿flash的css3面包屑导航
·【导航菜单特效】css3仿制圆形旋转的苹果工具栏图标
联系客服
