CSS3 clip裁剪动画
下面是比较简单的例子
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 120px 151px 0px);
animation: clipMe 5s linear infinite;
}
@-webkit-keyframes clipMe {
0% {
}
100% {
clip:rect(0px 0px 151px 0px);
}
}
</style>
</head><body>
<p>clip 属性剪切了一幅图像:</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body></html>
如果clip属性不理解的看下面1张图 秒懂!!
<img src=”http://newmiracle.cn/wp-content/uploads/2016/11/QQ截图20161105144011-300×167.jpg” alt=”qq%e6%88%aa%e5%9b%be20161105144011″ width=”300″ height=”167″ class=”alignnone size-medium wp-image-390″ />
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/18878.html