首页 技术 正文
技术 2022年11月7日
0 收藏 628 点赞 235 浏览 33882 个字

作者:魔洁

聊到3d那我们就先聊聊空间维度,首先一维,比如一条线就是一个一维空间,连点成线在这个空间里这些点只能前进后退,二维空间就是一个平面,这时点不仅可以前进后退还可以左右移动,3维空间也可以说是3d,这时点可以前进后退,左右,上下移动。css3里有几个关于3d运动的属性以及值我做一下解释
transform-style:preserve-3d;(transform-style是属性)(preserve-3d是值)
(这个属性可以把一个处于2维的div变为3d空间,把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。)
perspective:800px;
(这个属性是配合上边的属性使用的 ,把这个属性比作你的屏幕距离摄像头的距离)
transform:rotateY(180deg);
(把这个3d空间div看做一个人rotateY(180deg),是做y轴旋转180°,y轴可以看作是一个人原地转身)
transform:rotatex(180deg);
(rotateY(180deg),是做x轴旋转180°,x轴可以看作是一个人原地翻跟斗)
transform:rotateZ(180px);
(rotateZ(180px),是在前进180px,x轴可以看作是一个人向前走180px,负值为后退)
看完这些相信下面的代码回好理解许多。

1.卡牌反转

css3 3d 与案例分析

html

<div class="zf">
<div class="bigbox">
<div class="xiaobox1"></div>
<div class="xiaobox2"></div>
</div>
</div>

zf是你距离屏幕800px的摄像头,bogbox是3d空间内的舞台,xiaobox1,xiaobox2是两个背面相对的演员;

css

html,body{
background:#ff9f96;
}.zf{
width: 300px;
height: 300px;
margin:200px auto;
perspective:800px;
}
.bigbox{
width:300px;
height:300px;
position:relative;
transform-style:preserve-3d;/*把bigbox变为3D空间*/
transition:transform 1s;
}
.xiaobox1{
backface-visibility:hidden;/*这行代码是xiaobox1设置为背面隐藏*/
width:300px;
height:300px;
position:absolute;
background:url(../img/dome061.jpg);
background-size:650px 300px;February 10, 2017 10:48 AM
transform:rotateY(180deg);/*让xiaobox1原地旋转180度*/
}
.xiaobox2{
backface-visibility:hidden;
width:300px;
height:300px;
position:absolute;
background:url(../img/dome062.jpg);
background-size:650px 300px;
}
.bigbox:hover{
transform:rotateY(180deg);/*鼠标移到bigbox上他原地旋转180度*/
}

2.立方体

css3 3d 与案例分析

html

<div class="bigbox">
<div class="box">
<div class="pm qian"></div>
<div class="pm hou"></div>
<div class="pm left"></div>
<div class="pm right"></div>
<div class="pm top"></div>
<div class="pm bottom"></div>
</div>
</div>

同上个案例最外边的bigbox是距离屏幕800px的摄像头,box是舞台,pm就是正方体的前后左右上下面

css

.bigbox{
margin:150px auto;
width:300px;
height:300px;
perspective:800px;
transform-style:preserve-3d;
}
.box{
transform-style:preserve-3d;
width:300px;
height:300px;
position:relative;
-webkit-animation:xuanzhuan 4s infinite linear ;/*谁让box做无限循环的动画*/
}
.pm{
width:300px;
height:300px;
position:absolute;
text-align:center;
font-size:200px;
line-height:300px;
}
.qian{
transform:translateZ(150px);/*让qian向前走150px*/
background:#59e7fa;
background:url(../img/dome065.jpg);
background-size:300px 300px;
}
.hou{
transform:rotateY(-180deg) translateZ(150px);/*让hou原地转身180°,再向前走150px*/
background:#fa5959;
background:url(../img/dome065.jpg);
background-size:300px 300px;
}
.top{
transform:rotateX(90deg) translateZ(150px);/*沿x轴旋转90°,向前走150px*/
background:#f7fa59;
background:url(../img/dome065.jpg);
background-size:300px 300px;
}
.bottom{
transform:rotateX(-90deg) translateZ(150px);/*沿x轴旋转-90°,向前走150px*/
background:#e359fa;
background:url(../img/dome065.jpg);
background-size:300px 300px;
}
.left{
transform:rotateY(-90deg) translateZ(150px);/*沿y轴旋转-90°,向前走150px*/
background:#595ffa;
background:url(../img/dome065.jpg);
background-size:300px 300px;
}
.right{
transform:rotateY(90deg) translateZ(150px);沿/*y轴旋转90°,向前走150px*/
background:#79fa59;
background:url(../img/dome065.jpg);
background-size:300px 300px;
}
@-webkit-keyframes xuanzhuan{
0%{
-webkit-transform: rotateY(0deg);
}
50%{
-webkit-transform: rotateY(360deg);
}
51%{
-webkit-transform: rotateX(0deg);
}
100%{
-webkit-transform: rotateX(360deg);
}
}

3.翻牌

css3 3d 与案例分析

html

