煮咖啡的动态页面演示动画
http://www.html5tricks.com/demo/html5-coffee-maker-animation/index.html
?
這樣的效果是我看html5網(wǎng)站的時(shí)候看到的，動(dòng)畫效果賊好！但是并非是gif的動(dòng)畫，只是利用代碼做出來(lái)的。下面請(qǐng)看代碼。
?
?
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
頁(yè)面部分
?
<!DOCTYPE html> <html>
<head>
? <meta charset="UTF-8">
? <title>純CSS3實(shí)現(xiàn)咖啡制作全過(guò)程動(dòng)畫特效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
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/aphidic/p/3718723.html
總結(jié)
以上是生活随笔為你收集整理的煮咖啡的动态页面演示动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 解决SVN文件夹上边没有对号感叹号等符号
- 下一篇： 万向节死锁的简易理解