<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clip {
width: 321px;
height: 361px;
animation: clip 1s linear;
}
@keyframes clip {
0% {
clip-path: polygon(0 0, 35% 0, 0 68%, 0 67%);
}
10% {
clip-path: polygon(0 0, 35% 0, 0 99%, 0% 100%);
}
30% {
clip-path: polygon(0 0, 75% 0, 34% 100%, 0 100%);
}
50% {
clip-path: polygon(0 0, 100% 0, 51% 100%, 0 100%);
}
70% {
clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
</style>
</head>
<body>
<div class="clip">
<img src="https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg" alt="">
</div>
</body>
</html>
css3图片从左到右裁剪显示动画
最新推荐文章于 2024-03-01 15:16:01 发布