CSS3构建的白色蜡烛

点击引线，可以点燃蜡烛

css3, candle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    background: black;
    width: 100%;
    height: 100%;
}
.candle {
    background: white;
    width: 60px;
    height: 300px;
    position: absolute;
    top: 120px;
    left: calc(50% - 30px);
    border-radius: 40px / 20px;
}
.candle:after {
    background: #e2e2e2;
    width: 60px;
    height: 30px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    border-radius: 40px / 20px;
}
.match {
    background: #f4f4f4;
    width: 4px;
    height: 40px;
    position: absolute;
    top: 95px;
    left: calc(50% - 2px);
    border-radius: 4px / 2px;
}
.match > a {
    width: 100%;
    height: 100%;
    display: block;
}
.match:target ~ .fire {
    background: #eb7900;
    width: 60px;
    height: 80px;
    opacity: 0.80;
    position: absolute;
    top: 40px;
    left: calc(50% - 30px);
    border-radius: 120px 120px 80px 80px / 240px 240px 80px 80px;
    box-shadow: 0 -1px 3px 1px #eb7900;
    animation: candle 0.1s infinite;
}
.match:target ~ .fire:after {
    background: #ebdb00;
    width: 36px;
    height: 50px;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 18px);
    opacity: 0.90;
    border-radius: 120px 120px 80px 80px / 240px 240px 60px 60px;
    box-shadow: 0 -1px 2px 1px #ebdb00;
}
.match:target ~ .fire > a {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes candle {
    0% {
        height: 80px;
    }
    100% {
        height: 90px;
        top: 30px;
    }
}
.match:target ~ .light {
    background: #ffba24;
    width: 0;
    height: 0;
    position: absolute;
    top: 10px;
    left: calc(50%);
    opacity: 0.50;
    box-shadow: 0 0 200px 150px #ffba24;
    animation: light 0.1s infinite;
}
@keyframes light {
    0% {
        box-shadow: 0 0 200px 150px #ffba24;
    }
    100% {
        box-shadow: 0 0 220px 160px #ffba24;
    }
}

HTML

点击引线，可以点燃蜡烛

css3, candle

编辑器支持Emmet

快捷键

点击引线，可以点燃蜡烛

css3, candle

使用CSS3弹性框特性构建的键盘平板和USB线（黑色版）

纯CSS构建的蜡烛兄弟搞怪吹灭动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：