我的网页上有一个 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>
Run Code Online (Sandbox Code Playgroud)
当我的 10 秒视频结束时,视频会从头开始重复播放,而且开始的方式并不吸引眼球,因为视频的结尾部分和视频的起点没有很好地连接。
有没有办法可以做一个像淡入淡出效果的过渡,这样我的壁纸的循环会更好?蒂亚