整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家分享一個(gè)可以將視頻作為網(wǎng)頁背景的插件！效果展示地址：http://39.108.141.146/
需要源代碼的童鞋評(píng)論里留個(gè)郵箱或者私信我也可以，我發(fā)給你們！
效果截圖
下載源碼解壓！
項(xiàng)目結(jié)構(gòu)圖
我們將想要展示的視頻存放在assets文件夾，然后右鍵點(diǎn)擊index.html選擇用記事本打開，如下圖，修改視頻地址！
如何修改視頻背景
index2.html是全屏作為背景，修改方式和index.html一樣的！
修改完后點(diǎn)擊保存，然后用瀏覽器分別打開這兩個(gè)文件就可以看到效果了！
當(dāng)然也可以發(fā)布到網(wǎng)上給別人看！發(fā)布的方法→原來自己建網(wǎng)站這么簡單！
在好多網(wǎng)站背景都是視頻背景，
今天我給大家講解的就是如何將視頻作為網(wǎng)站背景
效果圖
首先我們先寫一個(gè)index.html
代碼如下：
<!DOCTYPE html>
<html>
<head>
/*網(wǎng)站編碼為utf-8*/
<meta charset="utf-8">
/*網(wǎng)站題目*/
<title>首頁</title>
</head>
<body>
</body>
</html>
現(xiàn)在我們來寫視頻背景代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.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;}
個(gè)視頻用CSS寫一個(gè)非常簡單的動(dòng)態(tài)背景。大家可以看到在屏幕底部不斷的有彩色的小泡泡升起來，而且是逐漸變大的，直到離開屏幕。來看一下代碼，html非常簡單。
·這些小泡泡用span來寫，現(xiàn)在寫了一些基本的樣式，其它樣式重新來寫。來寫一下這些小泡泡的樣式，三個(gè)小圓出來了，再給這些小球加幾層陰影，讓它們看起來有點(diǎn)像氣泡。
·接著來寫個(gè)動(dòng)畫，讓這些氣泡從底部升起來。一開始把這些氣泡移出屏幕的底部，這里給它100vh，并且一開始是比較小的，就讓它變成0，再慢慢放大。動(dòng)畫結(jié)束的時(shí)候，氣泡從頂部移出視口的范圍，并且逐漸放大到原來的大小。綁定下動(dòng)畫，動(dòng)畫效果有了。
·現(xiàn)在單獨(dú)對偶數(shù)這一個(gè)設(shè)置樣式，讓它的色彩看起來豐富一點(diǎn)。陰影復(fù)制一下(1)，同樣用這個(gè)顏色。現(xiàn)在可以看到中間第二個(gè)顏色已經(jīng)改變了，然后要多生成一些小球。而且因?yàn)檫@個(gè)demon只考慮用css和h t ml來寫，什么js、less、sass這些都不用。
·所以這些小球這里用一個(gè)最愚蠢的方法就是多寫一些span。這里寫了很多個(gè)span，也就是這些小球，這些氣泡，每一個(gè)都給它定義了一個(gè)變量i。這里有什么用？等一下再來說。當(dāng)然正常的不會(huì)這樣子來寫。像這些span和變量i都可以用js來生成，這個(gè)大家可以自己試著來改。
·這堆氣泡生成了，但是這里希望每個(gè)小球的運(yùn)動(dòng)看起來隨機(jī)一點(diǎn)，不要同時(shí)放大同時(shí)消失。這里要怎么樣實(shí)現(xiàn)這種隨機(jī)性？其實(shí)也非常簡單。不要給所有氣泡設(shè)置統(tǒng)一的動(dòng)畫時(shí)間，這里可以用calc()計(jì)算函數(shù)，用120去除以剛才定義的這個(gè)變量。因?yàn)槊總€(gè)視頻里面設(shè)置i的值是不一樣的。所以每個(gè)氣泡完成動(dòng)畫的時(shí)間也是不一樣的，這個(gè)參數(shù)大家可以自己來調(diào)整。
來看一下最終的效果，沒有問題，這些氣泡現(xiàn)在看起來每一個(gè)都是隨機(jī)出現(xiàn)，隨機(jī)放大和消失的。
這個(gè)視頻就到這里，感謝大家的收看。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
