动画悬停和调整视频大小的关键帧不起作用并给我一个单独的关键帧?

问题描述 投票:0回答:2

我需要知道为什么当我设置关键帧时我的视频没有调整大小以及为什么它给我一个单独的关键帧彩色框。在我的回答中,我已经将视频放在 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>

html video resize keyframe
2个回答
0
投票

看起来您的视频不在您将 @keyframe 动画归因于的 div 中, 复制视频元素,然后将其粘贴到您的 div 中,这样就可以了


0
投票

你能说得更具体吗?

© www.soinside.com 2019 - 2024. All rights reserved.