HTML5視頻背景：視頻在網(wǎng)頁中運(yùn)用的新形式

在好多網(wǎng)站背景都是視頻背景，

今天我給大家講解的就是如何將視頻作為網(wǎng)站背景

效果圖

首先我們先寫一個(gè)index.html

代碼如下：

<!DOCTYPE html>

<html>

<head>

/*網(wǎng)站編碼為utf-8*/

/*網(wǎng)站題目*/

</head>

<body>

</body>

</html>

現(xiàn)在我們來寫視頻背景代碼

<!DOCTYPE html>

<html>

<head>

.index-video {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto;

height: auto;

z-index: -100;

background: url("../../image/index/bg.jpg") no-repeat; background-size:cover;}

tml的自學(xué)剛開始的時(shí)候是比較難的，因?yàn)閔tml的專業(yè)程度本身就不簡(jiǎn)單，而自學(xué)也是一件非常煎熬的事情，但是為了掌握一項(xiàng)生存技能，你必須學(xué)會(huì)。

在學(xué)習(xí)html之前首先你要明確的幾點(diǎn)是：

1. 是否明確將來做什么工作，需要掌握哪些技能，不要?jiǎng)e人學(xué)你也跟著學(xué)，盲目跟風(fēng)

2. 你有沒有系統(tǒng)的學(xué)習(xí)規(guī)劃，規(guī)劃好每天學(xué)什么、學(xué)多長(zhǎng)時(shí)間。

3. 學(xué)習(xí)方式要選對(duì)，很多人在學(xué)習(xí)html的時(shí)候就是學(xué)習(xí)方式選錯(cuò)了，最后的結(jié)果就是學(xué)著學(xué)著就放棄了，學(xué)習(xí)過程種一定要找到學(xué)習(xí)技巧，不會(huì)的可以多問問別人，不要自己瞎琢磨，最后什么也沒琢磨出來。

下面小編給大家提供一個(gè)曾經(jīng)學(xué)習(xí)過的HTML視頻教程，希望可以幫助到大家，此視頻教程主要講解了HTML基礎(chǔ)語法，內(nèi)容主要包括：HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識(shí)點(diǎn)。通過該視頻的學(xué)習(xí)之后，可以開發(fā)基本的網(wǎng)頁，并且可以看懂別人編寫的HTML頁面。

課程學(xué)習(xí)目錄

1.HTML視頻教程:課程內(nèi)容概述

2.HTML視頻教程:BS結(jié)構(gòu)介紹

3.HTML視頻教程:軟件環(huán)境準(zhǔn)備

4.HTML視頻教程:HTML概述

5.HTML視頻教程:我的第一個(gè)HTML

6.HTML視頻教程:HTML的基本標(biāo)簽

7.HTML視頻教程:HTML的實(shí)體符號(hào)

8.HTML視頻教程:HTML的表格

9.HTML視頻教程:HTML的單元格合并1

10.HTML視頻教程:HTML的單元格合并2

11.HTML視頻教程:thead tbody tfoot

12.HTML視頻教程:背景色和背景圖片

13.HTML視頻教程:HTML圖片img標(biāo)簽

14.HTML視頻教程:HTML超鏈接

15.HTML視頻教程:超鏈接的作用-request和response的概念

16.HTML視頻教程:HTML列表

17.HTML視頻教程:form表單初步

18.HTML視頻教程:用戶注冊(cè)表單的實(shí)現(xiàn)

19.HTML視頻教程:下拉列表支持多選

20.HTML視頻教程:form的file控件

完整目錄可以關(guān)注動(dòng)力節(jié)點(diǎn)Java視頻教程

HTML視頻教程：https://www.ixigua.com/6834413404204040715

們傳統(tǒng)的前端更多的是用javascript實(shí)現(xiàn)各種復(fù)雜動(dòng)畫，自從有了Css3 transition和animation以來,前端開發(fā)在動(dòng)畫這一塊有了更高的自由度和格局,對(duì)動(dòng)畫的開發(fā)也越來越容易。這篇文章就讓我們匯總一下使用Css3實(shí)現(xiàn)的各種特效。這篇文章參考《css揭秘》這本書，并作出了自己的總結(jié)，希望能讓大家更有收獲，也強(qiáng)烈推薦大家看看這本書，你值得擁有。

我們將學(xué)到

Css3
outline
radial-gradient
linear-gradient
box-shadow

1.實(shí)現(xiàn)內(nèi)部虛線邊框

知識(shí)點(diǎn)：outline

核心代碼.dash-border{
 width: 200px;
 height: 100px;
 line-height: 100px;
 outline: 1px dashed #fff;
 outline-offset: -10px;
}
復(fù)制代碼

2.邊框內(nèi)圓角的實(shí)現(xiàn)

知識(shí)點(diǎn)：box-shadow

