资讯专栏INFORMATION COLUMN

给网站头部添加视频海报

heartFollower / 1821人阅读

摘要:给网站头部添加视频海报视频海报设置透明度循环播放,自动播放静下来携一缕清风,续一杯清茶且听风轻云淡结果

给网站头部添加视频海报

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>视频海报title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11     #banner{
12         width: 100%;
13         height: 500px;
14         background: purple;
15         overflow: hidden;
16         position: relative;
17     }
18     #banner video{
19         width: 100%;
20         position: relative;
21         opacity: 0.6;  /* 设置透明度 */
22     }
23 
24     #banner h2,h4{
25         position: absolute;
26         top: 120px;
27         left: 150px;
28         width: 100%;
29         text-align: left;
30         color: #fff;
31         line-height: 30px;
32         
33     }
34     #banner h2{
35         top: 80px;
36         font-size: 40px;
37         text-decoration: underline;
38     }
39     style>
40 head>
41 <body>
42     <div id="banner">
43         <video loop autoplay>    
44             <source src="video/banner.mp4">
45         video>
46         <h2>SLOW DOWNh2>
47         <h4>静下来<br> 携一缕清风,续一杯清茶 <br> 且听风轻云淡h4>
48     div>        
49 body>
50 html>

结果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1651.html

相关文章

  • Web前端开发标准规范

    摘要:页面名称月影功能模块,请在模块之间加入注释,中英文不做要求活动规则开始活动规则活动规则结束自定义函数。参考页面前端规范 web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一、命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 项目、目录、html/css/js等文件命名全...

    高璐 评论0 收藏0
  • Web前端开发标准规范

    摘要:页面名称月影功能模块,请在模块之间加入注释,中英文不做要求活动规则开始活动规则活动规则结束自定义函数。参考页面前端规范 web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一、命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 项目、目录、html/css/js等文件命名全...

    GHOST_349178 评论0 收藏0
  • Web前端开发标准规范

    摘要:页面名称月影功能模块,请在模块之间加入注释,中英文不做要求活动规则开始活动规则活动规则结束自定义函数。参考页面前端规范 web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一、命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 项目、目录、html/css/js等文件命名全...

    newtrek 评论0 收藏0
  • 精彩文章大合集- 收藏集 - 掘金

    摘要:发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵,如果喜欢,点个开源不易。作者将原素材文章进行了新内容的添加和重新排列,但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧,来提升你的和代码。 收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

    ermaoL 评论0 收藏0

发表评论

0条评论

heartFollower

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<