视频扔洞里的实现方法

马黑黑

假装这里是一张图片

假装这里是视频

马黑黑

代码：

1. <style>
   
2. .mama {
   
3.         margin: auto;
   
4.         width: 740px;
   
5.         height: 520px;
   
6.         position: relative;
   
7. }
   
8. .pic {
   
9.         position: absolute;
   
10.         width: 100%;
    
11.         height: 100%;
    
12.         background: linear-gradient(to right, olive, lightgreen, pink);
    
13. }
    
14. .mtv {
    
15.         position: absolute;
    
16.         width: 50%;
    
17.         height: 100%;
    
18.         left: 40%;
    
19.         background: tan;
    
20.         text-align: center;
    
21.         line-height: 500px;
    
22.         clip-path: circle(35%);
    
23. }
    
24. </style>
    
25. 
    
26. <div class="mama">
    
27.         <div class="pic">假装这里是一张图片</div>
    
28.         <div class="mtv">假装这里是视频</div>
    
29. </div>

复制代码

马黑黑

实际上，视频并没有扔洞里，而是定位在“图片”之上的相应位置，然后剪裁它成为圆形（也可以是椭圆），假装一下是扔洞里的效果

加林森

谢谢老黑，我去试一试。

红影

这个好，可以把视频扔洞里了

马黑黑

红影 发表于 2022-5-9 21:48
这个好，可以把视频扔洞里了

之前不是扔过的吗

马黑黑

加林森 发表于 2022-5-9 21:19
谢谢老黑，我去试一试。

看看能不能试出来。我的东东都只是模拟的，并未真实放视频，不过之前我切割过视频和网易音频播放器

加林森

马黑黑 发表于 2022-5-9 21:50
看看能不能试出来。我的东东都只是模拟的，并未真实放视频，不过之前我切割过视频和网易音频播放器

嗯嗯，今天有点晚了，怕影响家人，明天来制作。

马黑黑

加林森 发表于 2022-5-9 21:52
嗯嗯，今天有点晚了，怕影响家人，明天来制作。

没关系，消化了再制作也好。

提醒一下：.mama 选择器是父容器，可以做帖子的主窗体

加林森

马黑黑 发表于 2022-5-9 21:54
没关系，消化了再制作也好。

提醒一下：.mama 选择器是父容器，可以做帖子的主窗体

嗯嗯，谢谢！

马黑黑

加林森 发表于 2022-5-9 22:05
嗯嗯，谢谢！

不客气的

加林森

马黑黑 发表于 2022-5-10 07:55
不客气的

好的。

红影

马黑黑 发表于 2022-5-9 21:49
之前不是扔过的吗

是的，复习一下更清楚了

马黑黑

红影 发表于 2022-5-10 10:30
是的，复习一下更清楚了

挺好的

红影

马黑黑 发表于 2022-5-10 12:17
挺好的

我好像是真的扔在洞后面的，这个是切割，实际是在前面。那么也可以用那个多边形切出斜向的视频窗口了？

马黑黑

红影 发表于 2022-5-10 14:28
我好像是真的扔在洞后面的，这个是切割，实际是在前面。那么也可以用那个多边形切出斜向的视频窗口了？

对，做什么形状的都行

小辣椒

黑黑，这个背景可以用图图吗，图图上面一个洞视频出来？

马黑黑

小辣椒 发表于 2022-5-10 19:39
黑黑，这个背景可以用图图吗，图图上面一个洞视频出来？

完全可以

大猫咪

这个非常喜欢 空了学习 谢谢老黑   真棒！  

马黑黑

大猫咪 发表于 2022-5-10 19:53
这个非常喜欢 空了学习  谢谢老黑   真棒！