<div class="box">
<div id="a">
</div>
</div>
<input type="button" class="btn" name="" value="上一步"/>
<input type="button" class="btn" name="" value="下一步"/>i

box是摄像头,a是舞台,舞台里的演员我将用js渲染,class为fp

css

.box{
width:300px;
height:300px;
margin:auto;
transform-style:preserve-3d;
perspective:800px;
}
#a{
float:left;
transform-style:preserve-3d;
width:300px;
height:600px;
position:relative;
}
.btn{
width:60px;
height:20px;
border:0px;
background:#ffe81c;
color:#fff;
text-align:center;
line-height:20px;
font-weight:700;
cursor:pointer;
}
.fp,.fp1,.fp2,.fp3,.fp4{
position:absolute;
width:300px;
height:300px;
backface-visibility:hidden;
font-size:150px;
color:#fff;
font-weight:700;
text-align:center;
line-height:300px;
transform-origin:100% 100%;/*沿着下边旋转*/
}
.fp{
transform: rotateX(80deg);
}
.fp1{
-webkit-animation:fz1 1s;/*执行动画fz1*/
transform: rotateX(0deg);/*执行完动画x轴是0°*/
}
.fp2{
-webkit-animation:fz2 1s;/*执行动画fz2*/
transform: rotateX(80deg);/*执行完动画x轴是80°*/
}
.fp3{
-webkit-animation:fz3 1s;/*执行动画fz3*/
transform: rotateX(80deg);/*执行完动画x轴是80°*/
}
.fp4{
-webkit-animation:fz4 1s;/*执行动画fz4*/
transform: rotateX(0deg);/*执行完动画x轴是0°*/
}
@-webkit-keyframes fz1{
0%{
transform-origin:100% 100%;
-webkit-transform: rotateX(80deg);
}
100%{
transform-origin:100% 100%;
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes fz2{
0%{
transform-origin:100% 100%;
-webkit-transform: rotateX(0deg);
}
100%{
transform-origin:100% 100%;
-webkit-transform: rotateX(-280deg);
}
}
@-webkit-keyframes fz3{
0%{
transform-origin:100% 100%;
-webkit-transform: rotateX(0deg);
}
100%{
transform-origin:100% 100%;
-webkit-transform: rotateX(80deg);
}
}
@-webkit-keyframes fz4{
0%{
transform-origin:100% 100%;
-webkit-transform: rotateX(80deg);
}
100%{
transform-origin:100% 100%;
-webkit-transform: rotateX(360deg);
}
}

因为我的背景图是dome061.jpg,dome062.jpg,dome063.jpg,dome064.jpg,dome065.jpg,我会把他们第三位数字声明在名为img的数组里

js

var img=[1,2,3,4,5];
for(var i=0;i<5;i++){
$('#a').append('<div class="fp cs" style="background:url(img/dome06'+img[i]+'.jpg);background-size:100% 100%;"></div>');
}
//上边的for循环是渲染舞台里演员
//pd是判断按下按钮的变量
var pd=1;
//a是判断演员的下标
var a=4;
$('.btn').eq(1).click(function(){
if(a<0){
a=4;
}
if(pd==1){
pd++;
$('.fp').eq(a).removeClass('fp');//移除fp这个类
$('.cs').eq(a).addClass('fp1');//因为演员我定义了两个类把fp移除了,还可以用cs抓起取员
}else{
$('.cs').eq(a).removeClass('fp1');
$('.cs').eq(a).removeClass('fp2');
$('.cs').eq(a).removeClass('fp3');
$('.cs').eq(a).removeClass('fp4');
$('.cs').eq(a).addClass('fp2');//下标是a的演员移除fp1,fp2,fp3,fp4之后再加fp2
$('.fp').eq(a-1).removeClass('fp');
$('.cs').eq(a-1).removeClass('fp1');
$('.cs').eq(a-1).removeClass('fp2');
$('.cs').eq(a-1).removeClass('fp3');
$('.cs').eq(a-1).removeClass('fp4');
$('.cs').eq(a-1).addClass('fp1');//下标是a-1的演员移除fp,fp1,fp2,fp3,fp4之后再加fp4
a--;
}
console.log(a,pd);
})
$('.btn').eq(0).click(function(){
if(a>5){
a=0;
}
if(pd==2){
if(a==4){
$('.cs').eq(a).removeClass('fp1');
$('.cs').eq(a).removeClass('fp2');
$('.cs').eq(a).removeClass('fp3');
$('.cs').eq(a).removeClass('fp4');
$('.cs').eq(a).addClass('fp3');//下标是a的演员移除fp1,fp2,fp3,fp4之后再加fp3
$('.cs').eq(0).removeClass('fp1');
$('.cs').eq(0).removeClass('fp2');
$('.cs').eq(0).removeClass('fp3');
$('.cs').eq(0).removeClass('fp4');
$('.cs').eq(0).addClass('fp4');//下标是0的演员移除fp1,fp2,fp3,fp4之后再加fp4
}
$('.cs').eq(a).removeClass('fp1');
$('.cs').eq(a).removeClass('fp2');
$('.cs').eq(a).removeClass('fp3');
$('.cs').eq(a).removeClass('fp4');
$('.cs').eq(a).addClass('fp3');//下标是a的演员移除fp1,fp2,fp3,fp4之后再加fp3
$('.cs').eq(a+1).removeClass('fp1');
$('.cs').eq(a+1).removeClass('fp2');
$('.cs').eq(a+1).removeClass('fp3');
$('.cs').eq(a+1).removeClass('fp4');
$('.cs').eq(a+1).addClass('fp4');//下标是a+1的演员移除fp1,fp2,fp3,fp4之后再加fp4
a++;
}
//console.log(a,pd);
})

4.旋转木马

按键盘方向键就会旋转
css3 3d 与案例分析

html

<div class=bigbox>
<div class="box">
</div>
</div>

bigbox是摄像头,box是舞台,舞台里的演员我将用js渲染,class为mian

css

.bigbox{
width:150px;
height:100px;
margin:200px auto;
perspective:800px;
transform-style:preserve-3d;
}
.box{
transform-style:preserve-3d;
position:relative;
width:150px;
height:100px;
}
.mian{
width:150px;
height:100px;
position:absolute;
text-align:center;
color:#fff;
background:#ff3efb;
line-height:100px;
font-size:80px;
}
.box{
transition:transform 1s;
}

同上一案例我把图片不一样的数字声明在sum数组里

js

    var sum=[1,2,3,4,5,4,3,1,2];
for(var i=0;i<9;i++){
$('.box').append('<div class="mian"></div>');
$('.mian').eq(i).css({'transform':'rotateY('+i*40+'deg) translateZ(240px)','background':'url(img/dome06'+sum[i]+'.jpg)','background-size':'100% 100%'});
}
//上边的for循环是渲染舞台里演员
var x=0;
var y=0;
$(window).keydown(function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
console.log(e)
if(e && e.keyCode==37){ // 左
y++;
$('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
}
if(e && e.keyCode==39){ // 右
y--;
$('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
}
if(e && e.keyCode==38){ // 上
x++;
$('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
}
if(e && e.keyCode==40){ // 下
x--;
$('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
}
})
//这段是写按下方向键舞台旋转,上边声明的x,y是舞台的x轴与y轴的角度数,event是记录事件信息的对象,e.keyCode是按下时键盘的键值。

5.魔方效果

css3 3d 与案例分析

html

<div class="bigbox">
<input type="button" class="btn" value="<"/>
<div class="box"></div>
<input type="button" class="btn" value=">"/>
</div>

bigbox是摄像头,box是舞台,舞台里的演员我将用js渲染,class为kuai和mian

css

html,body{
background:#ff9f96;
}
.bigbox{
width:900px;
height:300px;
margin:100px auto 0;
}
.box{
width:604px;
height:250px;
transform-style:preserve-3d;
perspective:800px;
float:left;
margin-left:103px;
}
.btn{
height:40px;
width:50px;
color:#fff;
background:#f5ff32;
margin-top:105px;
border:0px;
font-size:30px;
font-weight:700;
}
.btn:nth-of-type(1){
float:left;
}
.btn:nth-of-type(2){
float:right;
}
.kuai{
float:left;
width:100px;
height:250px;
transform-style:preserve-3d;
position:relative;
margin-left:-1px;
}
.mian{
width:100px;
height:250px;
position:absolute;
}
.kuai .mian:nth-of-type(1){
transform:translateZ(125px);
background:url(../img/dome061.jpg) no-repeat;
background-size:600px 250px;
}
.kuai .mian:nth-of-type(2){
transform:rotateX(-90deg) translateZ(125px);
background:url(../img/dome062.jpg) no-repeat;
background-size:600px 250px;
}
.kuai .mian:nth-of-type(3){
transform:rotateX(180deg) translateZ(125px);
background:url(../img/dome063.jpg) no-repeat;
background-size:600px 250px;
}
.kuai .mian:nth-of-type(4){
transform:rotateX(90deg) translateZ(125px);
background:url(../img/dome064.jpg) no-repeat;
background-size:600px 250px;
}
.kuai .mian:nth-of-type(5){
width:250px;
height:250px;
background:#000;
transform:rotateY(-90deg) translateZ(125px);
}
.kuai .mian:nth-of-type(6){
width:250px;
height:250px;
background:#000;
transform:rotateY(90deg) translateZ(-25px);
}

js

var kuai=document.getElementsByClassName('kuai');
for(i=0;i<6;i++){
$('.box').append('<div class="kuai"><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div>'+
'<div class="mian"></div><div class="mian"></div></div>');
kuai[i].getElementsByClassName('mian')[0].style='background-position:'+-100*i+'px 0px';
kuai[i].getElementsByClassName('mian')[1].style='background-position:'+-100*i+'px 0px';
kuai[i].getElementsByClassName('mian')[2].style='background-position:'+-100*i+'px 0px';
kuai[i].getElementsByClassName('mian')[3].style='background-position:'+-100*i+'px 0px';
}
//上边的for循环是渲染舞台里演员
var x=0;
var xuanzuan=setInterval(function(){
x++;
for(i=0;i<6;i++){
for(i=0;i<6;i++){
kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)';
}
}
},4000)
//上边的计时器是写让class是kuai的div旋转这个div的下标是几就让他延迟几毫秒
$('.btn').eq(0).click(function(){
x--;
for(i=0;i<6;i++){
kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)'
}
})
//按下第一个按钮让class是kuai的div以上边计时器的方式运动不过方向相反
$('.btn').eq(1).click(function(){
x++;
for(i=0;i<6;i++){
kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)'
}
})
//按下第二个按钮让class是kuai的div以上边计时器的方式运动

6.多个立方体反转

css3 3d 与案例分析

html

<div class="box"></div>

box是摄像头,舞台里的演员我将用js渲染,class为kuai和mian

css

html,body{
height:100%;
background:#afff60;
}
.box{
width:610px;
height:610px;
transform-style:preserve-3d;
perspective:800px;
margin:50px auto 0;
}
.kuai{
float:left;
width:100px;
height:100px;
transform-style:preserve-3d;
position:relative;
margin:10px;
}
.mian{
width:100px;
height:100px;
position:absolute;
font-size:60px;
font-weight:700;
color:#00f0ff;
line-height:100px;
text-align:center;
}
.kuai .mian:nth-of-type(1){
transform:translateZ(50px);
background:url(../img/dome065.jpg) no-repeat;
background-size:100px 100px;
}
.kuai .mian:nth-of-type(2){
transform:rotateX(-90deg) translateZ(50px);
background:url(../img/dome065.jpg) no-repeat;
background-size:100px 100px;
}
.kuai .mian:nth-of-type(3){
transform:rotateX(180deg) translateZ(50px);
background:url(../img/dome065.jpg) no-repeat;
background-size:100px 100px;
}
.kuai .mian:nth-of-type(4){
transform:rotateX(90deg) translateZ(50px);
background:url(../img/dome065.jpg) no-repeat;
background-size:100px 100px;
}
.kuai .mian:nth-of-type(5){
transform:rotateY(-90deg) translateZ(50px);
background:url(../img/dome065.jpg) no-repeat;
background-size:100px 100px;
}
.kuai .mian:nth-of-type(6){
transform:rotateY(90deg) translateZ(50px);
background:url(../img/dome065.jpg) no-repeat;
background-size:100px 100px;
}

js

for(i=0;i<20;i++){
$('.box').append('<div class="kuai"><div class="mian">'+i+'</div><div class="mian"></div><div class="mian"></div><div class="mian"></div>'+
'<div class="mian"></div><div class="mian"></div></div>');
//上边一段是渲染舞台和演员
$('.kuai').eq(i).mouseover(function(){
$(this).attr('style','transition:transform 0.1s;transform:translateZ(100px) rotateY(180deg);');
})
//当鼠标移到class为kuai的div上时他先沿着z轴向前走100px,再沿着y轴旋转180°
$('.kuai').eq(i).mouseout(function(){
$(this).attr('style','transition:transform 0.1s;transform:rotateY(0deg) translateZ(0px);');
})
当鼠标移下class为kuai的div上时他先沿着z轴向前走回0px位置,再沿着y轴旋转回0°
$(window).eq(i).mousemove(function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var xjd;
var yjd;
if(e.clientX>674){
xjd=parseInt(e.clientX/80);
}else{
xjd=parseInt(-17+e.clientX/40);
}
if(e.clientY>330){
yjd=parseInt(e.clientY/-66);
}else{
yjd=parseInt(11-e.clientY/33);
}
$('.box').attr('style','transform:rotateY('+xjd+'deg) rotateX('+yjd+'deg)')
})
}
//这段是写box随着鼠标移动而变化
  • 此文为原创,转载请注明出处:https://i.cnblogs.com/EditPosts.aspx?postid=6385775&update=1

<!–
div.oembedall-githubrepos{border:1px solid #DDD;border-radius:4px;list-style-type:none;margin:0 0 10px;padding:8px 10px 0;font:13.34px/1.4 helvetica,arial,freesans,clean,sans-serif;width:452px;background-color:#fff}div.oembedall-githubrepos .oembedall-body{background:-moz-linear-gradient(center top,#FAFAFA,#EFEFEF);background:-webkit-gradient(linear,left top,left bottom,from(#FAFAFA),to(#EFEFEF));border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #EEE;margin-left:-10px;margin-top:8px;padding:5px 10px;width:100%}div.oembedall-githubrepos h3{font-size:14px;margin:0;padding-left:18px;white-space:nowrap}div.oembedall-githubrepos p.oembedall-description{color:#444;font-size:12px;margin:0 0 3px}div.oembedall-githubrepos p.oembedall-updated-at{color:#888;font-size:11px;margin:0}div.oembedall-githubrepos ul.oembedall-repo-stats{border:none;float:right;font-size:11px;font-weight:700;padding-left:15px;position:relative;z-index:5;margin:0}div.oembedall-githubrepos ul.oembedall-repo-stats li{border:none;color:#666;display:inline-block;list-style-type:none;margin:0!important}div.oembedall-githubrepos ul.oembedall-repo-stats li a{background-color:transparent;border:none;color:#666!important;background-position:5px -2px;background-repeat:no-repeat;border-left:1px solid #DDD;display:inline-block;height:21px;line-height:21px;padding:0 5px 0 23px}div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a{border-left:medium none;margin-right:-3px}div.oembedall-githubrepos ul.oembedall-repo-stats li a:hover{background:5px -27px no-repeat #4183C4;color:#FFF!important;text-decoration:none}div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a:hover{border-bottom-left-radius:3px;border-top-left-radius:3px}ul.oembedall-repo-stats li:last-child a:hover{border-bottom-right-radius:3px;border-top-right-radius:3px}span.oembedall-closehide{background-color:#aaa;border-radius:2px;cursor:pointer;margin-right:3px}div.oembedall-container{margin-top:5px;text-align:left}.oembedall-ljuser{font-weight:700}.oembedall-ljuser img{vertical-align:bottom;border:0;padding-right:1px}.oembedall-stoqembed{border-bottom:1px dotted #999;float:left;overflow:hidden;width:730px;line-height:1;background:#FFF;color:#000;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;font-size:80%;text-align:left;margin:0;padding:0}.oembedall-stoqembed a{color:#07C;text-decoration:none;margin:0;padding:0}.oembedall-stoqembed a:hover{text-decoration:underline}.oembedall-stoqembed a:visited{color:#4A6B82}.oembedall-stoqembed h3{font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;font-size:130%;font-weight:700;margin:0;padding:0}.oembedall-stoqembed .oembedall-reputation-score{color:#444;font-size:120%;font-weight:700;margin-right:2px}.oembedall-stoqembed .oembedall-user-info{height:35px;width:185px}.oembedall-stoqembed .oembedall-user-info .oembedall-user-gravatar32{float:left;height:32px;width:32px}.oembedall-stoqembed .oembedall-user-info .oembedall-user-details{float:left;margin-left:5px;overflow:hidden;white-space:nowrap;width:145px}.oembedall-stoqembed .oembedall-question-hyperlink{font-weight:700}.oembedall-stoqembed .oembedall-stats{background:#EEE;margin:0 0 0 7px;padding:4px 7px 6px;width:58px}.oembedall-stoqembed .oembedall-statscontainer{float:left;margin-right:8px;width:86px}.oembedall-stoqembed .oembedall-votes{color:#555;padding:0 0 7px;text-align:center}.oembedall-stoqembed .oembedall-vote-count-post{font-size:240%;color:#808185;display:block;font-weight:700}.oembedall-stoqembed .oembedall-views{color:#999;padding-top:4px;text-align:center}.oembedall-stoqembed .oembedall-status{margin-top:-3px;padding:4px 0;text-align:center;background:#75845C;color:#FFF}.oembedall-stoqembed .oembedall-status strong{color:#FFF;display:block;font-size:140%}.oembedall-stoqembed .oembedall-summary{float:left;width:635px}.oembedall-stoqembed .oembedall-excerpt{line-height:1.2;margin:0;padding:0 0 5px}.oembedall-stoqembed .oembedall-tags{float:left;line-height:18px}.oembedall-stoqembed .oembedall-tags a:hover{text-decoration:none}.oembedall-stoqembed .oembedall-post-tag{background-color:#E0EAF1;border-bottom:1px solid #3E6D8E;border-right:1px solid #7F9FB6;color:#3E6D8E;font-size:90%;line-height:2.4;margin:2px 2px 2px 0;padding:3px 4px;text-decoration:none;white-space:nowrap}.oembedall-stoqembed .oembedall-post-tag:hover{background-color:#3E6D8E;border-bottom:1px solid #37607D;border-right:1px solid #37607D;color:#E0EAF1}.oembedall-stoqembed .oembedall-fr{float:right}.oembedall-stoqembed .oembedall-statsarrow{background-image:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3);background-repeat:no-repeat;overflow:hidden;background-position:0 -435px;float:right;height:13px;margin-top:12px;width:7px}.oembedall-facebook1{border:1px solid #1A3C6C;padding:0;font:13.34px/1.4 verdana;width:500px}.oembedall-facebook2{background-color:#627add}.oembedall-facebook2 a{color:#e8e8e8;text-decoration:none}.oembedall-facebookBody{background-color:#fff;vertical-align:top;padding:5px}.oembedall-facebookBody .contents{display:inline-block;width:100%}.oembedall-facebookBody div img{float:left;margin-right:5px}div.oembedall-lanyard{-webkit-box-shadow:none;-webkit-transition-delay:0s;-webkit-transition-duration:.4000000059604645s;-webkit-transition-property:width;-webkit-transition-timing-function:cubic-bezier(0.42,0,.58,1);background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:none;background-origin:padding-box;border-width:0;box-shadow:none;color:#112644;display:block;float:left;font-family:’Trebuchet MS’,Trebuchet,sans-serif;font-size:16px;height:253px;line-height:19px;margin:0;max-width:none;min-height:0;outline:#112644 0;overflow-x:visible;overflow-y:visible;padding:0;position:relative;text-align:left;vertical-align:baseline;width:804px}div.oembedall-lanyard .tagline{font-size:1.5em}div.oembedall-lanyard .wrapper{overflow:hidden;clear:both}div.oembedall-lanyard .split{float:left;display:inline}div.oembedall-lanyard .prominent-place .flag:active,div.oembedall-lanyard .prominent-place .flag:focus,div.oembedall-lanyard .prominent-place .flag:hover,div.oembedall-lanyard .prominent-place .flag:link,div.oembedall-lanyard .prominent-place .flag:visited{float:left;display:block;width:48px;height:48px;position:relative;top:-5px;margin-right:10px}div.oembedall-lanyard .place-context{font-size:.889em}div.oembedall-lanyard .prominent-place .sub-place{display:block}div.oembedall-lanyard .prominent-place{font-size:1.125em;line-height:1.1em;font-weight:400}div.oembedall-lanyard .main-date{color:#8CB4E0;font-weight:700;line-height:1.1}div.oembedall-lanyard .first{width:48.57%;margin:0 0 0 2.857%}.mermaid .label{color:#333}.node circle,.node polygon,.node rect{fill:#cde498;stroke:#13540c;stroke-width:1px}.edgePath .path{stroke:green;stroke-width:1.5px}.cluster rect{fill:#cdffb2;rx:40;stroke:#6eaa49;stroke-width:1px}.cluster text{fill:#333}.actor{stroke:#13540c;fill:#cde498}text.actor{fill:#000;stroke:none}.actor-line{stroke:grey}.messageLine0{stroke-width:1.5;stroke-dasharray:”2 2″;marker-end:”url(#arrowhead)”;stroke:#333}.messageLine1{stroke-width:1.5;stroke-dasharray:”2 2″;stroke:#333}#arrowhead{fill:#333}#crosshead path{fill:#333!important;stroke:#333!important}.messageText{fill:#333;stroke:none}.labelBox{stroke:#326932;fill:#cde498}.labelText,.loopText{fill:#000;stroke:none}.loopLine{stroke-width:2;stroke-dasharray:”2 2″;marker-end:”url(#arrowhead)”;stroke:#326932}.note{stroke:#6eaa49;fill:#fff5ad}.noteText{fill:#000;stroke:none;font-family:’trebuchet ms’,verdana,arial;font-size:14px}.section{stroke:none;opacity:.2}.section0,.section2{fill:#6eaa49}.section1,.section3{fill:#fff;opacity:.2}.sectionTitle0,.sectionTitle1,.sectionTitle2,.sectionTitle3{fill:#333}.sectionTitle{text-anchor:start;font-size:11px;text-height:14px}.grid .tick{stroke:lightgrey;opacity:.3;shape-rendering:crispEdges}.grid path{stroke-width:0}.today{fill:none;stroke:red;stroke-width:2px}.task{stroke-width:2}.taskText{text-anchor:middle;font-size:11px}.taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px}.taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}.taskText0,.taskText1,.taskText2,.taskText3{fill:#fff}.task0,.task1,.task2,.task3{fill:#487e3a;stroke:#13540c}.taskTextOutside0,.taskTextOutside1,.taskTextOutside2,.taskTextOutside3{fill:#000}.active0,.active1,.active2,.active3{fill:#cde498;stroke:#13540c}.activeText0,.activeText1,.activeText2,.activeText3{fill:#000!important}.done0,.done1,.done2,.done3{stroke:grey;fill:lightgrey;stroke-width:2}.doneText0,.doneText1,.doneText2,.doneText3{fill:#000!important}.crit0,.crit1,.crit2,.crit3{stroke:#f88;fill:red;stroke-width:2}.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3{stroke:#f88;fill:#cde498;stroke-width:2}.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3{stroke:#f88;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3,.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3{fill:#000!important}.titleText{text-anchor:middle;font-size:18px;fill:#000}text{font-family:’trebuchet ms’,verdana,arial;font-size:14px}html{height:100%}body{margin:0!important;padding:5px 20px 26px!important;background-color:#fff;font-family:”Lucida Grande”,”Segoe UI”,”Apple SD Gothic Neo”,”Malgun Gothic”,”Lucida Sans Unicode”,Helvetica,Arial,sans-serif;font-size:.9em;overflow-x:hidden;overflow-y:auto}br,h1,h2,h3,h4,h5,h6{clear:both}hr.page{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x;border:0;height:3px;padding:0}hr.underscore{border-top-style:dashed!important}body >–>:first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:3px}iframe{border:0}figure{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}kbd{border:1px solid #aaa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:1px 2px 2px #ddd;-webkit-box-shadow:1px 2px 2px #ddd;box-shadow:1px 2px 2px #ddd;background-color:#f9f9f9;background-image:-moz-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:-o-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:-webkit-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:linear-gradient(top,#eee,#f9f9f9,#eee);padding:1px 3px;font-family:inherit;font-size:.85em}.oembeded .oembed_photo{display:inline-block}img[data-echo]{margin:25px 0;width:100px;height:100px;background:url(../img/ajax.gif) center center no-repeat #fff}.spinner{display:inline-block;width:10px;height:10px;margin-bottom:-.1em;border:2px solid rgba(0,0,0,.5);border-top-color:transparent;border-radius:100%;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}.spinner:after{content:”;display:block;width:0;height:0;position:absolute;top:-6px;left:0;border:4px solid transparent;border-bottom-color:rgba(0,0,0,.5);-webkit-transform:rotate(45deg);transform:rotate(45deg)}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}p.toc{margin:0!important}p.toc ul{padding-left:10px}p.toc>ul{padding:10px;margin:0 10px;display:inline-block;border:1px solid #ededed;border-radius:5px}p.toc li,p.toc ul{list-style-type:none}p.toc li{width:100%;padding:0;overflow:hidden}p.toc li a::after{content:”.”}p.toc li a:before{content:”• “}p.toc h5{text-transform:uppercase}p.toc .title{float:left;padding-right:3px}p.toc .number{margin:0;float:right;padding-left:3px;background:#fff;display:none}input.task-list-item{margin-left:-1.62em}.markdown{font-family:”Hiragino Sans GB”,”Microsoft YaHei”,STHeiti,SimSun,”Lucida Grande”,”Lucida Sans Unicode”,”Lucida Sans”,’Segoe UI’,AppleSDGothicNeo-Medium,’Malgun Gothic’,Verdana,Tahoma,sans-serif;padding:20px}.markdown a{text-decoration:none;vertical-align:baseline}.markdown a:hover{text-decoration:underline}.markdown h1{font-size:2.2em;font-weight:700;margin:1.5em 0 1em}.markdown h2{font-size:1.8em;font-weight:700;margin:1.275em 0 .85em}.markdown h3{font-size:1.6em;font-weight:700;margin:1.125em 0 .75em}.markdown h4{font-size:1.4em;font-weight:700;margin:.99em 0 .66em}.markdown h5{font-size:1.2em;font-weight:700;margin:.855em 0 .57em}.markdown h6{font-size:1em;font-weight:700;margin:.75em 0 .5em}.markdown h1+p,.markdown h1:first-child,.markdown h2+p,.markdown h2:first-child,.markdown h3+p,.markdown h3:first-child,.markdown h4+p,.markdown h4:first-child,.markdown h5+p,.markdown h5:first-child,.markdown h6+p,.markdown h6:first-child{margin-top:0}.markdown hr{border:1px solid #ccc}.markdown p{margin:1em 0;word-wrap:break-word}.markdown ol{list-style-type:decimal}.markdown li{display:list-item;line-height:1.4em}.markdown blockquote{margin:1em 20px}.markdown blockquote>:first-child{margin-top:0}.markdown blockquote>:last-child{margin-bottom:0}.markdown blockquote cite:before{content:’\2014 \00A0′}.markdown .code{border-radius:3px;word-wrap:break-word}.markdown pre{border-radius:3px;word-wrap:break-word;border:1px solid #ccc;overflow:auto;padding:.5em}.markdown pre code{border:0;display:block}.markdown pre>code{font-family:Consolas,Inconsolata,Courier,monospace;font-weight:700;white-space:pre;margin:0}.markdown code{border-radius:3px;word-wrap:break-word;border:1px solid #ccc;padding:0 5px;margin:0 2px}.markdown img{max-width:100%}.markdown mark{color:#000;background-color:#fcf8e3}.markdown table{padding:0;border-collapse:collapse;border-spacing:0;margin-bottom:16px}.markdown table tr td,.markdown table tr th{border:1px solid #ccc;margin:0;padding:6px 13px}.markdown table tr th{font-weight:700}.markdown table tr th>:first-child{margin-top:0}.markdown table tr th>:last-child{margin-bottom:0}.markdown table tr td>:first-child{margin-top:0}.markdown table tr td>:last-child{margin-bottom:0}@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);.haroopad{padding:20px;color:#222;font-size:15px;font-family:”Roboto Condensed”,Tauri,”Hiragino Sans GB”,”Microsoft YaHei”,STHeiti,SimSun,”Lucida Grande”,”Lucida Sans Unicode”,”Lucida Sans”,’Segoe UI’,AppleSDGothicNeo-Medium,’Malgun Gothic’,Verdana,Tahoma,sans-serif;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}.haroopad a{color:#3269a0}.haroopad a:hover{color:#4183c4}.haroopad h2{border-bottom:1px solid #e6e6e6}.haroopad h6{color:#777}.haroopad hr{border:1px solid #e6e6e6}.haroopad blockquote>code,.haroopad h1>code,.haroopad h2>code,.haroopad h3>code,.haroopad h4>code,.haroopad h5>code,.haroopad h6>code,.haroopad li>code,.haroopad p>code,.haroopad td>code{font-family:Consolas,”Liberation Mono”,Menlo,Courier,monospace;font-size:85%;background-color:rgba(0,0,0,.02);padding:.2em .5em;border:1px solid #efefef}.haroopad pre>code{font-size:1em;letter-spacing:-1px;font-weight:700}.haroopad blockquote{border-left:4px solid #e6e6e6;padding:0 15px;color:#777}.haroopad table{background-color:#fafafa}.haroopad table tr td,.haroopad table tr th{border:1px solid #e6e6e6}.haroopad table tr:nth-child(2n){background-color:#f2f2f2}.hljs{display:block;overflow-x:auto;padding:.5em;background:#fdf6e3;color:#657b83;-webkit-text-size-adjust:none}.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.lisp .hljs-string{color:#93a1a1}.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title{color:#859900}.hljs-command,.hljs-dartdoc,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#2aa198}.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal{color:#268bd2}.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-type,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number{color:#b58900}.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string{color:#cb4b16}.hljs-deletion,.hljs-important{color:#dc322f}.hljs-link_label{color:#6c71c4}.tex .hljs-formula{background:#eee8d5}.MathJax_Hover_Frame{border-radius:.25em;-webkit-border-radius:.25em;-moz-border-radius:.25em;-khtml-border-radius:.25em;box-shadow:0 0 15px #83A;-webkit-box-shadow:0 0 15px #83A;-moz-box-shadow:0 0 15px #83A;-khtml-box-shadow:0 0 15px #83A;border:1px solid #A6D!important;display:inline-block;position:absolute}.MathJax_Hover_Arrow{position:absolute;width:15px;height:11px;cursor:pointer}#MathJax_About{position:fixed;left:50%;width:auto;text-align:center;border:3px outset;padding:1em 2em;background-color:#DDD;color:#000;cursor:default;font-family:message-box;font-size:120%;font-style:normal;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;z-index:201;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;-khtml-border-radius:15px;box-shadow:0 10px 20px gray;-webkit-box-shadow:0 10px 20px gray;-moz-box-shadow:0 10px 20px gray;-khtml-box-shadow:0 10px 20px gray;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=’gray’, Positive=’true’)}.MathJax_Menu{position:absolute;background-color:#fff;color:#000;width:auto;padding:2px;border:1px solid #CCC;margin:0;cursor:default;font:menu;text-align:left;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;z-index:201;box-shadow:0 10px 20px gray;-webkit-box-shadow:0 10px 20px gray;-moz-box-shadow:0 10px 20px gray;-khtml-box-shadow:0 10px 20px gray;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=’gray’, Positive=’true’)}.MathJax_MenuItem{padding:2px 2em;background:0 0}.MathJax_MenuArrow{position:absolute;right:.5em;color:#666}.MathJax_MenuActive .MathJax_MenuArrow{color:#fff}.MathJax_MenuArrow.RTL{left:.5em;right:auto}.MathJax_MenuCheck{position:absolute;left:.7em}.MathJax_MenuCheck.RTL{right:.7em;left:auto}.MathJax_MenuRadioCheck{position:absolute;left:1em}.MathJax_MenuRadioCheck.RTL{right:1em;left:auto}.MathJax_MenuLabel{padding:2px 2em 4px 1.33em;font-style:italic}.MathJax_MenuRule{border-top:1px solid #CCC;margin:4px 1px 0}.MathJax_MenuDisabled{color:GrayText}.MathJax_MenuActive{background-color:Highlight;color:HighlightText}.MathJax_Menu_Close{position:absolute;width:31px;height:31px;top:-15px;left:-15px}#MathJax_Zoom{position:absolute;background-color:#F0F0F0;overflow:auto;display:block;z-index:301;padding:.5em;border:1px solid #000;margin:0;font-weight:400;font-style:normal;text-align:left;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;box-shadow:5px 5px 15px #AAA;-webkit-box-shadow:5px 5px 15px #AAA;-moz-box-shadow:5px 5px 15px #AAA;-khtml-box-shadow:5px 5px 15px #AAA;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=’gray’, Positive=’true’)}#MathJax_ZoomOverlay{position:absolute;left:0;top:0;z-index:300;display:inline-block;width:100%;height:100%;border:0;padding:0;margin:0;background-color:#fff;opacity:0;filter:alpha(opacity=0)}#MathJax_ZoomFrame{position:relative;display:inline-block;height:0;width:0}#MathJax_ZoomEventTrap{position:absolute;left:0;top:0;z-index:302;display:inline-block;border:0;padding:0;margin:0;background-color:#fff;opacity:0;filter:alpha(opacity=0)}.MathJax_Preview{color:#888}#MathJax_Message{position:fixed;left:1px;bottom:2px;background-color:#E6E6E6;border:1px solid #959595;margin:0;padding:2px 8px;z-index:102;color:#000;font-size:80%;width:auto;white-space:nowrap}#MathJax_MSIE_Frame{position:absolute;top:0;left:0;width:0;z-index:101;border:0;margin:0;padding:0}.MathJax_Error{color:#C00;font-style:italic}footer{position:fixed;font-size:.8em;text-align:right;bottom:0;margin-left:-25px;height:20px;width:100%}
–>

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,991
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,506
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,349
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,134
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,766
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,844