<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clip-path</title>
<style type="text/css">
video {
width: 100%;
height: 100vh;
display: block;
clip-path: circle(160px at 50% 50%);
animation: move 5s infinite;
object-fit: cover;
}
@keyframes move {
0%,
80% {
clip-path: circle(160px at 50% 50%);
}
20% {
clip-path: circle(160px at 20% 50%);
}
60% {
clip-path: circle(160px at 80% 50%);
}
100% {
clip-path: circle(100% at 50% 50%);
}
}
</style>
<script></script>
</head>
<body>
<video
muted
autoplay
controls
loop
src="https://zeekrlife-oss.oss-cn-hangzhou.aliyuncs.com/frontend/zeekrlife-official-pc/image/PromotionalVideo/video_1.mp4"
></video>
</body>
</html>
利用clip-path 做超炫酷的动画
最新推荐文章于 2024-03-30 13:24:31 发布