B2主题首页视频背景区块 – WordPress区块

文章转自Npcink。

  1. <div id="hero" class="video">
  2. <video muted="muted" autoplay="autoplay" loop="loop">
  3. <source src="https://cdn.getimg.net/npc/2020/file/page/1023/video/video-file.mp4" type="video/mp4">
  4. </video>
  5. <div>
  6. <video autoplay="" loop=""></video>
  7. </div>
  8. <div id="top">
  9. <h1>Npcink
  10. </h1>
  11. <h2>Npcink收录国内外优秀的WordPress、Typecho主题、插件和教程,建站不愁,有我就够
  12. </h2>
  13. <p style="font-size: 1px;opacity: 0.5;">那些无法击败我的,终将使我更加强大</p>
  14. <div class="n-annniu">
  15. <a href="https://www.npc.ink/wordpress-page" target="_blank" title="WordPress">
  16. <span class="b2font b2-weixiao-"></span>
  17. WordPress
  18. </a>
  19. <a href="https://www.npc.ink/typecho-page" target="_blank" title="Typecho">
  20. <span class="b2font b2-biaoqing"></span>
  21. Typecho
  22. </a>
  23. </div>
  24. </div>
  25. </div>
  26. <style type="text/css">
  27. #hero {
  28. position: relative;
  29. background-position: center;
  30. background-size: cover;
  31. background-color: #555;
  32. margin: 0 0 20px;
  33. text-align: center;
  34. transition: 0.8s;
  35. }
  36. #hero.video video {
  37. position: absolute;
  38. min-width: 100%;
  39. min-height: 100%;
  40. top: 50%;
  41. left: 50%;
  42. -webkit-transform: translate(-50%, -50%);
  43. transform: translate(-50%, -50%);
  44. }
  45. /*文本*/
  46. #top {
  47. position: relative;
  48. margin: 2em 8em 1em;
  49. padding: 6em 2em;
  50. }
  51. #top h1,
  52. #top h2 {
  53. color: #ffffff;
  54. }
  55. #top h1 {
  56. font-size: 12em;
  57. }
  58. #top h2 {
  59. font-size: 16px;
  60. line-height: 1.8em;
  61. font-weight: bolder;
  62. }
  63. /*按钮*/
  64. .n-annniu {
  65. text-align: center;
  66. padding-top: 2em;
  67. }
  68. .n-annniu a {
  69. width: 240px;
  70. margin: 0 15px;
  71. display: inline-block;
  72. color: #d33333;
  73. border-radius: 6px;
  74. font-size: 22px;
  75. line-height: 53px;
  76. background: #fff;
  77. }
  78. .home_row_0 .wrapper, .home_row_0 .wrapper .box {
  79. width: 100%!important;
  80. box-shadow: none;
  81. }
  82. </style>
HTML源码

简约文艺复古个人简历个人资料HTML源码下载

2020-8-28 12:09:49

HTML源码

底部信息

2021-1-7 16:05:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
搜索