5个很棒的CSS3文本粒子动画特效

CSS Particle Effects 包括：气泡化、线条交错、粉末、火焰、光线旋转。

css3, 文本特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var particles = function() {
    var bubbles = function() {
        var density = 100;
        var uppersize = 6;
        var lowersize = 3;
    };
};

function initparticles() {
    bubbles();
    lines();
    confetti();
    fire();
    sunbeams();
}

function lines() {
 $.each($(".particletext.lines"), function() {
 var linecount = ($(this).find(".text").width() / 50) * 10;
 for (var i = 0; i <= linecount; i++) {
 $(this).append('');
 }
 });
}

jQuery.rnd = function(m, n) {
    m = parseInt(m);
    n = parseInt(n);
    return Math.floor(Math.random() * (n - m + 1)) + m;
}

initparticles();

编译

CSS

body {
    padding: 40px 0;
    font-family: 'bebas', sans-serif;
}
body .textcontainer {
    padding: 40px 0;
    text-align: center;
}
body .particletext {
    text-align: center;
    font-size: 48px;
    position: relative;
}
body .particletext.bubbles > .particle {
    opacity: 0;
    position: absolute;
    background-color: rgba(33, 150, 243, 0.5);
    -webkit-animation: bubbles 3s ease-in infinite;
    animation: bubbles 3s ease-in infinite;
    border-radius: 100%;
}
body .particletext.lines > .particle {
    position: absolute;
    background-color: rgba(244, 67, 54, 0.5);
    -webkit-animation: lines 3s linear infinite;
    animation: lines 3s linear infinite;
}
body .particletext.confetti > .particle {
    opacity: 0;
    position: absolute;
    -webkit-animation: confetti 3s ease-in infinite;
    animation: confetti 3s ease-in infinite;
}
body .particletext.confetti > .particle.c1 {
    background-color: rgba(76, 175, 80, 0.5);
}
body .particletext.confetti > .particle.c2 {
    background-color: rgba(156, 39, 176, 0.5);
}
body .particletext.fire > .particle {
    position: absolute;
    background-color: rgba(255, 193, 7, 0.5);
    border-radius: 40px;
    border-top-right-radius: 0px;
    -webkit-animation: fires 0.8s linear infinite;
    animation: fires 0.8s linear infinite;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
}
body .particletext.fire > .particle:before {
    position: absolute;
    content: '';
    top: 60%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 40px;
    border-top-right-radius: 0px;
    background-color: rgba(251, 140, 0, 0.5);
}
body .particletext.sunbeams > .particle {
    position: absolute;
    background-color: rgba(253, 216, 53, 0.5);
    -webkit-animation: sunbeams 3s linear infinite;
    animation: sunbeams 3s linear infinite;
}
@-webkit-keyframes bubbles {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        -webkit-transform: translate(0, -20%);
        transform: translate(0, -20%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%);
        transform: translate(0, -1000%);
    }
}
@keyframes bubbles {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        -webkit-transform: translate(0, -20%);
        transform: translate(0, -20%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%);
        transform: translate(0, -1000%);
    }
}
@-webkit-keyframes lines {
    0%, 50%, 100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    25% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    75% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
@keyframes lines {
    0%, 50%, 100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    25% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    75% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
@-webkit-keyframes confetti {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0%) rotate(0deg);
        transform: translateY(0%) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    35% {
        -webkit-transform: translateY(-800%) rotate(270deg);
        transform: translateY(-800%) rotate(270deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000%) rotate(1440deg);
        transform: translateY(2000%) rotate(1440deg);
    }
}
@keyframes confetti {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0%) rotate(0deg);
        transform: translateY(0%) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    35% {
        -webkit-transform: translateY(-800%) rotate(270deg);
        transform: translateY(-800%) rotate(270deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000%) rotate(1440deg);
        transform: translateY(2000%) rotate(1440deg);
    }
}
@-webkit-keyframes fires {
    0% {
        -webkit-transform: rotate(-70deg) translateY(0%);
        transform: rotate(-70deg) translateY(0%);
    }
    25% {
        -webkit-transform: rotate(-20deg) translateY(-5%);
        transform: rotate(-20deg) translateY(-5%);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(-70deg) translateY(-10%);
        transform: rotate(-70deg) translateY(-10%);
    }
    75% {
        -webkit-transform: rotate(-20deg) translateY(-20%);
        transform: rotate(-20deg) translateY(-20%);
    }
    100% {
        -webkit-transform: rotate(-70deg) translateY(-40%);
        transform: rotate(-70deg) translateY(-40%);
        opacity: 1;
    }
}
@keyframes fires {
    0% {
        -webkit-transform: rotate(-70deg) translateY(0%);
        transform: rotate(-70deg) translateY(0%);
    }
    25% {
        -webkit-transform: rotate(-20deg) translateY(-5%);
        transform: rotate(-20deg) translateY(-5%);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(-70deg) translateY(-10%);
        transform: rotate(-70deg) translateY(-10%);
    }
    75% {
        -webkit-transform: rotate(-20deg) translateY(-20%);
        transform: rotate(-20deg) translateY(-20%);
    }
    100% {
        -webkit-transform: rotate(-70deg) translateY(-40%);
        transform: rotate(-70deg) translateY(-40%);
        opacity: 1;
    }
}
@-webkit-keyframes sunbeams {
    0% {
        -webkit-transform: translateY(40%) rotate(0deg);
        transform: translateY(40%) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-40%) rotate(180deg);
        transform: translateY(-40%) rotate(180deg);
    }
    100% {
        -webkit-transform: translateY(40%) rotate(360deg);
        transform: translateY(40%) rotate(360deg);
    }
    0%,
    14%,
    17%,
    43%,
    53%,
    71%,
    80%,
    94%,
    100% {
        opacity: 0;
    }
    6%,
    15%,
    24%,
    28%,
    48%,
    55%,
    78%,
    82%,
    99% {
        opacity: 1;
    }
}
@keyframes sunbeams {
    0% {
        -webkit-transform: translateY(40%) rotate(0deg);
        transform: translateY(40%) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-40%) rotate(180deg);
        transform: translateY(-40%) rotate(180deg);
    }
    100% {
        -webkit-transform: translateY(40%) rotate(360deg);
        transform: translateY(40%) rotate(360deg);
    }
    0%,
    14%,
    17%,
    43%,
    53%,
    71%,
    80%,
    94%,
    100% {
        opacity: 0;
    }
    6%,
    15%,
    24%,
    28%,
    48%,
    55%,
    78%,
    82%,
    99% {
        opacity: 1;
    }
}

HTML

CSS Particle Effects 包括：气泡化、线条交错、粉末、火焰、光线旋转。

css3, 文本特效

编辑器支持Emmet

快捷键

CSS Particle Effects 包括：气泡化、线条交错、粉末、火焰、光线旋转。

css3, 文本特效

HTML5 CSS3一款很棒的文本溶解过渡动画特效

HTML5 Canvas很棒的文本片段化笼子动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：