煮咖啡的动态页面演示动画
http://www.html5tricks.com/demo/html5-coffee-maker-animation/index.html
这样的效果是我看html5网站的时候看到的，动画效果贼好！但是并非是gif的动画，只是利用代码做出来的。下面请看代码。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
页面部分
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>纯CSS3实现咖啡制作全过程动画特效DEMO演示</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="animation-container">
<div class="coffee-bag-container"> <div class="coffee-bag"> <span class="mast"></span> <span class="bag-top"></span> <span class="bag-body"></span> <span class="logo"> <span class="bean bean-one"></span> <span class="bean bean-two"></span> </span> <span class="info info-one"></span> <span class="info info-two"></span> <span class="info info-three"></span> <span class="bag-bottom"></span>
</div><!-- ./coffee-bag --> </div><!-- ./coffee-bag-container --> <span class="grounds-container"> <span class="grounds grounds-one"></span> <span class="grounds grounds-two"></span> <span class="grounds grounds-three"></span> <span class="grounds grounds-four"></span> </span>
<div class="filter"></div><!-- ./filter -->
<!-- TODO: create coffee grounds falling from the bag into the filter -->
<span class="roasting-top"></span>
<div class="roasting-body"> <span class="handle-container"> <span class="handle-one"></span> <span class="handle-two"></span> </span> </div><!-- ./roasting-body -->
<!-- the black part between the coffee pot and the filter --> <span class="screen"></span>
<span class="water-attachment"></span>
<span class="water-lid"></span>
<span class="water-pot"> <span class="water-pot-gloss"></span> <span class="fill-line fill-line-first"></span> <span class="fill-line fill-line-last"></span> <span class="water"></span> </span>
<span class="warmer-plate"></span>
<span class="warmer"> <span class="warmer-accent accent-one"></span> <span class="warmer-accent accent-two"></span> <span class="warmer-accent accent-three"></span> </span>
<span class="warmer-base"></span>
<span class="coffee-pot-container">
<span class="coffee-pot-top"></span>
<span class="coffee-pot-glass-top"></span>
<span class="coffee-pot-glass-connector"></span>
<span class="coffee-pot-glass-base"> <span class="coffee-pot-gloss"></span> </span>
<span class="coffee-pot-handle-container"> <span class="handle-top"></span> <span class="handle-bottom"></span> </span>
<span class="coffee-drip"></span>
<span class="drip-cover"></span>
<span class="coffee"></span>
</span>
<span class="coffee-warmer-plate"></span>
<span class="coffee-base-left-end"></span>
<span class="coffee-maker-base"></span>
<span class="control-panel"> <span class="gauge-one"></span> <span class="gauge-two"></span> </span>
<span class="coffee-base-right-end"></span>
<span class="leg leg-one"></span>
<span class="leg leg-two"></span>
</div> <div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script> </div> <script src="js/index.js"></script>
</body>
</html>
--css------------------------------------------------------------------------------------------------------------------------------------------------------------------
.animation-container { background: #e2d4c2; height: 454px; margin: 0 auto; overflow: hidden; position: relative; width: 806px; }
span { display: block; }
.coffee-bag { height: 170px; left: 50%; position: absolute; top: 50%; width: 72px; -webkit-transform: translate(-50%, -50%) rotate(0); -webkit-transform-orign: top right; -webkit-animation: coffee-bag 2.5s 1 2s forwards; }
.mast { background: #73271f; height: 12px; position: absolute; width: 72px; z-index: 2; -webkit-transform: translate(806px, 0); -webkit-animation: coffee-bag-mast 1s 1 .5s forwards; }
.bag-top { border-radius: 8px 8px 0 0; background: #8e4542; height: 38px; position: absolute; width: 72px; z-index: 1; -webkit-transform: translate(-806px, 0); -webkit-animation: coffee-bag-top 1s 1 forwards; }
.bag-body { border-radius: 0 0 8px 8px; background: #73271f; height: 125px; width: 72px; z-index: 1; -webkit-transform: translate(-806px, 38px); -webkit-animation: coffee-bag-body 1s 1 forwards; }
.logo { border-radius: 50%; background: #af8757; height: 40px; position: absolute; width: 40px; z-index: 2; -webkit-transform: translate(15px, -75px) scale(0.25); -webkit-animation: coffee-logo 1s 1 forwards; } .logo .bean { border-radius: 20px; background: #4b2603; height: 8px; position: absolute; width: 20px; -webkit-transform: rotate(45deg) scale(0.25); -webkit-animation: bean-logo 1s 1 .5s forwards; } .logo .bean.bean-one { left: 3px; top: 16px; } .logo .bean.bean-two { left: 16px; top: 14px; }
.info { background: #d4a575; height: 10px; position: absolute; width: 54px; z-index: 2; } .info.info-one { -webkit-transform: translate(-806px, -25px); -webkit-animation: info-one 1s 1 .25s forwards; } .info.info-two { -webkit-transform: translate(-806px, -10px); -webkit-animation: info-two 1s 1 .5s forwards; } .info.info-three { -webkit-transform: translate(-806px, 5px); -webkit-animation: info-three 1s 1 .75s forwards; }
.bag-bottom { border-radius: 0 0 8px 8px; background: #4a0b10; bottom: 0; height: 12px; left: -806px; position: absolute; width: 72px; z-index: 2; -webkit-animation: coffee-bag-bottom .75s 1 forwards; }
.grounds-container { opacity: 0; position: absolute; -webkit-animation: grounds 1.25s 1 forwards 2.75s; }
.grounds { background: #4b0b09; height: 2px; width: 2px; z-index: 1; position: absolute; } .grounds:before, .grounds:after { background: #4b0b09; content: ''; display: block; height: 2px; width: 2px; position: absolute; } .grounds:before { top: 5px; left: 5px; } .grounds:after { bottom: 5px; right: 5px; }
.grounds-one { left: 10px; top: 10px; }
.grounds-two { left: 10px; top: 20px; }
.grounds-three { left: 10px; top: 30px; }
.grounds-four { left: 10px; top: 40px; }
.filter { background: #d1a978; border-radius: 0 0 10px 10px; height: 90px; position: relative; width: 100px; -webkit-transform: translate(400px, 550px); -webkit-animation: filter 2.5s 1 2s forwards; } .filter:after, .filter:before { border-radius: 50%; content: ''; display: block; left: 50%; position: absolute; } .filter:before { background: #d1a978; height: 35px; margin-left: -60px; top: -10px; width: 120px; z-index: 1; } .filter:after { background: #b18957; height: 20px; margin-left: -50px; top: -2px; width: 100px; z-index: 2; }
.roasting-top { background: #32262c; border-radius: 4px; height: 16px; position: relative; width: 125px; z-index: 2; -webkit-transform: translate(387px, -150px); -webkit-animation: roasting-top 2s 1 3s forwards; } .roasting-top:before { background: #32262c; border-radius: 4px; content: ''; display: block; height: 18px; position: absolute; top: -12px; width: 125px; }
.roasting-body { background: #1d1615; border-radius: 0 0 10px 10px; height: 90px; position: relative; width: 100px; -webkit-transform: translate(400px, 550px); -webkit-animation: roasting-body 2s 1 3s forwards; } .roasting-body:before, .roasting-body:after { content: ''; display: block; position: absolute; } .roasting-body:before { border-radius: 50%; left: 50%; background: #1d1615; height: 35px; margin-left: -60px; top: -10px; width: 120px; z-index: 1; } .roasting-body:after { background: #2f2827; border-radius: 0 0 10px 10px; bottom: 0; height: 20px; width: 100px; }
.handle-container { position: absolute; height: 48px; right: -25px; top: 23px; width: 26px; }
.handle-one { background: #1d1615; height: 17px; position: absolute; width: 26px; z-index: 1; }
.handle-two { background: #2f2827; height: 48px; position: absolute; right: 0; width: 8px; z-index: 2; }
.screen { background: #1d1615; border-radius: 4px; height: 12px; width: 164px; -webkit-transform: translate(-806px, -66px); -webkit-animation: screen 1.5s 1 4.25s forwards; }
.coffee-pot-top { background: #1c1616; border-radius: 6px; height: 16px; position: relative; width: 92px; z-index: 2; -webkit-transform: translate(806px, -303px); -webkit-animation: coffee-pot-top 1.5s 1 5s forwards; }
.coffee-pot-glass-top { background: #dfe3e6; border: 3px solid #f3f2f7; border-radius: 6px; height: 16px; width: 92px; -webkit-transform: translate(806px, -315px) skewX(25deg); -webkit-animation: glass-top 1.5s 1 4.25s forwards; }
.coffee-pot-glass-connector { background: #1c1616; border-radius: 6px; height: 7px; position: relative; width: 96px; z-index: 2; -webkit-transform: translate(806px, -313px); -webkit-animation: pot-connector 1.5s 1 5.25s forwards; }
.coffee-pot-glass-base { background: #dfe3e6; border: 3px solid #f3f2f7; border-radius: 6px; height: 66px; position: relative; width: 92px; -webkit-transform: translate(806px, -312px); -webkit-animation: glass-bottom 1.5s 1 4.5s forwards; }
.coffee-pot-gloss { background: #eff2f1; border-radius: 16px; height: 50px; left: 6px; position: absolute; top: 6px; width: 16px; z-index: 4; }
.coffee-pot-handle-container { height: 86px; position: relative; width: 52px; -webkit-transform: translate(806px, -411px); -webkit-animation: coffee-pot-handle 1.5s 1 5s forwards; }
.handle-top { background: #1d1614; border-radius: 10px 10px 0 10px; height: 26px; position: absolute; right: 0; top: 0; width: 48px; }
.handle-bottom { background: transparent; border: 4px solid #1d1614; bottom: 10px; height: 52px; position: absolute; right: 0; width: 20px; }
.water-attachment { background: #b3b2b4; border-radius: 4px; height: 12px; width: 110px; -webkit-transform: translate(-806px, -66px); -webkit-animation: water-attachment 1.5s 1 4.5s forwards; }
.water-lid { background: #130f10; border-radius: 4px; height: 12px; left: 13px; position: relative; width: 110px; -webkit-transform: translate(-806px, -201px); -webkit-animation: water-lid 1.5s 1 4.5s forwards; } .water-lid:before { background: #2f2828; border-radius: 6px 6px 0 0; content: ''; display: block; height: 14px; left: 12px; position: absolute; top: -14px; width: 85px; }
.water-pot { background: #eaeceb; border-radius: 4px; height: 64px; left: 13px; position: relative; width: 110px; -webkit-transform: translate(806px, -201px); -webkit-animation: water-pot 1.5s 1 4.75s forwards; } .water-pot:before { background: #2f2828; border-radius: 0 0 6px 6px; content: ''; display: block; height: 6px; left: 12px; position: absolute; top: 0; width: 85px; }
.fill-line { background: #1d1614; border-radius: 50%; height: 3px; left: 50%; margin-left: -11px; position: absolute; width: 22px; z-index: 3; } .fill-line:after { background: #1d1614; border-radius: 50%; content: ''; display: block; height: 3px; left: 50%; margin-left: -11px; position: absolute; top: 14px; width: 22px; }
.fill-line-first { top: 12px; }
.fill-line-last { top: 40px; }
.water { background: #0093be; border-radius: 0 0 4px 4px; bottom: 5px; height: 32px; left: 50%; margin-left: -50px; position: absolute; width: 100px; z-index: 1; -webkit-animation: water-fill 4s 1 8.25s forwards; }
.water-pot-gloss { background: rgba(255, 255, 255, 0.6); border-radius: 18px; height: 45px; left: 11px; position: absolute; top: 10px; width: 18px; z-index: 4; }
.warmer-plate { background: #191112; border-radius: 4px; height: 10px; width: 88px; -webkit-transform: translate(806px, -200px); -webkit-animation: warmer-plate 1.5s 1 4.5s forwards; }
.warmer { background: #9b9187; border-radius: 6px; height: 130px; position: relative; width: 94px; -webkit-transform: translate(806px, -200px); -webkit-animation: big-warmer 1.5s 1 5s forwards; }
.warmer-accent { background: #d5d4d5; border-radius: 24px; position: absolute; width: 24px; }
.accent-one { height: 86px; left: 10px; top: 6px; }
.accent-two { bottom: 6px; height: 24px; left: 10px; }
.accent-three { height: 120px; right: 10px; top: 6px; }
.warmer-base { background: #191112; border-radius: 4px; height: 10px; position: relative; width: 88px; -webkit-transform: translate(806px, -200px); -webkit-animation: warmer-base 1.5s 1 5s forwards; } .warmer-base:before { background: #191112; border-radius: 4px; bottom: -16px; content: ''; display: block; height: 22px; left: 0; position: absolute; width: 88px; }
.coffee-warmer-plate { background: #191112; border-radius: 4px; height: 10px; width: 94px; -webkit-transform: translate(-806px, -397px); -webkit-animation: coffee-warmer-plate 1.5s 1 4s forwards; }
.coffee-base-left-end, .coffee-base-right-end { background: #1c1512; height: 34px; position: relative; width: 16px; z-index: 3; }
.coffee-base-left-end { border-radius: 10px 0 0 10px; -webkit-transform: translate(806px, -397px); -webkit-animation: base-left 1.5s 1 5.5s forwards; }
.coffee-base-right-end { border-radius: 0 10px 10px 0; -webkit-transform: translate(806px, -487px); -webkit-animation: base-right 1.5s 1 5.5s forwards; }
.coffee-maker-base { background: #97938d; border-radius: 10px; height: 34px; position: relative; width: 344px; z-index: 2; -webkit-transform: translate(806px, -431px); -webkit-animation: coffee-base 1.5s 1 5.5s forwards; }
.control-panel { background: #d4d4d4; border-radius: 15px; height: 22px; position: relative; width: 283px; z-index: 3; -webkit-transform: translate(806px, -459px); -webkit-animation: control-panel 1.5s 1 5.75s forwards; } .control-panel span { background: #2a2225; border-radius: 4px; height: 14px; position: relative; width: 28px; } .control-panel span:after { border-radius: 8px; content: ''; display: block; height: 8px; margin-top: -4px; position: absolute; top: 50%; width: 8px; }
.gauge-one { -webkit-transform: translate(15px, 4px); } .gauge-one:after { background: #4ac861; left: 4px; }
.gauge-two { -webkit-transform: translate(55px, -10px); } .gauge-two:after { background: #f00; right: 4px; -webkit-animation: ready .75s 1 7.5s forwards; }
.leg { background: #1b1317; border-radius: 4px; height: 20px; position: relative; width: 20px; z-index: 1; }
.leg-one { -webkit-transform: translate(806px, -498px); -webkit-animation: leg-one 1.5s 1 6s forwards; }
.leg-two { -webkit-transform: translate(806px, -518px); -webkit-animation: leg-two 1.5s 1 6s forwards; }
.coffee-drip { background: #38271d; height: 0; left: 450px; position: absolute; top: 159px; width: 5px; z-index: 1; -webkit-animation: drip 1.25s 1 8.5s forwards; }
.drip-cover { background: #dfe3e6; height: 0; left: 450px; position: absolute; top: 159px; width: 5px; z-index: 1; -webkit-animation: drip 2.5s 1 10s forwards; }
.coffee { background: #38271d; border-radius: 0 0 6px 6px; bottom: 202px; left: 404px; height: 0; position: absolute; width: 99px; z-index: 3; -webkit-animation: coffee 3.5s 1 9.25s forwards; }
@-webkit-keyframes
coffee-bag-mast { 0% { -webkit-transform: translate(806px, 0); }
100% { -webkit-transform: translate(0, 0); } } @-webkit-keyframes coffee-bag-top { 0% { -webkit-transform: translate(-806px, 0); }
100% { -webkit-transform: translate(0, 0); } } @-webkit-keyframes info-one { 0% { -webkit-transform: translate(-806px, -25px); }
100% { -webkit-transform: translate(8px, -25px); } } @-webkit-keyframes info-two { 0% { -webkit-transform: translate(-806px, -10px); }
100% { -webkit-transform: translate(8px, -10px); } } @-webkit-keyframes info-three { 0% { -webkit-transform: translate(-806px, 5px); }
100% { -webkit-transform: translate(8px, 5px); } } @-webkit-keyframes coffee-bag-body { 0% { -webkit-transform: translate(806px, 38px); }
100% { -webkit-transform: translate(0, 38px); } } @-webkit-keyframes coffee-bag-bottom { 0% { left: -806px; }
100% { left: 0; } } @-webkit-keyframes coffee-logo { 0% { -webkit-transform: translate(15px, -75px) scale(0.25); }
100% { -webkit-transform: translate(15px, -75px) scale(1); } } @-webkit-keyframes bean-logo { 0% { -webkit-transform: rotate(45deg) scale(0.25); }
100% { -webkit-transform: rotate(45deg) scale(1); } } @-webkit-keyframes coffee-bag { 0% { -webkit-transform: translate(-50%, -50%) rotate(0); }
50% { -webkit-transform: translate(180%, -100%) rotate(-95deg); }
100% { -webkit-transform: translate(806px, -100%); } } @-webkit-keyframes coffee-bag-exit { 100% { -webkit-transform: translate(860px, -100%); } } @-webkit-keyframes filter { 0% { -webkit-transform: translate(400px, 550px); }
50% { -webkit-transform: translate(400px, 250px); }
100% { -webkit-transform: translate(400px, 40px); } } @-webkit-keyframes roasting-body { 0% { -webkit-transform: translate(400px, 550px); }
100% { -webkit-transform: translate(400px, -65px); } } @-webkit-keyframes roasting-top { 0% { -webkit-transform: translate(387px, -150px); }
100% { -webkit-transform: translate(387px, -48px); } } @-webkit-keyframes screen { 0% { -webkit-transform: translate(806px, -66px); }
100% { -webkit-transform: translate(355px, -66px); } } @-webkit-keyframes water-attachment { 0% { -webkit-transform: translate(806px, -190px); }
100% { -webkit-transform: translate(340px, -190px); } } @-webkit-keyframes water-lid { 0% { -webkit-transform: translate(-806px, -201px); }
100% { -webkit-transform: translate(234px, -201px); } } @-webkit-keyframes glass-top { 0% { -webkit-transform: translate(806px, -315px) skewX(25deg); }
100% { -webkit-transform: translate(397px, -315px) skewX(25deg); } } @-webkit-keyframes glass-bottom { 0% { -webkit-transform: translate(806px, -312px); }
100% { -webkit-transform: translate(404px, -312px); } } @-webkit-keyframes coffee-warmer-plate { 0% { -webkit-transform: translate(-806px, -397px); }
100% { -webkit-transform: translate(407px, -397px); } } @-webkit-keyframes water-pot { 0% { -webkit-transform: translate(806px, -201px); }
100% { -webkit-transform: translate(233px, -201px); } } @-webkit-keyframes warmer-plate { 0% { -webkit-transform: translate(806px, -200px); }
100% { -webkit-transform: translate(258px, -200px); } } @-webkit-keyframes big-warmer { 0% { -webkit-transform: translate(806px, -200px); }
100% { -webkit-transform: translate(255px, -200px); } } @-webkit-keyframes warmer-base { 0% { -webkit-transform: translate(-806px, -200px); }
100% { -webkit-transform: translate(258px, -200px); } } @-webkit-keyframes coffee-pot-top { 0% { -webkit-transform: translate(-806px, -503px); }
100% { -webkit-transform: translate(408px, -303px); } } @-webkit-keyframes coffee-pot-handle { 0% { -webkit-transform: translate(-806px, 703px); }
100% { -webkit-transform: translate(479px, -411px); } } @-webkit-keyframes pot-connector { 0% { -webkit-transform: translate(806px, 403px); }
100% { -webkit-transform: translate(404px, -313px); } } @-webkit-keyframes base-left { 0% { -webkit-transform: translate(806px, 703px); }
100% { -webkit-transform: translate(218px, -397px); } } @-webkit-keyframes base-right { 0% { -webkit-transform: translate(-806px, 703px); }
100% { -webkit-transform: translate(546px, -487px); } } @-webkit-keyframes coffee-base { 0% { -webkit-transform: translate(806px, 903px); }
100% { -webkit-transform: translate(218px, -431px); } } @-webkit-keyframes control-panel { 0% { -webkit-transform: translate(-806px, -459px); }
100% { -webkit-transform: translate(246px, -459px); } } @-webkit-keyframes leg-one { 0% { -webkit-transform: translate(-806px, -800px); }
100% { -webkit-transform: translate(248px, -498px); } } @-webkit-keyframes leg-two { 0% { -webkit-transform: translate(-806px, -800px); }
100% { -webkit-transform: translate(508px, -518px); } } @-webkit-keyframes water-fill { 0% { height: 32px; }
100% { height: 0; } } @-webkit-keyframes drip { 0% { height: 0; }
100% { height: 93px; } } @-webkit-keyframes coffee { 0% { height: 0; }
100% { height: 26px; } } @-webkit-keyframes ready { 0% { background: #f00; }
100% { background: #4ac861; } } @-webkit-keyframes grounds { 0% { opacity: 0; left: 450px; top: 110px; }
10% { opacity: 1; }
100% { left: 440px; top: 170px; opacity: 0; } }
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Inspired by: 艾菲迪克 http://www.aphidic.com
浙公网安备 33010602011771号