CSS3 发射光柱的立方体

Glowing Cube 可用于模拟打开盒子后的珠光宝气。

css3, cube, light

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2790
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    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);
}

HTML

Glowing Cube 可用于模拟打开盒子后的珠光宝气。

css3, cube, light

编辑器支持Emmet

快捷键

Glowing Cube 可用于模拟打开盒子后的珠光宝气。

css3, cube, light

CSS3 立方体的重力演示动画

HTML5 CSS3极富创意的立方体游泳动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：