问题描述
我需要知道为什么在我设置关键帧时我的视频没有调整大小,以及为什么它给了我一个单独的关键帧彩色框。在我的回答中,我已经将视频放在 div 标签中,但现在如何通过关键帧调整视频大小?现在有人可以帮我吗?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<style>
div {width: 100px;
height: 100px;
background-color: rgb(109,53,149);
position: relative;
animation-name: resize;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-duration: 3s;
animation-direction: alternate;
}
div:hover {
animation-play-state: running;
animation-iteration-count: infinite;
}
@keyframes resize {0% {width: 260px; height: 260px; left:0px; top:0px;}
25% {width: 220px; height: 220px; left:100px; top:100px;}
50% {width: 180px; height: 180px; left:180px; top:180px;}
75% {width: 120px; height: 120px; left:270px; top:270px;}
100% {width: 50px; height: 50px; left:350px; top:350px;}
}
</style>
</head>
<body>
<div>
<video src="a1.mp4" controls autoplay width="300" height="300" loop muted playsinline>
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
解决方法
您的视频似乎不在您将 @keyframe 动画归因于的 div 内, 复制视频元素,然后将其粘贴到您的 div 中,这样就可以了