CSS3 逼真的蜡烛烛火

使用线性渐变、box-shadow、css 3d变换以及blur方法实现。

css3, candle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #000;
    overflow: hidden;
}
.candle {
    width: 150px;
    height: 250px;
    background: linear-gradient(to right, #75776a 0%, #fcfff4 50%, #75776a 100%);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 5px #000 inset;
    position: absolute;
    top: 80%;
    left: 40%;
    perspective: 400px;
    transform-style: preserve-3d;
}
.candle:before {
    content: '';
    width: 10px;
    height: 30px;
    background: linear-gradient(to bottom, #f92302 0%, #444 30%);
    border-radius: 2px 2px 0 0;
    position: absolute;
    top: -32px;
    left: 70px;
}
.flame:nth-child(1) {
    transform: rotate(180deg) translateZ(-10px);
}
.flame:nth-child(1):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.04s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(2) {
    transform: rotate(180deg) translateZ(-20px);
}
.flame:nth-child(2):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.08s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(3) {
    transform: rotate(180deg) translateZ(-30px);
}
.flame:nth-child(3):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.12s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(4) {
    transform: rotate(180deg) translateZ(-40px);
}
.flame:nth-child(4):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.16s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(5) {
    transform: rotate(180deg) translateZ(-50px);
}
.flame:nth-child(5):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.2s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(6) {
    transform: rotate(180deg) translateZ(-60px);
}
.flame:nth-child(6):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.24s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(7) {
    transform: rotate(180deg) translateZ(-70px);
}
.flame:nth-child(7):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.28s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(8) {
    transform: rotate(180deg) translateZ(-80px);
}
.flame:nth-child(8):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.32s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(9) {
    transform: rotate(180deg) translateZ(-90px);
}
.flame:nth-child(9):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.36s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}
.flame:nth-child(10) {
    transform: rotate(180deg) translateZ(-100px);
}
.flame:nth-child(10):before {
    content: '';
    width: 70px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 30px 20px rgba(255, 255, 0, 0.06), 0 -50px 40px rgba(255, 255, 0, 0.06) inset;
    position: absolute;
    top: 30px;
    left: 40px;
    animation: flame 0.75s -0.4s alternate linear infinite;
}
@keyframes flame {
    50% {
        transform: rotateY(0.2turn) translateY(50px);
        filter: blur(10px);
        box-shadow: 0 30px 20px #e25822, 0 -50px 40px #ff0 inset;
    }
    100% {
        transform-origin: 50px 0;
        transform: rotateX(0.05turn);
    }
}

HTML

使用线性渐变、box-shadow、css 3d变换以及blur方法实现。

css3, candle

编辑器支持Emmet

快捷键

使用线性渐变、box-shadow、css 3d变换以及blur方法实现。

css3, candle

CSS3 蜡烛的火焰

HTML5/CSS3融化的蜡烛和烛火动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：