Deadline – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Project Deadline - SVG animation with CSS3</title>  <style type="text/css"> /* Svg Projects Author: Jonathan Trancozo Author_url: portfolio.jonathansilva.com.br/ Social_networks: { facebook: fb/jonathan.silva.web, twitter: @jsilva_web } Language: HTML, CSS3 and SVG Project_version: V1 Project_description: [pt-br] Por anos eu vi essa imagem e pensava “Isso ficaria bem massa animado” e hoje consegui expressar um pouco da minha imaginação. O desenho foi produzido no Adobe Illustrator e exportado em SVG. As animações foram feitas com CSS3 usando principalmente [transform]. Até uma próxima. [en] For years I saw this picture and thought "That would be amazing animated " and today I managed to express some of my imagination. The design was produced in Adobe Illustrator and export in SVG . The animations were made with CSS3 using mainly [ transform ]. See you. */ 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 { animation-name: progress-fill; animation-timing-function: linear; animation-iteration-count: infinite; } /* Death */ #death-group { animation-name: walk; animation-timing-function: ease; animation-iteration-count: infinite; transform: translateX(0); } #death-arm { animation: move-arm 3s ease infinite; transform-origin: left center; } #death-tool { animation: move-tool 3s ease infinite; transform-origin: -48px center; } /* Designer */ #designer-arm-grop { animation: write 1.5s ease infinite; transform: translate(0, 0) rotate(0deg) scale(1, 1); 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; animation: text-red 20s ease infinite; z-index: 2; background: #000; } .mask-white { right: 0; } /* Flames */ #red-flame { opacity: 0; animation: show-flames 20s ease infinite, red-flame 120ms ease infinite; transform-origin: center bottom; } #yellow-flame { opacity: 0; animation: show-flames 20s ease infinite, yellow-flame 120ms ease infinite; transform-origin: center bottom; } #white-flame { opacity: 0; animation: show-flames 20s ease infinite, red-flame 100ms ease infinite; transform-origin: center bottom; } @keyframes progress-fill { 0% { x: -100%; } 100% { x: -3%; } } @keyframes walk { 0% { transform: translateX(0); } 6% { transform: translateX(0); } 10% { transform: translateX(100px); }, 15% { transform: translateX(140px); } 25% { transform: translateX(170px); } 35% { transform: translateX(220px); } 45% { transform: translateX(280px); } 55% { transform: translateX(340px); } 65% { transform: translateX(370px); } 75% { transform: translateX(430px); } 85% { transform: translateX(460px); } 100% { transform: translateX(520px); } } @keyframes move-arm { 0% { transform: rotate(0); } 5% { transform: rotate(0); } 9% { transform: rotate(40deg); } 80% { transform: rotate(0); } } @keyframes move-tool { 0% { transform: rotate(0); } 5% { transform: rotate(0); } 9% { transform: rotate(50deg); } 80% { transform: rotate(0); } } /* Design animations */ @keyframes write { 0% { transform: translate(0, 0) rotate(0deg) scale(1, 1); } 16% { transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1); } 32% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); } 48% { transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1); } 65% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); } 83% { transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1); } } @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); } } */ @keyframes show-flames { 0% { opacity: 0; } 74% { opacity: 0; } 80% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes red-flame { 0% { transform: translateY(-30px) scale(1, 1); } 25% { transform: translateY(-30px) scale(1.1, 1.1); } 75% { transform: translateY(-30px) scale(0.8, 0.7); } 100% { transform: translateY(-30px) scale(1, 1); } } @keyframes yellow-flame { 0% { transform: translateY(-30px) scale(0.8, 0.7); } 50% { transform: translateY(-30px) scale(1.1, 1.2); } 100% { transform: translateY(-30px) scale(1, 1); } } </style> </head> <body> <div id="deadline"> <svg preserveAspectRatio="none" id="line" viewBox="0 0 581 158" enable-background="new 0 0 581 158"> <g id="fire"> <rect id="mask-fire-black" x="511" y="41" width="38" height="34"/> <g> <defs> <rect id="mask_fire" x="511" y="41" width="38" height="34"/> </defs> <clipPath id="mask-fire_1_"> <use xlink:href="#mask_fire" overflow="visible"/> </clipPath> <g id="group-fire" clip-path="url(#mask-fire_1_)"> <path id="red-flame" fill="#B71342" d="M528.377,100.291c6.207,0,10.947-3.272,10.834-8.576 c-0.112-5.305-2.934-8.803-8.237-10.383c-5.306-1.581-3.838-7.9-0.79-9.707c-7.337,2.032-7.581,5.891-7.11,8.238 c0.789,3.951,7.56,4.402,5.077,9.48c-2.482,5.079-8.012,1.129-6.319-2.257c-2.843,2.233-4.78,6.681-2.259,9.703 C521.256,98.809,524.175,100.291,528.377,100.291z"/> <path id="yellow-flame" opacity="0.71" fill="#F7B523" d="M528.837,100.291c4.197,0,5.108-1.854,5.974-5.417 c0.902-3.724-1.129-6.207-5.305-9.931c-2.396-2.137-1.581-4.176-0.565-6.32c-4.401,1.918-3.384,5.304-2.482,6.658 c1.511,2.267,2.099,2.364,0.42,5.8c-1.679,3.435-5.42,0.764-4.275-1.527c-1.921,1.512-2.373,4.04-1.528,6.563 C522.057,99.051,525.994,100.291,528.837,100.291z"/> <path id="white-flame" opacity="0.81" fill="#FFFFFF" d="M529.461,100.291c-2.364,0-4.174-1.322-4.129-3.469 c0.04-2.145,1.117-3.56,3.141-4.198c2.022-0.638,1.463-3.195,0.302-3.925c2.798,0.821,2.89,2.382,2.711,3.332 c-0.301,1.597-2.883,1.779-1.938,3.834c0.912,1.975,3.286,0.938,2.409-0.913c1.086,0.903,1.826,2.701,0.864,3.924 C532.18,99.691,531.064,100.291,529.461,100.291z"/> </g> </g> </g> <g id="progress-trail"> <path fill="#FFFFFF" d="M491.979,83.878c1.215-0.73-0.62-5.404-3.229-11.044c-2.583-5.584-5.034-10.066-7.229-8.878 c-2.854,1.544-0.192,6.286,2.979,11.628C487.667,80.917,490.667,84.667,491.979,83.878z"/> <path fill="#FFFFFF" d="M571,76v-5h-23.608c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125 c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333 s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17 c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17c0-2.762-2.238-5-5-5h-3V76H571z"/> <path fill="#FFFFFF" d="M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125 s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z"/> </g> <g> <defs> <path id="SVGID_1_" d="M484.5,75.584c-3.172-5.342-5.833-10.084-2.979-11.628c2.195-1.188,4.646,3.294,7.229,8.878 c2.609,5.64,4.444,10.313,3.229,11.044C490.667,84.667,487.667,80.917,484.5,75.584z M571,76v-5h-23.608 c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25 v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917 c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17 c0-2.762-2.238-5-5-5h-3V76H571z M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125 s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <rect id="progress-time-fill" x="-100%" y="34" clip-path="url(#SVGID_2_)" fill="#BE002A" width="586" height="103"/> </g> <g id="death-group"> <path id="death" fill="#BE002A" d="M-46.25,40.416c-5.42-0.281-8.349,3.17-13.25,3.918c-5.716,0.871-10.583-0.918-10.583-0.918 C-67.5,49-65.175,50.6-62.083,52c5.333,2.416,4.083,3.5,2.084,4.5c-16.5,4.833-15.417,27.917-15.417,27.917L-75.5,84.75 c-1,12.25-20.25,18.75-20.25,18.75s39.447,13.471,46.25-4.25c3.583-9.333-1.553-16.869-1.667-22.75 c-0.076-3.871,2.842-8.529,6.084-12.334c3.596-4.22,6.958-10.374,6.958-15.416C-38.125,43.186-39.833,40.75-46.25,40.416z M-40,51.959c-0.882,3.004-2.779,6.906-4.154,6.537s-0.939-4.32,0.112-7.704c0.82-2.64,2.672-5.96,3.959-5.583 C-39.005,45.523-39.073,48.8-40,51.959z"/> <path id="death-arm" fill="#BE002A" d="M-53.375,75.25c0,0,9.375,2.25,11.25,0.25s2.313-2.342,3.375-2.791 c1.083-0.459,4.375-1.75,4.292-4.75c-0.101-3.627,0.271-4.594,1.333-5.043c1.083-0.457,2.75-1.666,2.75-1.666 s0.708-0.291,0.5-0.875s-0.791-2.125-1.583-2.959c-0.792-0.832-2.375-1.874-2.917-1.332c-0.542,0.541-7.875,7.166-7.875,7.166 s-2.667,2.791-3.417,0.125S-49.833,61-49.833,61s-3.417,1.416-3.417,1.541s-1.25,5.834-1.25,5.834l-0.583,5.833L-53.375,75.25z"/> <path id="death-tool" fill="#BE002A" d="M-20.996,26.839l-42.819,91.475l1.812,0.848l38.342-81.909c0,0,8.833,2.643,12.412,7.414 c5,6.668,4.75,14.084,4.75,14.084s4.354-7.732,0.083-17.666C-10,32.75-19.647,28.676-19.647,28.676l0.463-0.988L-20.996,26.839z"/> </g> <path id="designer-body" fill="#FEFFFE" d="M514.75,100.334c0,0,1.25-16.834-6.75-16.5c-5.501,0.229-5.583,3-10.833,1.666 c-3.251-0.826-5.084-15.75-0.834-22c4.948-7.277,12.086-9.266,13.334-7.833c2.25,2.583-2,10.833-4.5,14.167 c-2.5,3.333-1.833,10.416,0.5,9.916s8.026-0.141,10,2.25c3.166,3.834,4.916,17.667,4.916,17.667l0.917,2.5l-4,0.167L514.75,100.334z "/> <circle id="designer-head" fill="#FEFFFE" cx="516.083" cy="53.25" r="6.083"/> <g id="designer-arm-grop"> <path id="designer-arm" fill="#FEFFFE" d="M505.875,64.875c0,0,5.875,7.5,13.042,6.791c6.419-0.635,11.833-2.791,13.458-4.041s2-3.5,0.25-3.875 s-11.375,5.125-16,3.25c-5.963-2.418-8.25-7.625-8.25-7.625l-2,1.125L505.875,64.875z"/> <path id="designer-pen" fill="#FEFFFE" d="M525.75,59.084c0,0-0.423-0.262-0.969,0.088c-0.586,0.375-0.547,0.891-0.547,0.891l7.172,8.984l1.261,0.453 l-0.104-1.328L525.75,59.084z"/> </g> </svg> <div class="deadline-days"> Deadline <span class="day">7</span> <span class="days">days</span> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> // 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); }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Deadline