开发者社区> 问答> 正文

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

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

__20181112134800

展开
收起
yundun119 2018-11-12 13:52:44 4551 0
2 条回答
写回答
取消 提交回答
  • 多谢~

    __20190108092052

    2019-07-17 23:13:34
    赞同 展开评论 打赏
  • java 数据分析 数据可视化 大数据
    • {

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

    }

    2019-07-17 23:13:34
    赞同 1 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载