html网页动态背景,html5动态背景特效

　　话不多说，先看效果图：

　　很酷吗？要不要把这个动态视频实现为背景的首页？快来一起学习吧。本文将带您了解H5动态视频背景。

　　先在网上找一个清晰的视频下载下来，最好是MP4格式的；

　　下载后，我们创建一个新的html文件来编写代码：

　　Html代码：

　　视频id= v1 自动播放循环静音源src=。/video 2 . MP4 type= video/MP4 /video一个视频标签换行，source代表源文件，autoplay属性为autoplay，loop代表循环播放，muted代表静音播放；

　　如果没有添加autoplay属性，则无法自动播放，页面会黑屏显示；

　　Css代码：

　　* { margin:0px；填充：0px}视频{位置：固定；右：0px底部：0px最小宽度：100%；最小高度：100%；高度：自动；宽度：自动；/*添加滤镜*/*//*滤镜：模糊(15px)；//背景虚化设置*/*-WebKit-filter:灰度(100%)；*//*滤镜：灰度(100%)；//背景灰度设置*/z-index:-11 } source { min-width:100%；最小高度：100%；高度：自动；宽度：自动；} css代码主要用于定位和放大，达到全屏播放的效果，主要用于设置视频的宽度和高度，不要忘了给z-index一个值，这样可以放在最下面，只要小于0，没有影响；

　　这样我们的动态视频背景就完成了。如果要设置播放速度，可以添加js代码(视频标签加ID="v1 "属性):

　　var video=document . getelementbyid( v1 )；video.playbackRate=1.5那么如果我们想在页面上添加内容呢？

　　视频id= v1 自动播放循环静音源src=。/video 2 . MP4 type= video/MP4 /video h1 style= color:white 123465/h1没错，是在video标签之外添加的，然后我们的效果图是这样的(由于博客对图片大小的限制，截屏时间不是很长):

　　用H5实现这种动态视频背景效果容易吗？我们一起来试试吧！

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。