一款3D旋转的CSS艺术折纸动画,折纸以3D的方式进行旋转,而折纸上面的梯子也会有不同的形状变化和阴影效果。
页面的head部分,需引入页面的样式文件,主要用了CSS3的transform属性,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,需设置好折纸、梯子、阴影等的容器,代码如下:
<div id="trick_art">
<div class="paper">
<div class="slice top">
<div class="ladder_wrapper ladder_shadow">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
<div class="ladder_wrapper ladder_main">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
</div>
<div class="slice bottom">
<div class="ladder_wrapper ladder_shadow">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
<div class="ladder_wrapper ladder_main">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791