像这种带点立体效果的光柱如果用css3实现-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

yundun119 2018-11-12 13:52:44 1840

而且此光柱是慢慢从下往上升起来的~

__20181112134800

分享到
取消 提交回答
全部回答(2)
  • yundun119
    2019-07-17 23:13:34

    多谢~

    __20190108092052

    0 0
  • hiekay
    2019-07-17 23:13:34
    • {

      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);

    }

    1 0
添加回答
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章