風(fēng)犬少年的天空視頻背景區(qū)塊 – WordPress區(qū)塊

背景用的視頻是《風(fēng)犬少年的天空》，這款WordPress區(qū)塊以視頻做背景，前面放上居中的文本，給人一種很酷炫的感覺。

• 代碼來源：詳情

效果

補(bǔ)充

類似的網(wǎng)站有：

• 抖音
• 快手
• 奶牛快傳
• 討論

數(shù)據(jù)

• 幀寬度：1440
• 幀高度：720
• 幀速率：24幀/秒

自用代碼（B2）

以下代碼需放在首頁第一個(gè)HTML模塊，可有全屏效果（重點(diǎn)在最后一段CSS控制全屏顯示）。

  <div id="hero" class="video">
    <video muted="muted" autoplay="autoplay" loop="loop">
      <source src="https://cdn.getimg.net/npc/2020/file/page/1023/video/video-file.mp4" type="video/mp4">
    </video>
    <div>
      <video autoplay="" loop=""></video>
    </div>
    <div id="top">
      <h1>Npcink
      </h1>
      <h2>Npcink收錄國內(nèi)外優(yōu)秀的WordPress、Typecho主題、插件和教程，建站不愁，有我就夠
      </h2>
<p style="font-size: 1px;opacity: 0.5;">那些無法擊敗我的，終將使我更加強(qiáng)大</p>
      <div class="n-annniu">
        <a href="http://www.kartiktrivedi.com/wordpress-page" target="_blank" title="WordPress">
          <span class="b2font b2-weixiao-"></span>
          WordPress
        </a>
        <a href="http://www.kartiktrivedi.com/typecho-page" target="_blank" title="Typecho">
          <span class="b2font b2-biaoqing"></span>
          Typecho
        </a>
      </div>
    </div>
  </div>

 <style type="text/css">

#hero {
  position: relative;
  background-position: center;
  background-size: cover;
  background-color: #555;
  margin: 0 0 20px;
  text-align: center;
  transition: 0.8s;
}

#hero.video video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*文本*/
#top {
  position: relative;
  margin: 2em 8em 1em;
    padding: 6em 2em;
}
#top h1,
#top h2 {
  color: #ffffff;
}

#top h1 {
  font-size: 12em;
}

#top h2 {
  font-size: 16px;
  line-height: 1.8em;
font-weight: bolder;
}

/*按鈕*/
.n-annniu {
  text-align: center;
  padding-top: 2em;
}

.n-annniu a {
  width: 240px;
  margin: 0 15px;
  display: inline-block;
  color: #d33333;
  border-radius: 6px;
  font-size: 22px;
  line-height: 53px;
  background: #fff;
}

.home_row_0 .wrapper, .home_row_0 .wrapper .box {
    width: 100%!important;
    box-shadow: none;
}
</style>

注意，代碼中的視頻地址為Npcink的OSS存放地址，已做防盜鏈處理，在您的網(wǎng)站上無法播放。

如何使用

點(diǎn)擊下方的Demo按鈕，右擊鼠標(biāo)查看源代碼，根據(jù)代碼注釋復(fù)制代碼到自己需要的地方，例如古登堡的HTML區(qū)塊或是小工具里面的“自定義HTML”，另外，記得看代碼注釋哦(。???)ノ

視頻教程

相關(guān)推薦

網(wǎng)易云音樂圖文混排雙按鈕區(qū)塊 – WordPress區(qū)塊

Muze

• 20年10月22日
• 喜歡：0
• 瀏覽：582

穿山甲大氣卡片區(qū)塊 – WordPress區(qū)塊

Muze

• 20年9月14日
• 喜歡：0
• 瀏覽：401