CSS3代码写的变形金刚动画特效

发布时间:2024年01月24日

身体的各个部件要画出来

<div class="scene-jumper">
<div class="scene scene--optimus optimus">
<div class="scene-turner">
<div class="scene-roller">
<div class="optimus__core">
<div class="core core--upper">
<div class="optimus__torso">
<div class="optimus__top">
<div class="optimus__head">
<div class="optimus__head-door"></div>
<div class="optimus__helmet">
<div class="optimus__head-base"></div>
<div class="optimus__head-reactor">
<div class="optimus__head-twist">
<div class="optimus__neck">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__face">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__mouth">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__ear optimus__ear--left">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__ear optimus__ear--right">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__mohawk">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-top">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-back">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-side optimus__helmet-side--left">
<div class="optimus__helmet-side-guard">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>

代码太多了,直接去看预览和代码吧

源码下载??在线预览

文章来源:https://blog.csdn.net/u011626414/article/details/135816162
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。