视频：clip-path裁剪举例

马黑黑

马黑黑

先上代码：

1. <style>
   
2. .mama {
   
3.         margin: auto;
   
4.         width: 740px;
   
5.         height: 520px;
   
6.         background: linear-gradient(to right, olive, lightgreen, pink);
   
7.         position: relative;
   
8. }
   
9. .mtv {
   
10.         position: absolute;
    
11.         width: 500px;
    
12.         height: 500px;
    
13.         left: 230px;
    
14.         top: 10px;
    
15.         background: tan;
    
16.         text-align: center;
    
17.         line-height: 500px;
    
18.         clip-path: circle(35% at 50% 51%);
    
19. }
    
20. </style>
    
21. 
    
22. <div class="mama">
    
23.         <iframe class="mtv" frameborder="0" src="https://haokan.baidu.com/v?vid=8132915352905853598&pd=pcshare"></iframe>
    
24. </div>

复制代码

加林森

我刚才也做出来了。谢谢老黑！

马黑黑

技法：

一、首先，考虑视频对象，先布置好它的位置，包括尺寸、定位等，确保视频能够正常显示视口。此例中，视频要用 iframe 标签，所以 .mtv class类丢给它；

二、clip-path 的 circle 属性，如果需要可以使用三个参数：

clip-path: circle(圆形半径 at 圆心坐标)，其中，圆形半径可以用百分比、px值表示，at 之后是圆心{xy}坐标值，可以合写成一个值（xy值相等时），可以分开写（xy值不相等时）。本例的clip-path是：

clip-path: circle(35% at 50% 51%);

圆形半径是 35%，圆心位置在 {50% 51%} 处。

加林森

学习了。谢谢！

红影

这段视频有趣，不知道是什么地方的话。小宝贝很喜欢花呢

马黑黑

红影 发表于 2022-5-10 14:41
这段视频有趣，不知道是什么地方的话。小宝贝很喜欢花呢

视频内容有点意思

马黑黑

加林森 发表于 2022-5-10 13:23
我刚才也做出来了。谢谢老黑！

嗯，要根据原始视频控制一下半径、位置。

加林森

马黑黑 发表于 2022-5-10 18:21
嗯，要根据原始视频控制一下半径、位置。

嗯嗯，明白的。

小辣椒

黑黑的新产品，小辣椒没有学习的太多了

马黑黑

小辣椒 发表于 2022-5-10 19:26
黑黑的新产品，小辣椒没有学习的太多了

不急慢慢来

马黑黑

加林森 发表于 2022-5-10 19:03
嗯嗯，明白的。

加林森

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

谢茶

大猫咪

继续学习新代码，真棒   谢谢老黑   

马黑黑

大猫咪 发表于 2022-5-10 20:13
继续学习新代码，真棒   谢谢老黑

红影

马黑黑 发表于 2022-5-10 18:20
视频内容有点意思

很有趣

马黑黑

红影 发表于 2022-5-11 11:15
很有趣

乡村题材挺好的

红影

马黑黑 发表于 2022-5-11 12:15
乡村题材挺好的

原汁原味。

马黑黑

红影 发表于 2022-5-11 19:03
原汁原味。

是啊，就喜欢真实性