一款纯CSS小猫在弦上摇摆的动画特效,小猫抓着弦左右来回的摆动,摆动的幅度有一定的大小变化,整个过程一直无线循环着。
页面的head部分,需引入页面的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css"/>
页面的body部分,通过多个div容器来分别显示猫不同的身体部位,代码如下:
<div class="all-wrap">
<div class="all">
<div class="yarn"></div>
<div class="cat-wrap">
<div class="cat">
<div class="cat-upper">
<div class="cat-leg"></div>
<div class="cat-leg"></div>
<div class="cat-head">
<div class="cat-ears">
<div class="cat-ear"></div>
<div class="cat-ear"></div>
</div>
<div class="cat-face">
<div class="cat-eyes"></div>
<div class="cat-mouth"></div>
<div class="cat-whiskers"></div>
</div>
</div>
</div>
<div class="cat-lower-wrap">
<div class="cat-lower">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-paw"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-leg">
<div class="cat-paw"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail">
<div class="cat-tail -end"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791