核心代碼.radius-border{
 margin-top: 20px;
 width: 180px;
 height: 80px;
 box-shadow: 0 0 0 10px gray;
}
復(fù)制代碼

3.實(shí)現(xiàn)條紋背景與進(jìn)度條

知識(shí)點(diǎn)：linear-gradient,repeating-linear-gradient

核心代碼/* 上 */
background: linear-gradient(to right,#fb3 50%,#58a 0);
background-size: 40px 100%;
box-shadow: inset 0 0 3px #555;
/* 中 */
background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 40px 40px;
/* 下 (可以實(shí)現(xiàn)任意角度的漸變，45°時(shí)顯示效果最好) */
background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);
復(fù)制代碼

4.復(fù)雜的背景圖案

知識(shí)點(diǎn)：linear-gradient,repeating-linear-gradient,radial-gradient

由于第二個(gè)圖會(huì)有復(fù)雜的隨機(jī)動(dòng)畫，建議大家可以親自嘗試看看效果，核心代碼

<style>
.bg-grid{
 margin-top: 20px;
 width: 200px;
 height: 200px;
 background-image: linear-gradient(rgba(255,255,255,1) 2px,transparent 0),
 linear-gradient(to right,rgba(255,255,255,1) 2px,transparent 0),
 linear-gradient(rgba(255,255,255,.2) 1px,transparent 0),
 linear-gradient(to right,rgba(255,255,255,.2) 1px,transparent 0);
 background-position: -50px -50px;
 background-size: 100px 100px,100px 100px, 100% 10px, 10px 100%;
}
.animate-grid{
 animation: move-grid 6s linear infinite;
}
@keyframes move-grid{
 0%{
 background-position: -50px -50px;
 }
 30%{
 background-position: -100px -100px;
 }
 60%{
 background-position: -100px -150px;
 }
 100%{
 background-position: -50px -50px;
 }
}
</style>
<div class="bg-grid black-theme"></div>
<div class="bg-grid black-theme animate-grid"></div>
復(fù)制代碼

紅綠燈以及紅路燈隨機(jī)運(yùn)動(dòng)動(dòng)畫

利用css3多背景和position實(shí)現(xiàn)紅綠燈和背景色塊移動(dòng)核心代碼

<style>
.bg-dot{
 margin-top: 20px;
 width: 200px;
 height: 50px;
 background-image: radial-gradient(circle,#0cf 15px,transparent),
 radial-gradient(circle,red 15px,transparent),
 radial-gradient(circle,yellow 15px,transparent),
 radial-gradient(circle,green 15px,transparent);
 background-repeat: no-repeat;
 background-position: 0 0, 50px 0, 100px 0, 150px 0, 200px 0;
 background-size: 50px 50px;
}
.animate-dot{
 animation: move-dot 8s linear infinite;
}
.animate-dot2{
 animation: move-dot2 6s linear infinite;
}
@keyframes move-dot{
 0%{
 background-position: 0 0, 50px 0, 100px 0, 150px 0;
 }
 30%{
 background-position: 50px 0, 0 0, 100px 0, 150px 0;
 }
 60%{
 background-position: 50px 0, 100px 0, 0 0, 150px 0;
 }
 100%{
 background-position: 50px 0, 100px 0, 150px 0, 0 0;
 }
}
@keyframes move-dot2{
 0%{
 background-image: radial-gradient(circle,#0cf 15px,transparent),
 radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,gray 15px,transparent);
 }
 30%{
 background-image: radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,red 15px,transparent),
 radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,gray 15px,transparent);
 }
 60%{
 background-image: radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,yellow 15px,transparent),
 radial-gradient(circle,gray 15px,transparent);
 }
 100%{
 background-image: radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,gray 15px,transparent),
 radial-gradient(circle,green 15px,transparent);
 }
}
</style>
<div class="bg-dot black-theme animate-dot"></div>
<div class="bg-dot black-theme animate-dot2"></div>
復(fù)制代碼

棋盤背景以及棋盤背景隨機(jī)動(dòng)畫

利用背景漸變實(shí)現(xiàn)棋盤圖案核心代碼

<style>
.bg-qi{
 margin-top: 20px;
 width: 200px;
 height: 200px;
 background-color: #eee;
 background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
 linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
 background-position: 0 0, 20px 20px;
 background-size: 40px 40px;
 box-shadow: 2px 2px 4px rgba(0,0,0,.4);
}
</style>
<div class="bg-qi black-theme"></div>
復(fù)制代碼

偽隨機(jī)背景

利用背景漸變，keyframe動(dòng)畫，實(shí)現(xiàn)復(fù)雜的偽隨機(jī)動(dòng)畫核心代碼

