超级有趣的HTML5最后期限动画

Project Deadline Animation 死神进度条，叫你不加班：）

svg, css3, progress

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* http://portfolio.jonathansilva.com.br/ */
// Init
var $ = jQuery;
var animationTime = 20,
    days = 7;

$(document).ready(function() {

// timer arguments: 
    //   #1 - time of animation in mileseconds, 
    //   #2 - days to deadline

$('#progress-time-fill, #death-group').css({
        'animation-duration': animationTime + 's'
    });

var deadlineAnimation = function() {
        setTimeout(function() {
            $('#designer-arm-grop').css({
                'animation-duration': '1.5s'
            });
        }, 0);

setTimeout(function() {
            $('#designer-arm-grop').css({
                'animation-duration': '1s'
            });
        }, 4000);

setTimeout(function() {
            $('#designer-arm-grop').css({
                'animation-duration': '0.7s'
            });
        }, 8000);

setTimeout(function() {
            $('#designer-arm-grop').css({
                'animation-duration': '0.3s'
            });
        }, 12000);

setTimeout(function() {
            $('#designer-arm-grop').css({
                'animation-duration': '0.2s'
            });
        }, 15000);
    };

function timer(totalTime, deadline) {
        var time = totalTime * 1000;
        var dayDuration = time / deadline;
        var actualDay = deadline;

var timer = setInterval(countTime, dayDuration);

function countTime() {
            --actualDay;
            $('.deadline-days .day').text(actualDay);

if (actualDay == 0) {
                clearInterval(timer);
                $('.deadline-days .day').text(deadline);
            }
        }
    }

var deadlineText = function() {
        var $el = $('.deadline-days');
        var html = '<div class="mask-red"><div class="inner">' + $el.html() + '</div></div><div class="mask-white"><div class="inner">' + $el.html() + '</div></div>';
        $el.html(html);
    }

deadlineText();

deadlineAnimation();
    timer(animationTime, days);

setInterval(function() {
        timer(animationTime, days);
        deadlineAnimation();

console.log('begin interval', animationTime * 1000);

}, animationTime * 1000);

});

编译

CSS

html {
    font-size: 1em;
    line-height: 1.4;
}
html,
body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    background: #000;
}
#deadline {
    width: 581px;
    max-width: 100%;
    height: 158px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#deadline svg {
    width: 100%;
}
#progress-time-fill {
    -webkit-animation-name: progress-fill;
    animation-name: progress-fill;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
/* Death */

#death-group {
    -webkit-animation-name: walk;
    animation-name: walk;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
#death-arm {
    -webkit-animation: move-arm 3s ease infinite;
    animation: move-arm 3s ease infinite;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
#death-tool {
    -webkit-animation: move-tool 3s ease infinite;
    animation: move-tool 3s ease infinite;
    -webkit-transform-origin: -48px center;
    transform-origin: -48px center;
}
/* Designer */

#designer-arm-grop {
    -webkit-animation: write 1.5s ease infinite;
    animation: write 1.5s ease infinite;
    -webkit-transform: translate(0, 0) rotate(0deg) scale(1, 1);
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
.deadline-days {
    color: #fff;
    text-align: center;
    width: 100px;
    margin: 0 auto;
    position: relative;
    height: 20px;
    font-family: 'Oswald', sans-serif;
}
.deadline-days .inner {
    width: 100px;
    position: relative;
    top: 0;
    left: 0;
}
.mask-red,
.mask-white {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
}
.mask-red {
    left: 0;
    width: 0;
    color: #BE002A;
    -webkit-animation: text-red 20s ease infinite;
    animation: text-red 20s ease infinite;
    z-index: 2;
    background: #000;
}
.mask-white {
    right: 0;
}
/* Flames */

#red-flame {
    opacity: 0;
    -webkit-animation: show-flames 20s ease infinite, red-flame 120ms ease infinite;
    animation: show-flames 20s ease infinite, red-flame 120ms ease infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
#yellow-flame {
    opacity: 0;
    -webkit-animation: show-flames 20s ease infinite, yellow-flame 120ms ease infinite;
    animation: show-flames 20s ease infinite, yellow-flame 120ms ease infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
#white-flame {
    opacity: 0;
    -webkit-animation: show-flames 20s ease infinite, red-flame 100ms ease infinite;
    animation: show-flames 20s ease infinite, red-flame 100ms ease infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
