rayln
- 浏览: 430592 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
IThead：
纠结了几天，用了你的方法，现在解决了，谢谢！
Eclipse 写Javascript卡死问题 -
Rubicon__：
你好，我在运用PageWidget这个类时，出现第一页翻到第二 ...
android翻书效果实现原理（ 贝塞尔曲线绘制原理/点坐标计算） -
lionios：
如果不显示printDialog，则打印出来的是空白页，请问你 ...
Print打印机例子 -
rayln：
weiqiulai 写道哥们儿，我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例 -
weiqiulai：
哥们儿，我怎么没有看到监控队列的配置和代码？
JMS监听MQ实例
-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) ));
下面实例是一个css3饼图的生成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS3 Charts-GLOBAL usage share of web browsers</title>
<link href="css/stylesheet.css" rel="stylesheet" TYPE="text/css" />
</head>
<body>
<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>
</body>
</html>
/*------------------------------------------------------------------
[CSS3 Stylesheet]
Project: CSS3 Design Contest
Last change: 26.06.2010
Designed by: Sean Oh, ohsiwon@gmail.com, http://www.ohsean.net
Works in browsers: FF 3.5+, Opera 10.5+, Safari 4+, Google Chrome 4.0+
-------------------------------------------------------------------*/
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 start */
#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;
}
/* Header end */
/* Label and percentage data start */
#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; }
/* Label and percentage data end */
/* Slider (contains two chart div) start */
#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}
/* Slider end */
/* Charts start */
#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 data (degree value) */
#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 */
分享到：
发表评论
-
文字实现水平垂直居中
2014-01-11 09:58 952文字实现水平垂直居中的关键代码： display: ... -
CSS3 Media Queries在iPhone4和iPad上的运用
2014-01-07 00:01 1092http://www.w3cplus.com/css3/css ... -
小兔快跑
2013-11-20 15:42 647<!DOCTYPE html PUBLIC " ... -
box-sizing使用
2013-07-17 13:32 719box-sizing ： content-box || bor ... -
如何通过CSS3的Clip制作饼图
2013-05-10 16:46 1061CSS3是个非常强大的玩意， 大家可以看看我的例子， 可以实现 ... -
CSS3的keyframe动画介绍
2013-05-07 13:50 534#sun.VeryHuo { animation-name ... -
CSS3 Media Queries
2013-04-27 10:44 862转载： http://www.w3cplus.co ... -
Three.js的模型软件Blender
2013-04-09 14:41 1198使用Blender软件可以非常简单的导出3D模型为json字符 ... -
本地文件拖拽到浏览器
2013-03-19 13:22 1104利用HTML5的File API可以实现文件拖拽到服务器上 直 ... -
最简单的拖拽效果
2013-01-28 16:46 807html5中提供了drag的效果， 通过事件可以进行拖拽元素， ... -
斜坡算法
2013-01-17 16:52 1497斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, ... -
如何创建一个Chrome应用
2013-01-08 15:48 0看附件的详细介绍 -
Canvas宝典
2012-12-13 15:35 732Canvas宝典, 神器!! -
CSS区分横屏和竖屏
2012-09-21 14:57 1274如何区分横屏和竖屏， 在CSS中？ //竖屏 @media ... -
利用HTML5的WebGL制作的3D图形
2012-06-27 14:55 1661这里介绍一篇翻译的文章， 写的非常好， 大家可以去看看WebG ... -
KinticJs的基本用法
2012-06-11 15:42 965Kintic是html5中canvas的一个框架，效率高，包小 ... -
CSS3伪类选择器
2012-06-03 15:38 904CSS3的一个伪类选择器“:nth-child()”。 语法： ... -
canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）
2012-05-04 15:43 1764转载： http://www.cnblogs.com/amtf ... -
input框语音功能
2012-04-06 12:26 969Webkit内核的input框带有语音功能, 请看实例 &l ... -
-webkit-内核滚动条样式覆盖
2012-02-23 21:18 1791今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. ...
相关推荐
无需自己找镜子Shader，只需2个脚本即可在Unity中创建一个简单的模拟镜面反射效果。 使用教程链接：https://blog.csdn.net/ChinarCSDN/article/details/80862999
在这个主题中，我们将深入探讨如何利用Java实现控件面板的镜面反射效果，这个效果在现代UI设计中常常被用来增加视觉吸引力。这主要涉及到图形学和渲染技术。 首先，`ReflectionPanel.java` 文件很可能是实现镜面...
unity镜面反射效果
在提供的"Replacement_v2.0_Mirror_Shaders"资源中，很可能包含了实现镜面反射效果的自定义Shader代码。这个Shader可能已经考虑到了上述的各个因素，并提供了更高级的控制，比如动态反射、距离衰减等特性。通过研究...
【整体镜面反射效果的虚拟场景实时漫游算法】 虚拟现实技术在当今的计算机图形学领域扮演着重要的角色，它允许用户在计算机生成的环境中进行交互体验。在这样的环境中，真实感的渲染是提升用户体验的关键因素之一，...
你需要创建一个定制的Shader，它能够计算并渲染出物体表面的镜面反射效果。 Shader Graph是Unity 2018引入的一种可视化编程工具，通过图形化界面可以方便地构建复杂的Shader逻辑。在镜面反射的Shader中，关键步骤...
本资源提供的"搬运镜面反射shader"是针对Unity开发者的实用工具，可以帮助他们快速实现高质量的镜面反射效果，无需从头编写复杂的着色器代码。 镜面反射Shader主要依赖于以下几种技术： 1. **法线贴图（Normal ...
在这个“很好用的Unity镜面反射脚本”中，我们可以期待找到实现高质量镜面反射效果的方法。 镜面反射在图形学中是指光线射入一个表面，如水面或金属表面，然后按照特定的规则反射出去的现象。在Unity中，通常使用...
总结来说，镜面反射Shader是通过计算视线与表面法线的关系来模拟真实世界中物体表面的镜面反射效果。在Unity和OpenGL中，我们可以利用内置的Shader语言和光照模型实现这一功能，通过控制粗糙度和环境贴图进一步提升...
1. **游戏引擎中的实现**：大多数现代游戏引擎（如Unity、Unreal Engine）都内置了这些镜面反射模型的支持，开发者可以通过简单的设置调整不同物体的镜面反射效果。 2. **自定义Shader开发**：对于有特殊需求的应用...
总的来说，"UN283 unity3d游戏插件"提供了实现高质量实时折射和镜面反射效果的解决方案，这将对提升Unity3D游戏的图形质量和玩家体验起到至关重要的作用。对于游戏开发者来说，掌握这类技术不仅能提高作品的竞争力，...
本篇文章将深入探讨如何在Unity3D中创建镜面反射效果。 首先，我们需要理解反射的基本原理。在物理学中，光线遇到光滑表面时会发生反射，遵循反射定律：入射光线、反射光线和法线都在同一平面上，且入射角等于反射...
unity镜面反射脚本，包里4个文件 Mirror.cs ：与shader互动的脚本，使用这组材质同时要把这个脚本拖给使用的物体才能生效 Mirror-BumpSpec.shader 实时镜面反射shader 可以配合法线贴图一起用 适用于平面物体 ...
unity3d镜面反射脚本，自己项目开发时用到的代码，非常好用，而且用法非常简单，只需拖到一个场景Plane即可实现镜面反射效果
在Unity中，我们可以使用Standard Shader作为基础，自定义其属性来实现镜面反射效果。 首先，Standard Shader内建了镜面反射功能。它有一个名为`_SpecColor`的浮点4向量（Vector4）属性，用于定义反射颜色的强度和...
皮鞋擦过鞋油变亮是因为鞋油填补了皮革表面的凹凸，增加了表面的光滑度，从而增强了镜面反射效果。而在晚上，手电筒的光照在平面镜上，从侧面看去，镜子发生镜面反射，反射光不进入眼睛，因此看起来较暗；而白纸发生...
首先，我们需要创建一个Shader来处理镜面反射效果。在Unity中，Shader是定义物体表面渲染方式的程序。在给定的标题和描述中，我们创建了一个名为"FX/Mirror Reflection"的Shader。这个Shader定义了两个纹理卡片...