HTML+CSS教程（十一）补充css中clip:rect用法

css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果.

top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的数值都表示位置,且是相对于原始元素的左上角而言的.
经典案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				position: relative;
				background-color: #0f222b;
			}
			.div1{
				width: 200px;
				height: 200px;
				margin: 100px auto;
				background: url(img/Button-White-Large.png) no-repeat 50%/70% rgba(0,0,0,0.1);
				color: #69ca62;
				box-shadow: inset 0 0 0 1px rgba(105,202,98,0.5); 
			}
			.div1,.div1::before,.div1::after{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;	
			}
			.div1::before,.div1::after{
				content: '';
				z-index: -1;
				margin: -5%;
				box-shadow: inset 0 0 0 2px;
				animation: clipm 8s linear infinite;
			}
			.div1::before{
				animation-delay: -4s;
			}
			.div1:hover::after,.div1:hover::before{
				background-color: rgba(255,0,0,0.3);
			}
			@keyframes clipm{
				0%{
					clip: rect(0px,220.0px,2px,0px);/*裁剪*/
				}
				25%{
					clip: rect(0px,2px,220.0px,0px);
				}
				50%{
					clip: rect(218.0px,220.0px,220.0px,0px);
				}
				75%{
					clip: rect(0px,220.0px,220.0px,218.0px);
				}
				100%{
					clip: rect(0px,220.0px,2px,0px);
				}
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
	</body>
</html>

posted on 2018-12-04 11:22 豆皮没有豆阅读(293) 评论(0) 收藏举报