【CSS案例】clip-path案例技巧

【CSS案例】clip-path案例技巧

圆形裁剪

/** 半径 at 圆心坐标X 圆心坐标Y */
clip-path: circle(50% at 100% 100%);

矩形裁剪

/** 类似于padding，参数方向：↑ → ↓ ← */
clip-path: inset(10% 20% 30% 40%);

椭圆裁剪

/** 长轴(X方向) 短轴(Y方向) at 圆心坐标X 圆心坐标Y */
clip-path: ellipse(50% 25% at 50% 50%);

不规则裁剪

不规则形状裁剪

缩放效果

img {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	transition: .5s;
}
img:hover {
	clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
}

眨眼效果

img {
	clip-path: ellipse(50% 20% at 50% 50%);
	transition: .5s;
	animation: wink 3s infinite;
}
@keyframes wink {
	15% {
		clip-path: ellipse(50% 1% at 50% 50%);
	}
	30% {
		clip-path: ellipse(50% 20% at 50% 50%);
	}
	45% {
		clip-path: ellipse(50% 1% at 50% 50%);
	}
	70% {
		clip-path: ellipse(50% 40% at 50% 50%);
	}
}

滑出效果

<div class="container">
	<h1>Hello World!</h1>
</div>

.container h1 {
	color: #fff;
	font-size: 5em;
	animation: slideDown 2s infinite;
}
@keyframes slideDown {
	from {
		clip-path: inset(100% 0% 0% 0%);
		transform: translateY(-100%);
	}
	to {
		clip-path: inset(0% 0% 0% 0%);
	}
}

箭头滑出效果

<div class="img-box">
	<img src="1.jpeg"/>
	<img src="2.jpeg"/>
</div>

.img-box img {
	position: absolute;
	transition: .8s;
}

.img-box img:nth-child(2) {
	clip-path: polygon(-30% 0, -30% 0, 0 50%, -30% 100%, -30% 100%);
}

.img-box:hover img:nth-child(2){
	clip-path: polygon(-30% 0, 100% 0, 110% 50%, 100% 100%, -30% 100%);
}

聚光灯文字效果

<h1>HOLLOWORLD</h1>

h1 {
	color: #292929;
	font-size: 112px;
	position: relative;
}
h1::after {
	content: "HOLLOWORLD";
	/** 透明颜色 */
	color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to right, #ff69b3, #fe0000, #ffa401, #ffff01, #008102, #40e1d2, #410098, #9400d4);
	/** 以文字范围裁剪背景图片 */
	background-clip: text;
	clip-path: circle(100px at 0% 50%);
	animation: light 5s infinite;
}
@keyframes light {
	0% {
		clip-path: circle(100px at 0% 50%);
	}
	50% {
		clip-path: circle(100px at 100% 50%);
	}
	100% {
		clip-path: circle(100px at 0% 50%);
	}
}