关于CSS裁剪的动画效果

如何制作下图的裁剪动画？方法有两种。

关于CSS裁剪的动画效果

第一种，在鼠标移入时通过两个正方形移入缓慢的将图行覆盖到剪裁的目的。如下图所示。

关于CSS裁剪的动画效果

起初两个正方形是在图形外面的，我们可以在图形这加上overflow: hidden;将正方形隐藏。

第二种方法。

clip 属性剪裁绝对定位元素，可以实现自身裁剪。

关于CSS裁剪的动画效果

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.zz {
	overflow: hidden;
	display: inline-block;
	text-align: center;
	position: relative;
	top: 50%;
	left: 50%;
}

.zz .cr {
	display: block;
	position: absolute;
	width: 128px;
	height: 128px;
	left: 50%;
	margin-left: -64px;
	background: url(img/words.png) no-repeat 0px -624px;
	transition: all .5s ease-in-out 0s;
	text-decoration: underline;
	clip: rect(0px, 128px, -10px, 64px);
}

.zz:hover .cr {
	clip: rect(0px, 128px, 128px, 64px);
}

.zz .cl {
	display: block;
	position: absolute;
	width: 128px;
	height: 128px;
	left: 50%;
	margin-left: -64px;
	background: url(img/words.png) no-repeat 0px -624px;
	transition: all .5s ease-in-out 0s;
	text-decoration: underline;
	clip: rect(128px, 64px, 128px, 0px);
}

.zz:hover .cl {
	clip: rect(0px, 64px, 128px, 0px);
}

.zz i {
	display: block;
	position: relative;
	margin: 0 auto;
	margin-top: 28px;
	height: 70px;
	margin-bottom: 50px;
}

.zz i:nth-of-type(1) {
	width: 54px;
	background: url(img/words.png) no-repeat -144px -632px;
}
		</style>
	</head>
<body>
<div class="col-md-2 col-xs-6 col-sm-4 zz">
  	<u class="cl"></u>
  	<u class="cr"></u>
  	<i></i>
  	<strong class="Animation7 animated">微信营销</strong>
  	<p class="Animation7 animated">公众账号 / 微网站<br>微盟 ( 微社区 )</p>
  </div>
</body>
</html>

欢迎各位补充~