CSS3 类似`萤火虫`发光图形动画

Firefly，使用box-shadow做的发光效果。

jQuery

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #111;
}
.blue {
    position: absolute;
    top: 50%;
    left: 70%;
    height: 16px;
    width: 16px;
    border-radius: 100%;
}
.blue:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
    background: cyan;
    border-radius: 100%;
    box-shadow: 0 0 14px 4px cyan;
    animation: beat 4s infinite;
}
.yellow {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    height: 16px;
    width: 16px;
    border-radius: 100%;
}
.yellow:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
    background: yellow;
    border-radius: 100%;
    box-shadow: 0 0 14px 4px yellow;
    animation: beat 4s infinite;
}
.sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 4px;
    width: 4px;
    border-radius: 100%;
    box-shadow: 0 0 10px 4px #00BCD4;
    animation: move 6s infinite;
}
@keyframes beat {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes move {
    50% {
        top: 50%;
        left: 70%;
        opacity: 1;
        box-shadow: 0 0 14px 4px cyan;
        background: cyan;
    }
    0% {
        top: 50%;
        left: 40%;
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 14px 4px yellow;
        background: yellow;
    }
    25% {
        top: 50%;
        transform: scale(1.6);
    }
    75% {
        top: 50%;
        transform: scale(1.6);
    }
    100% {
        top: 50%;
        left: 40%;
        box-shadow: 0 0 14px 4px yellow;
        background: yellow;
        transform: scale(1);
    }
}

HTML

Firefly，使用box-shadow做的发光效果。

jQuery

编辑器支持Emmet

快捷键

Firefly，使用box-shadow做的发光效果。

jQuery

CSS3+jQuery 响应式动画式饼图

CSS3+jQuery 有色液体水珠互换型沙漏斗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：