圆形视频的 rotate 问题
<style>.mama { width: 100%; position: relative; }
.mama p { margin: 0; padding: 8px 0; }
.vid {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%;
animation: rot 6s linear infinite alternate;
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div class="mama">
<p>视频要弄成圆形，需要宽高设置为一样，同时在CSS中要有 object-fit: cover; 一句，它能确保视频铺满整个预设尺寸。CSS 和 HTML 代码如下：</p>
<pre>CSS：
<span style="color: red;">.vid </span>{
<span style="color: blue;">width</span>: 300px;
<span style="color: blue;">height</span>: 300px;
<span style="color: blue;">object-fit</span>: cover;
<span style="color: blue;">border-radius</span>: 50%;
}
HTML：
<<span style="color:darkred">video</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"vid"</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"视频地址"</span> <span style="color: red">autoplay</span><span style="color: blue">=</span><span style="color: magenta">"autoplay"</span> <span style="color: red">loop</span><span style="color: blue">=</span><span style="color: magenta">"loop"</span> <span style="color: red">muted</span><span style="color: blue">=</span><span style="color: magenta">"muted"</span>><<span style="color: darkred">/video</span>>
</pre>
<p>这时候，一切正常。但当我们加入 @keyframes 动画并在 .vid 中通过 animation 运行，问题可能就会出现：在版本较低的 chromium 内核的浏览器中，会有两个三角形包夹着圆球。当然，这只是可能，因为，在高版本的 chromium 内核的浏览器中一切还是正常的。现在，chromium内核版本主号已经超过100了，但多数国内封装的浏览器所使用的内核还在100以内，通常都是80多。</p>
<p>下面给出加入了动画的代码，并在本楼运行：</p>
<pre><style>
<span style="color: red;">.vid </span>{
<span style="color: blue;">width</span>: 300px;
<span style="color: blue;">height</span>: 300px;
<span style="color: blue;">object-fit</span>: cover;
<span style="color: blue;">border-radius</span>: 50%;
<span style="color: blue;">animation</span>: rot 6s linear infinite alternate;
}
<span style="color: red;">@keyframes rot </span>{
to { <span style="color: blue;">transform</span>: rotate(360deg); }
}
</style>
<<span style="color:darkred">video</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"vid"</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"视频地址"</span> <span style="color: red">autoplay</span><span style="color: blue">=</span><span style="color: magenta">"autoplay"</span> <span style="color: red">loop</span><span style="color: blue">=</span><span style="color: magenta">"loop"</span> <span style="color: red">muted</span><span style="color: blue">=</span><span style="color: magenta">"muted"</span>><<span style="color: darkred">/video</span>>
</pre>
<p><video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8bb307335.mp4" autoplay="autoplay" loop="loop" muted="muted"></video></p>
</div>
解决办法：切割——
clip-path: circle(50% at 50% 50%);
上面 clip-path 属性设定，将视频以圆心为基准，以50%为{xy}半径，动刀裁剪视频。此句放入 .vid 选择器中。
<video class="vid" style="clip-path: circle(50% at 50% 50%);" src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8bb307335.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> 剪裁之后，效果如上楼所示，较低chromium内核的浏览器也能显示纯粹的圆球 原来是 animation 运行带来的问题，剪一下就干净了，真好。谢谢山人{:4_187:} 如果不用 rotate，之用平移 translate，不剪裁也没问题
页:
[1]