像这种带点立体效果的光柱如果用css3实现

多谢~

• {

  box-sizing: border-box;

  }

html,
body {

width: 100%;
height: 100%;
margin: 0;

}
.container {

width: 100%;
height: 100%;
background-color: #3e6690;
background-image: -webkit-radial-gradient(#3e6690 0%, #111e34 100%);
background-image: -webkit-radial-gradient( #3e6690 0%, #111e34 100%);
background-image: radial-gradient( #3e6690 0%, #111e34 100%);

}
.canvas {

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}
.box {

width: 200px;
margin: 0 auto;
position: relative;

}
.box .back {

width: 160px;
height: 160px;

}
.box .back:before,
.box .back:after {

content: "";
display: block;
float: left;

}
.box .back:before {

width: 80px;
height: 110px;
background: #4594cf;
-webkit-transform: skewY(-25deg);
transform: skewY(-25deg);

}
.box .back:after {

width: 80px;
height: 110px;
background: #50a3e0;
-webkit-transform: skewY(25deg);
transform: skewY(25deg);

}
.box .front {

width: 160px;
height: 110px;
position: absolute;
top: 38px;
left: 0;
z-index: 3;

}
.box .front:before,
.box .front:after {

content: "";
display: block;
float: left;
box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.5);

}
.box .front:before {

width: 80px;
height: 110px;
background: #50a3e0;
-webkit-transform: skewY(25deg);
transform: skewY(25deg);

}
.box .front:after {

width: 80px;
height: 110px;
background: #4595d0;
-webkit-transform: skewY(-25deg);
transform: skewY(-25deg);

}
.box .shines {

width: 160px;
height: 110px;
position: absolute;
top: 0;
left: 0;
z-index: 2;

}
.box .shines .core {

width: 10px;
height: 10px;
margin: 60px auto 0 auto;
background: #fff;
border-radius: 100%;
box-shadow: 0 0 30px 40px rgba(255, 255, 255, 0.8);

}
.box .shines .raising {

position: absolute;
width: 0;
height: 600px;
bottom: 30px;
left: 50%;
z-index: 2;
box-shadow: 0 0 50px 30px rgba(255, 255, 255, 0.3);

}