css3属性绘制剪刀剪断纸片元素动画特效。
使用方法
1、head引入css文件
<link rel="stylesheet" href="css/style.css">2、body引入HTML代码
<div class="area"> <div class="scissors-position"> <div class="scissors"> <div class="scissors__r"> <div class="rotate"> <div class="spike"></div> <div class="razor"></div> <div class="cable"> <div class="cable__base"></div> <div class="cable__finger"></div> </div> </div> </div> <div class="scissors__l"> <div class="rotate"> <div class="razor"></div> <div class="cable"> <div class="cable__base"></div> <div class="cable__finger"></div> </div> </div> </div> </div> </div> <div class="trail"> <div class="trail-rotate"> <div class="trail-trace"> </div> </div> </div> <div class="paper"> <div class="paper-rotate"> <div class="paper-balance"> <div class="paper__p1"></div> <div class="paper__p2"></div> </div> </div> </div> <div class="scissors-shadow-position"> <div class="shadow"></div> </div> <div class="p1-shadow-position"> <div class="shadow p1-shadow"></div> </div> <div class="p2-shadow-position"> <div class="shadow p2-shadow"></div> </div> </div>