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

最新推荐文章于 2024-05-21 22:11:56 发布

喜欢前端

最新推荐文章于 2024-05-21 22:11:56 发布

阅读量387

点赞数 8

文章标签： css3 前端 html

本文链接：https://blog.csdn.net/u011626414/article/details/135816162

版权

身体的各个部件要画出来

<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>

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

源码下载在线预览