CSS3 clip裁剪动画详解编程语言

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/18878.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论