Fontawesome 生日快乐卡片动效（蜡烛背景）

蜡烛背景图使用了fa-birthday-cake字体图标。

css3, card

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #89b582;
}
.birthday {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-size: 10em;
    font-family: 'Oswald', sans-serif;
    color: #fff;
    text-shadow: 0px 3px rgba(0, 0, 0, 0.1);
}
.birthday span {
    display: inline-block;
    vertical-align: middle;
}
.current {
    position: relative;
}
.current span:nth-child(2) {
    -webkit-animation: hide 1s 1.5s ease forwards;
    animation: hide 1s 1.5s ease forwards;
}
.current:after {
    position: absolute;
    left: 5px;
    content: "Years";
    font-size: 20px;
    opacity: 0.5;
}
.frontend {
    position: relative;
    left: 70px;
    -webkit-animation: move 0.75s 1s ease forwards;
    animation: move 0.75s 1s ease forwards;
}
.frontend:after {
    position: absolute;
    left: -85px;
    content: "Befreundet seit Februar 2013";
    font-size: 20px;
    opacity: 0.5;
    white-space: nowrap;
    -webkit-animation: hide 0.5s 1s ease forwards;
    animation: hide 0.5s 1s ease forwards;
}
.frontend-text:after {
    content: "5";
    position: absolute;
    left: 100%;
    -webkit-animation: f-right 0.75s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation: f-right 0.75s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.frontend-text:before {
    content: "5";
    position: absolute;
    right: 100%;
    -webkit-animation: f-left 0.75s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation: f-left 0.75s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.current,
.frontend,
.plus {
    display: inline-block;
}
.plus {
    -webkit-animation: hide 0.3s 1s ease forwards;
    animation: hide 0.3s 1s ease forwards;
}
@-webkit-keyframes hide {
    to {
        opacity: 0;
    }
}
@keyframes hide {
    to {
        opacity: 0;
    }
}
@-webkit-keyframes show {
    to {
        opacity: 1;
        top: 40px;
    }
}
@keyframes show {
    to {
        opacity: 1;
        top: 40px;
    }
}
@-webkit-keyframes f-left {
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
    }
}
@keyframes f-left {
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
    }
}
@-webkit-keyframes f-right {
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}
@keyframes f-right {
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}
@-webkit-keyframes move {
    to {
        left: -250px;
    }
}
@keyframes move {
    to {
        left: -250px;
    }
}
@-webkit-keyframes cake {
    to {
        font-size: 28em;
        color: rgba(255, 255, 255, 0.1);
    }
}
@keyframes cake {
    to {
        font-size: 28em;
        color: rgba(255, 255, 255, 0.1);
    }
}
.final {
    position: absolute;
    font-size: 58px;
    left: 48%;
    top: -10px;
    line-height: 1.3;
    opacity: 0;
    -webkit-animation: show 1s 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation: show 1s 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.final span {
    display: block;
}
.fa-birthday-cake {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 5em;
    color: rgba(255, 255, 255, 0);
    -webkit-animation: cake 1s 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation: cake 1s 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.bild {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 5em;
    color: rgba(255, 255, 255, 0);
    -webkit-animation: cake 1s 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation: cake 1s 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

HTML

蜡烛背景图使用了fa-birthday-cake字体图标。

css3, card

编辑器支持Emmet

快捷键

蜡烛背景图使用了fa-birthday-cake字体图标。

css3, card

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

使用mo.js 和 anime.js实现带粒子散射动画的金色璀璨卡片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：