CSS中一些样式

1.裁剪图片

clip: rect(0px, 230px, 2px, 0px);

2.等待-4秒

animation-delay: -4s; 

3.动画

.box::before, .box::after{
	content: '';
	border: 2px solid #2ecc71;
	position: absolute;
	margin: -15px;
	animation: borderClip 8s linear infinite;
}
@keyframes borderClip {
	0%, 100%{
		clip: rect(0px, 230px, 2px, 0px);
	}
	25% {
		clip: rect(0px, 2px, 230px, 0px);
	}
	50% {
		clip: rect(228px, 230px, 230px, 0px);
	}
	75% {
		clip: rect(0px, 230px, 230px, 228px);
	}
}

4.transform 旋转

transform: translate(-50%, -50%); 2D

猜你喜欢

转载自blog.csdn.net/error311/article/details/89785993
今日推荐