<style>
.bg-line-rand{
 margin-top: 20px;
 width: 480px;
 height: 60px;
 background-color: #eee;
 background-image: linear-gradient(90deg,#fb3 11px, transparent 0),
 linear-gradient(90deg,#ab4 23px, transparent 0),
 linear-gradient(90deg,#655 41px, transparent 0);
 background-size: 41px 100%, 61px 100%, 83px 100%;
 box-shadow: 2px 2px 4px rgba(0,0,0,.4);
}
.bg-dot-rand{
 margin-top: 20px;
 width: 200px;
 height: 200px;
 background-color: #eee;
 background-image: radial-gradient(circle,#fb3 5px, transparent 0),
 radial-gradient(circle,#ab4 13px, transparent 0),
 radial-gradient(circle,#655 31px, transparent 0);
 background-repeat: no-repeat;
 background-size: 101px 203px, 147px 60px, 373px 201px;
 box-shadow: 2px 2px 4px rgba(0,0,0,.4);
}
.animate1{
 animation: move 4s linear infinite;
}
.animate2{
 animation: move2 4s linear infinite;
}
@keyframes move{
 0%{
 background-position: 0 0, 0 0, 0 0;
 }
 50%{
 background-position: -10px 0, 20px 0, 30px 0;
 }
 100%{
 background-position: 0 0, 30px 0, 10px 0;
 }
}
@keyframes move2{
 0%{
 background-position: 0 0, 0 0, 0 0;
 }
 50%{
 background-position: -10px 30px, 20px 0, -40px 80px;
 }
 100%{
 background-position: 0 20px, 60px -20px, 10px 30px;
 }
}
</style>
<div class="bg-line-rand black-theme"></div>
<div class="bg-line-rand black-theme animate1"></div>
<div class="bg-dot-rand black-theme animate2"></div>
復(fù)制代碼

5.折角效果

知識(shí)點(diǎn)：linear-gradient

核心代碼

<style>
.fold{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
 width: 200px;
 height: 80px;
 color: #fff;
 line-height: 80px;
 text-align: center;
 background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.5) 0) no-repeat 100% 0 / 2em 2em,
 linear-gradient(-135deg,transparent 1.4em,#06c 0);
}
.linear{
 background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.5)) no-repeat 100% 0 / 2em 2em,
 linear-gradient(-135deg,transparent 1.4em,#06c);
}
</style>
<div class="fold">折角效果哦</div>
<div class="fold linear">折角效果哦</div>
復(fù)制代碼

2.內(nèi)陰影圓折角效果

核心代碼

<style>
.fold-1{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
 position: relative;
 width: 200px;
 height: 80px;
 border-radius: .5em;
 color: #fff;
 line-height: 80px;
 text-align: center;
 background: linear-gradient(-150deg,transparent 1.5em, #58a 0);
}
.fold-1::before{
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat;
 width: 1.73em;
 height: 3em;
 transform: translateY(-1.3em) rotate(-30deg);
 transform-origin: bottom right;
 border-bottom-left-radius: inherit;
 box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
</style>
<div class="fold-1">折角效果哦</div>
復(fù)制代碼

6.自適應(yīng)文本的條紋背景

知識(shí)點(diǎn)：linear-gradient,line-height,background-origin

核心代碼

<style>
.stripe-bg{
 padding: .5em;
 line-height: 1.5em;
 background: beige;
 background-size: auto 3em;
 background-origin: content-box;
 background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
.stripe-bg > p{
 margin: 0;
}
</style>
<div class="stripe-bg">
 <p>hello you</p>
 <p>hello you</p>
 <p>hello you</p>
 <p>hello you</p>
 <p>hello you</p>
</div>
復(fù)制代碼

7.自定義的下劃線實(shí)現(xiàn)

知識(shí)點(diǎn)linear-gridient

小伙伴們注意到了嗎？默認(rèn)的下劃線會(huì)將文字穿過，而上面的不會(huì)呦！

核心代碼

<style>
.my-line{
 line-height: 1.4em;
 background: linear-gradient(gray,gray) no-repeat;
 background-size: 100% 1px;
 background-position: 0 1.15em;
 text-shadow: .05em 0 #fff, -.05em 0 #fff;
}
</style>
<div class=""><span class="my-line">i have your big apple.you have a too? hi hi hi.</span></div>
復(fù)制代碼

最后

筆者3天后將推出開源的CMS系統(tǒng)，技術(shù)架構(gòu)：

后臺(tái)Node+Koa+redis+JsonSchema
管理后臺(tái)界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
客戶端前臺(tái) react + antd + react-hooks + axios

在線咨詢

上一篇：HTML5實(shí)現(xiàn)移動(dòng)頁面自適應(yīng)手機(jī)屏幕的方法
下一篇：剛學(xué)會(huì) HTML5 不久，最近用 CSS3 實(shí)現(xiàn)了熱點(diǎn)地圖動(dòng)畫

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML5視頻背景：視頻在網(wǎng)頁中運(yùn)用的新形式

您的項(xiàng)目需求