经验分享程序开发文档资料数据资源其它资源

CSS3咖啡制作全过程动画css代码.

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3咖啡制作全过程动画css代码. 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3咖啡制作全过程动画css代码.

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3咖啡制作全过程动画</title>
    <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>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

// Inspired by:http://vimeo.com/49982094

CSS代码(style.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;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
4.04 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
4.04 KB
立即下载
张丹梅娟
了解
打赏作者 鼓励作者
Html 动画效果3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章