CSS3 蜡烛的火焰

css candle flare, fire, flame

css, candle, fire

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
    background: #000;
}
.zone-wrap {
    padding: 80px;
    overflow: hidden;
    background: #000;
    -webkit-filter: brightness(1.6) contrast(10);
    filter: brightness(1.6) contrast(10);
}
.zone {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 30px auto;
    -webkit-filter: blur(18px);
    filter: blur(18px);
}
.magnets {
    background: #000;
    white-space: nowrap;
}
.magnets div {
    position: absolute;
    display: block;
    width: 80px;
    height: 30px;
    border-radius: 30%;
    background: transparent;
}
.magnets div:nth-child(1) {
    top: 0;
    box-shadow: 0 0 90px #f97;
    -webkit-animation: clockwise 3.14s linear infinite;
    animation: clockwise 3.14s linear infinite;
}
.magnets div:nth-child(2) {
    top: 0;
    left: -20px;
    box-shadow: 0 0 70px #f97;
    -webkit-animation: counter-clockwise 4s linear infinite;
    animation: counter-clockwise 4s linear infinite;
}
.magnets div:nth-child(3) {
    top: 0;
    left: 20px;
    box-shadow: 0 0 70px #f97;
    -webkit-animation: clockwise 1.9s linear infinite;
    animation: clockwise 1.9s linear infinite;
}
.magnets div:nth-child(4) {
    top: -15px;
    box-shadow: 0 0 800px #f97;
    -webkit-animation: counter-clockwise 2.71s linear infinite;
    animation: counter-clockwise 2.71s linear infinite;
}
.magnets div:nth-child(5) {
    width: 10px;
    height: 10px;
    top: 20px;
    left: -65px;
    box-shadow: 0 0 50px #f97;
    -webkit-animation: counter-clockwise 3.71s linear infinite;
    animation: counter-clockwise 3.71s linear infinite;
}
.magnets div:nth-child(6) {
    width: 10px;
    height: 10px;
    top: 20px;
    left: 65px;
    box-shadow: 0 0 50px #f97;
    -webkit-animation: clockwise 4.71s linear infinite;
    animation: clockwise 4.71s linear infinite;
}
.sphere {
    background: #000;
    white-space: nowrap;
}
.sphere .core {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 153, 119, 0.6);
    border-bottom: 15px solid #ddd;
}
@-webkit-keyframes clockwise {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(-40px, -40px);
        transform: translate(-40px, -40px);
    }
    50% {
        -webkit-transform: translate(0px, -80px);
        transform: translate(0px, -80px);
    }
    75% {
        -webkit-transform: translate(40px, -40px);
        transform: translate(40px, -40px);
    }
}
@keyframes clockwise {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(-40px, -40px);
        transform: translate(-40px, -40px);
    }
    50% {
        -webkit-transform: translate(0px, -80px);
        transform: translate(0px, -80px);
    }
    75% {
        -webkit-transform: translate(40px, -40px);
        transform: translate(40px, -40px);
    }
}
@-webkit-keyframes counter-clockwise {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(40px, -40px);
        transform: translate(40px, -40px);
    }
    50% {
        -webkit-transform: translate(0px, -80px);
        transform: translate(0px, -80px);
    }
    75% {
        -webkit-transform: translate(-40px, -40px);
        transform: translate(-40px, -40px);
    }
}
@keyframes counter-clockwise {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(40px, -40px);
        transform: translate(40px, -40px);
    }
    50% {
        -webkit-transform: translate(0px, -80px);
        transform: translate(0px, -80px);
    }
    75% {
        -webkit-transform: translate(-40px, -40px);
        transform: translate(-40px, -40px);
    }
}

HTML

css candle flare, fire, flame

css, candle, fire

编辑器支持Emmet

快捷键

css candle flare, fire, flame

css, candle, fire

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

CSS3时光机（蜡笔 | 彩笔）风格的照片滤镜特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：