CSS中一些样式

error0318

于 2019-05-03 11:21:48 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/error311/article/details/89785993

前端专栏收录该内容

10 篇文章

订阅专栏

博客内容包含图片裁剪操作，之后有4秒等待时间，还涉及动画以及使用transform进行旋转的相关内容，均与信息技术领域的图像处理和动画效果有关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 旋转