CSS3+HTML5实现活塞运动

HTML5&CSS3 Alan 10年前 (2014-07-31) 4051次浏览 0个评论 扫描二维码

Html5配合CSS3已经越来越强大,以下通过CSS3+HTML5来模拟活塞运动。

首先设置背景颜色,这里仅测试了IE,Firefox和Chrome较新的版本,使用webkit也是为了兼容Chrome考虑:

background: -webkit-linear-gradient(top, coral, tomato);
background: linear-gradient(to bottom, coral, tomato);

通过代码定义活塞上下移动以及臂手(连动杆)左右摆动的动画:

@-webkit-keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@-webkit-keyframes arm {
0% { -webkit-transform: rotate(0); }
25% { -webkit-transform: rotate(-18deg); }
50% { -webkit-transform: rotate(0); }
75% { -webkit-transform: rotate(18deg); }
100% { -webkit-transform: rotate(0); }
}
@keyframes arm {
0% { transform: rotate(0); }
25% { transform: rotate(-18deg); }
50% { transform: rotate(0); }
75% { transform: rotate(18deg); }
100% { transform: rotate(0); }
}

应用上下移动活塞的动画:

-webkit-animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;
animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;

应用臂手左右摆的动画:

-webkit-transform-origin: center 10px;
-webkit-animation: arm 1.2s linear infinite;
transform-origin: center 10px;
animation: arm 1.2s linear infinite;

通过animation-delay来使五个活塞之前产生部分延时。

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址