我想做一个小的设计部分：一个静音的视频，当鼠标经过它时，它会放大，但它仍然是一样的大小，因为它是在页边空白处剪辑的。将视频放大到鼠标光标所在的位置会更漂亮。
预期结果：视频放大并在页边空白处进行剪辑。视频在其中心中点放大。
实际结果：我无法实现这个设计，因为：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>
scs
.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);
}
}
}
谢谢。
您想要剪切。可以使用剪辑选项来遮罩图元中的显示区域。
在您的div中，创建一个矩形来定义"；观看区域"；(值采用px格式(。
<div class="video container" style="clip: rect(X-Pos, Width, Height, Y-Pos);">
下面是我的示例代码，您可以通过测试来获得解决方案的一些想法。容器CCD_ 2具有用于实现缩放效果的CCD_。视频大小增加了，但仅在矩形的边距内可见(就像窗口一样(。
<!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);
}
}
}
}