gpt4 book ai didi

css - 如何在 css 中更好地过渡

转载 作者:行者123 更新时间:2023-11-28 01:34:07 25 4
gpt4 key购买 nike

我有一个 10 秒的视频作为我网页中的墙纸,仅使用纯 CSS。这是我的代码:

<style>
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
</style>
<body>
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="vidwallpaper.mp4" type="video/webm" />
<source src="vidwallpaper.mp4" type="video/mp4 " />
</video>
</body>

当我的 10 秒视频结束时,视频会从头开始重复,而且开始的方式并不吸引人,因为视频的结尾部分和视频的起点没有很好地衔接。

有没有什么办法可以让我的墙纸循环效果更好,比如褪色效果?蒂亚

最佳答案

通常的解决方案是编辑视频,使从头到尾的过渡看起来更流畅。不幸的是,在某些浏览器上,它可能会在重新启动前暂停一秒钟。

参见 this and related questions .

要进行交叉淡入淡出,您需要两个视频,或者两个包含相同视频的视频元素。你会玩一出戏,在它结束前不久,开始玩另一出戏。您可以将一个视频放在另一个视频的前面,然后逐渐改变前面一个视频的不透明度以进行交叉淡入淡出。然后您可以倒回不可见的视频,为下一次转换做好准备。

关于css - 如何在 css 中更好地过渡 <video> 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29141460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com