CSS可以实现不用点击就能让视频循环播放,这对于需要背景音乐或视频的网站来说非常有用。.video { position: fixed; right: 0; bottom: 0; min-width:
CSS可以实现不用点击就能让视频循环播放,这对于需要背景音乐或视频的网站来说非常有用。
.video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; overflow: hidden; } .video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; }
这段代码中的关键是使用绝对定位和transform属性来居中视频。另外,z-index属性也很重要,因为它可以将视频置于页面的背景下方。
在HTML中,只需要将视频包含在一个带有.video类的div中:
<div class="video"> <video src="video.mp4" autoplay loop muted></video> </div>
在这个示例中,视频的文件名为video.mp4,autoplay属性会让它在页面加载后自动播放,loop属性会让它循环播放,muted属性会让它静音。
这就是利用CSS实现不用点击就能让视频循环播放的方法,希望能对您有所帮助。
粉丝
0
关注
0
收藏
0