问题描述
我想做一些设计方面的事情:静音播放的视频,当鼠标移到它上面时,它会放大,但是它的大小仍然相同,因为它被限制在边缘。使视频放大到鼠标光标悬停在它上面的位置会更加美丽。
预期结果:视频放大并被边缘裁剪。视频在其中心中点放大。
实际结果:我无法实现此设计,因为:: after伪元素似乎不适用于视频标签。没有JS,我无法获得div来拥有视频的大小。但是至少将鼠标悬停在自动播放上,并且正常的放大(缩放转换)效果很好。 (没有错误消息。)
有没有这样做的JS库?
HTML
<div class="video container">
<!-- <div class="single video container"> -->
<video src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" muted loop></video>
<!-- </div> -->
</div>
SCSS
.video.container {
grid-row: 1/2;
grid-column: 1/2;
display: flex;
video {
width: 38vh;
height: 30vh;
position: relative;
left: 15vw;
top: 15vh;
transition: transform 0.2s;
overflow: hidden;
&:hover {
transform: scale(1.2);
}
}
}
谢谢。
解决方法
您要剪切。您可以使用clip选项来遮罩元素中的显示区域。
在您的div中,创建一个矩形来定义内容的“查看区域”(值采用px
格式)。
<div class="video container" style="clip: rect(X-Pos,Width,Height,Y-Pos);">
下面是我的示例代码,您可以对其进行测试以获得一些解决方案的想法。容器<div>
具有onMouseOver="do_VidZoom()"
来执行缩放效果。视频大小增加了,但仅在矩形的边缘内可见(如窗口)。
<!DOCTYPE html>
<html>
<body>
<div class="video container" onMouseOver="do_VidZoom()" width="640" height="480" style="position: absolute; top: 0px; left: 0px; clip: rect(0px,640px,300px,0px);">
<video id="vid" width="640" height="480" muted loop>
<source src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" type="video/mp4">
</video>
</div>
</body>
<script>
function do_VidZoom ()
{
//# setup animation keyframes : from scaleX/Y = 1 (normal size) up to scaleX/Y = 2 (double size)
var frames_VidZoom_In = [
{ transform: 'scale(1,1)',transition: 'transform 0.1s' },{ transform: 'scale(2,2)',transition: 'transform 0.1s' }
];
//# apply animation to an element
document.getElementById("vid").animate( frames_VidZoom_In,{ duration: 3000,easing: 'ease-in' } );
//# set final size after animation ends ( or else it jumps back to scale=1 )
document.getElementById("vid").style.transform = "scale(2,2)";
}
</script>
</html>
,
我取得了一些不完美的成就,但目前对我来说已经足够了。问题在于视频处于cover
模式,因此视频元素无法显示其全部内容,但是视觉效果是相似的。
<div class="videos">
<div class="video">
<video src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" muted loop></video>
</div>
</div>
以及正在运行的SCSS:
.videos {
grid-row: 1/2;
grid-column: 1/2;
.video {
position: relative;
left: 15vw;
top: 20vh;
width: 38vh;
height: 30vh;
overflow: hidden;
video {
width: 38vh;
height: 30vh;
object-fit: cover;
transition: transform 0.2s;
&:hover {
transform: scale(1.2);
}
}
}
}