使用clip属性实现动画效果_clip设置动画-优快云博客

本文链接：https://blog.youkuaiyun.com/longtian1213/article/details/8996979

用过jquery的人可能会知道，jquery有个动画效果，可以让元素实现淡入淡出效果，其实简单的使用css的clip属性，自己也可以实现这个效果，做个小DEMO玩玩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<meta charset="utf-8" />  
  <style>
  	
 	div{
 		background-color: red;
 		width:100px;
 		height:100px;
 		position:absolute;
 		clip:rect(0px 0px 0px 0px)
 	}
  </style>
</head>  
<body>  
<div id="test"></div>
</body>  
<script type="text/javascript">
	window.onload = function(){
		var test = document.getElementById("test");
		if(test){
			var t = 0
			var w = test.offsetWidth;
			var h = test.offsetHeight;
			var s = setInterval(function(){
				 test.style.clip = "rect(0px "+ t +"px "+ t + "px 0px)";
				 t = t +  1;
				 if(t > w){
				 	clearInterval(s);
				 }
			},100);
		} 
	}
</script>
</html>

注意一点，clip只对position:absolute;的元素有效，所以如果想在项目中实际使用，需要自己做好元素的布局。