@-webkit-keyframes progress-fill {
    0% {
        x: -100%;
    }
    100% {
        x: -3%;
    }
}
@keyframes progress-fill {
    0% {
        x: -100%;
    }
    100% {
        x: -3%;
    }
}
@-webkit-keyframes walk {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    6% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    ,
    15% {
        -webkit-transform: translateX(140px);
        transform: translateX(140px);
    }
    25% {
        -webkit-transform: translateX(170px);
        transform: translateX(170px);
    }
    35% {
        -webkit-transform: translateX(220px);
        transform: translateX(220px);
    }
    45% {
        -webkit-transform: translateX(280px);
        transform: translateX(280px);
    }
    55% {
        -webkit-transform: translateX(340px);
        transform: translateX(340px);
    }
    65% {
        -webkit-transform: translateX(370px);
        transform: translateX(370px);
    }
    75% {
        -webkit-transform: translateX(430px);
        transform: translateX(430px);
    }
    85% {
        -webkit-transform: translateX(460px);
        transform: translateX(460px);
    }
    100% {
        -webkit-transform: translateX(520px);
        transform: translateX(520px);
    }
}
@keyframes walk {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    6% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    ,
    15% {
        -webkit-transform: translateX(140px);
        transform: translateX(140px);
    }
    25% {
        -webkit-transform: translateX(170px);
        transform: translateX(170px);
    }
    35% {
        -webkit-transform: translateX(220px);
        transform: translateX(220px);
    }
    45% {
        -webkit-transform: translateX(280px);
        transform: translateX(280px);
    }
    55% {
        -webkit-transform: translateX(340px);
        transform: translateX(340px);
    }
    65% {
        -webkit-transform: translateX(370px);
        transform: translateX(370px);
    }
    75% {
        -webkit-transform: translateX(430px);
        transform: translateX(430px);
    }
    85% {
        -webkit-transform: translateX(460px);
        transform: translateX(460px);
    }
    100% {
        -webkit-transform: translateX(520px);
        transform: translateX(520px);
    }
}
@-webkit-keyframes move-arm {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    5% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    9% {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }
    80% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@keyframes move-arm {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    5% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    9% {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }
    80% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@-webkit-keyframes move-tool {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    5% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    9% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
    }
    80% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@keyframes move-tool {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    5% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    9% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
    }
    80% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
/* Design animations */

@-webkit-keyframes write {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg) scale(1, 1);
        transform: translate(0, 0) rotate(0deg) scale(1, 1);
    }
    16% {
        -webkit-transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
        transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
    }
    32% {
        -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }
    48% {
        -webkit-transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
        transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
    }
    65% {
        -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }
    83% {
        -webkit-transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
        transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
    }
}
@keyframes write {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg) scale(1, 1);
        transform: translate(0, 0) rotate(0deg) scale(1, 1);
    }
    16% {
        -webkit-transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
        transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
    }
    32% {
        -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }
    48% {
        -webkit-transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
        transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
    }
    65% {
        -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }
    83% {
        -webkit-transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
        transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
    }
}
@-webkit-keyframes text-red {
    0% {
        width: 0%;
    }
    100% {
        width: 98%;
    }
}
@keyframes text-red {
    0% {
        width: 0%;
    }
    100% {
        width: 98%;
    }
}
/* Flames */
/* @keyframes show-flames {
    0% {
        transform:  translateY(0);
    }
    74% {
        transform:  translateY(0);
    }
    80% {
        transform:  translateY(-30px);
    }
    97% {
        transform:  translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
} */

@-webkit-keyframes show-flames {
    0% {
        opacity: 0;
    }
    74% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes show-flames {
    0% {
        opacity: 0;
    }
    74% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes red-flame {
    0% {
        -webkit-transform: translateY(-30px) scale(1, 1);
        transform: translateY(-30px) scale(1, 1);
    }
    25% {
        -webkit-transform: translateY(-30px) scale(1.1, 1.1);
        transform: translateY(-30px) scale(1.1, 1.1);
    }
    75% {
        -webkit-transform: translateY(-30px) scale(0.8, 0.7);
        transform: translateY(-30px) scale(0.8, 0.7);
    }
    100% {
        -webkit-transform: translateY(-30px) scale(1, 1);
        transform: translateY(-30px) scale(1, 1);
    }
}
@keyframes red-flame {
    0% {
        -webkit-transform: translateY(-30px) scale(1, 1);
        transform: translateY(-30px) scale(1, 1);
    }
    25% {
        -webkit-transform: translateY(-30px) scale(1.1, 1.1);
        transform: translateY(-30px) scale(1.1, 1.1);
    }
    75% {
        -webkit-transform: translateY(-30px) scale(0.8, 0.7);
        transform: translateY(-30px) scale(0.8, 0.7);
    }
    100% {
        -webkit-transform: translateY(-30px) scale(1, 1);
        transform: translateY(-30px) scale(1, 1);
    }
}
@-webkit-keyframes yellow-flame {
    0% {
        -webkit-transform: translateY(-30px) scale(0.8, 0.7);
        transform: translateY(-30px) scale(0.8, 0.7);
    }
    50% {
        -webkit-transform: translateY(-30px) scale(1.1, 1.2);
        transform: translateY(-30px) scale(1.1, 1.2);
    }
    100% {
        -webkit-transform: translateY(-30px) scale(1, 1);
        transform: translateY(-30px) scale(1, 1);
    }
}
@keyframes yellow-flame {
    0% {
        -webkit-transform: translateY(-30px) scale(0.8, 0.7);
        transform: translateY(-30px) scale(0.8, 0.7);
    }
    50% {
        -webkit-transform: translateY(-30px) scale(1.1, 1.2);
        transform: translateY(-30px) scale(1.1, 1.2);
    }
    100% {
        -webkit-transform: translateY(-30px) scale(1, 1);
        transform: translateY(-30px) scale(1, 1);
    }
}

HTML

<div class="deadline-days">
        Deadline <span class="day">7</span> <span class="days">days</span>
    </div>

</div>

Project Deadline Animation 死神进度条，叫你不加班：）

svg, css3, progress

编辑器支持Emmet

快捷键

Project Deadline Animation 死神进度条，叫你不加班：）

svg, css3, progress

HTML5 SVG一款有趣的电商快递界面动画设计

12个HTML5有趣的弹性变形动画信息提示框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：