论坛 › 欢乐水吧 › 视频扔洞里的实现方法

马黑黑 发表于 2022-5-9 21:14

视频扔洞里的实现方法

<style>
.mama {
        margin: auto;
        width: 740px;
        height: 520px;
        position: relative;
}
.pic {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, olive, lightgreen, pink);
}
.mtv {
        position: absolute;
        width: 50%;
        height: 100%;
        left: 40%;
        background: tan;
        text-align: center;
        line-height: 500px;
        clip-path: circle(35%);
}
</style>

<div class="mama">
        <div class="pic">假装这里是一张图片</div>
        <div class="mtv">假装这里是视频</div>
</div>

马黑黑 发表于 2022-5-9 21:15

代码：
<style>
.mama {
        margin: auto;
        width: 740px;
        height: 520px;
        position: relative;
}
.pic {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, olive, lightgreen, pink);
}
.mtv {
        position: absolute;
        width: 50%;
        height: 100%;
        left: 40%;
        background: tan;
        text-align: center;
        line-height: 500px;
        clip-path: circle(35%);
}
</style>

<div class="mama">
        <div class="pic">假装这里是一张图片</div>
        <div class="mtv">假装这里是视频</div>
</div>

马黑黑 发表于 2022-5-9 21:16

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

加林森 发表于 2022-5-9 21:19

谢谢老黑，我去试一试。

红影 发表于 2022-5-9 21:48

这个好，可以把视频扔洞里了{:4_173:}

马黑黑 发表于 2022-5-9 21:49

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

之前不是扔过的吗

马黑黑 发表于 2022-5-9 21:50

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

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

加林森 发表于 2022-5-9 21:52

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

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

马黑黑 发表于 2022-5-9 21:54

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

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

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

加林森 发表于 2022-5-9 22:05

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

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

嗯嗯，谢谢！

马黑黑 发表于 2022-5-10 07:55

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

不客气的

加林森 发表于 2022-5-10 08:38

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

好的。

红影 发表于 2022-5-10 10:30

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

是的，复习一下更清楚了{:4_204:}

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

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

挺好的

红影 发表于 2022-5-10 14:28

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

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

马黑黑 发表于 2022-5-10 18:22

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

对，做什么形状的都行

小辣椒 发表于 2022-5-10 19:39

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

马黑黑 发表于 2022-5-10 19:40

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

完全可以

大猫咪 发表于 2022-5-10 19:53

这个非常喜欢 {:4_187:}空了学习 {:4_187:} 谢谢老黑 {:4_179:}真棒！{:4_190:}

马黑黑 发表于 2022-5-10 20:07

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

{:4_191:}

查看完整版本: 视频扔洞里的实现方法