帶你看好玩的CSS-霓虹燈按鈕

于前端開發人員來說，css是我們再熟悉不過的朋友的，它就相當于是我們頁面的衣服，頁面好不好看，就看我們css運用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學起來簡單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點時間就可以的，需要我們的日積月累，時刻專研。

而今天，就帶給大家一個CSS特效-霓虹燈按鈕，這也是我看到很不錯的效果，帶來分享給大家，希望大家喜歡[送心][送心][送心]

效果如下：

最終效果

那好，廢話不多說，開始我們的CSS代碼。

準備一個HTML標簽

// 這里我們用div標簽來模擬button按鈕，標簽可以隨意，a、p、span等都可以
// 通常在開發中使用別的標簽來代替button標簽，是因為原始的標簽樣式不好看，
// 我們還得重置樣式，而其他標簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當然，button標簽也是可以的，但是如前面所說，原始的樣式需要我們重置。
<div class="btn">button</div>

CSS部分的代碼

body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景，只為更能突出樣式效果
}
// 初始化按鈕樣式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 漸變屬性，函數用于創建一個表示兩種或多種顏色線性漸變的圖片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始樣式為這樣：

初始樣式

然后我們給按鈕加上動畫，代碼如下：

.btn:hover {
  	// linear: 動畫從開始到結束具有相同的速度。
    // infinite: 無限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就變為下面這樣：

最后我們給它加上鼠標移上去的效果，代碼如下：

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

現在這樣，就是我們的最終效果了：

就此，我們的霓虹燈的按鈕效果就完成了

不足百行，我們就完成了這個效果，以下是我們的CSS的全部代碼：

文簡介

在剛接觸 p5.js 時我以為這只是一個藝術方向的 canvas 庫，沒想到它還支持視頻文件和視頻流的播放。

本文簡單講講如何使用 P5.js 播放視頻。

播放視頻文件

p5.js 除了可以使用 video 元素播放視頻外，還支持使用 image 控件播放視頻。

方式1：video元素播放視頻

基礎用法

p5.js 的 createVideo() 方法可以創建一個 <video> 元素。

createVideo(src, [callback]) 可以傳入2個參數：

src: 視頻路徑（必傳）。可以傳一個字符串類型的視頻路徑；也可以傳入字符串數組類型，指定多個路徑支持不同瀏覽器。
callback: 回調函數（非必傳）。在視頻加載完成時觸發。

錄制 GIF 后比較卡，將就看著吧~

// 加載本地視頻
let playing = false // 播放狀態
let video = null // 視頻
let button = null // 按鈕

// 視頻加載完成的回調函數
function afterLoad() {
  console.log('加載完成')
}

// 加載資源的生命周期
function preload() {
  video = createVideo('assets/02.mp4', afterLoad)
}

// 初始化的生命周期
function setup() {
  noCanvas()
  button = createButton('播放')
  button.mousePressed(toggleVid)
}

// 點擊按鈕的事件
function toggleVid() {
  if (playing) {
    video.pause()
    button.html('播放')
  } else {
    video.loop()
    button.html('暫停')
  }
  playing = !playing;
}

粗略講講上面這段代碼。

preload() 是 p5.js 提供的一個生命周期，我們通常會將“加載靜態資源”這個步驟放在 preload() 里執行。在《p5.js光速入門》的圖片章節里介紹過。
setup() 是一個初始化的生命周期。
createVideo() 方法加載視頻。第二個參數傳入回調函數 afterLoad，在加載完視頻資源后會執行回調函數。
video.loop() 方法可以播放視頻。
video.pause() 方法可以暫停視頻。
noCanvas() 方法用來隱藏 <canvas> 元素，因為我們使用 createVideo() 會在頁面創建一個 <video> 元素，所以我們就不需要 <canvas> 元素了。

播放方法

除了 video.loop() 方法，還可以使用 video.play() 播放視頻。loop 是循環播放；play 只播放一次，播完就暫停。

傳入多個視頻地址

createVideo() 方法的第一個參數除了傳入一個字符串類型的視頻地址外，還可以傳入字符串數組，作用就是兼容處理。

比如你的視頻資源只有 2.mp4，你希望可以先播放 1.mp4，沒有這個視頻再播放 2.mp4，就可以這樣寫：

createVideo(['1.mp4', '2.mp4'])

但通常我們不會這樣寫，通常我們會給同一個視頻提供不同的視頻格式，然后用這種方法傳入多個視頻地址。

因為有些瀏覽器不一定支持你想播放的地址，此時就可以做個保底處理。

設置視頻窗口尺寸

使用 createVideo() 方法創建完視頻后，可以通過 size(width, height) 設置視頻的寬高。

let video = null

function preload() {
  video = createVideo('assets/02.mp4')
  video.size(300, 600)
}

設置音量

使用 createVideo() 創建的視頻控件可以使用 volume() 設置視頻的音量，該方法接受1個參數，參數值在 0~1 之間。

let video = null

function preload() {
  video = createVideo('assets/02.mp4', videoLoaded)
}

function videoLoaded() {
  video.volume(0.5) // 將視頻音量設置為50%
}

方式2：用image控件播放視頻

一開始我也沒想到 image 控件可以播放視頻，誤打誤撞試出來的。

這次我就不錄屏了，工友們自己運行試試看吧。

let playing = false
let video = null
let button = null

function preload() {
  video = createVideo('assets/02.mp4')
}

function setup() {
  video.hide()
  createCanvas(568, 320)
  button = createButton('播放')
  button.mousePressed(toggleVid)
}

function draw() {
  image(video, 0, 0)
}

function toggleVid() {
  if (playing) {
    video.pause();
    button.html('播放');
  } else {
    video.loop();
    button.html('暫停');
  }
  playing = !playing;
}

上面的代碼中，我在 setup() 里使用了 video.hide() 方法將 createVideo() 創建出來的 <video> 元素隱藏起來，因為這次我們需要將視頻渲染到畫布中，所以不再需要 <video> 了。

接著我們在 draw() 里用 image 不斷刷新視頻，所以上面這樣寫是對的。

其他地方沒變化。

接入攝像頭

如果你的設備有攝像頭，p5.js 是支持調用攝像頭并將內容展示在畫布上的。

let capture

function setup() {
  createCanvas(480, 360)
  capture = createCapture(VIDEO)
  capture.hide()
}

function draw() {
  image(capture, 0, 0, capture.width, capture.height)
}

通過 createCapture() 方法創建一個包含攝像頭的音頻/視頻源 <video> 元素，把這個元素的內容放在 p5.js 的 image 控件里。

這個默認是顯示的，而且它是一個獨立的元素，默認和畫布分離。所以使用 capture.hide() 方法把 <video> 元素隱藏起來，不然頁面中會出現兩個視頻窗口。

其他做法和前面的【方式2】差不多，這里就不再啰嗦了。

推薦閱讀

《p5.js 光速入門》

《p5.js 使用npm安裝p5.js后如何使用？》

《p5.js 變換操作》

《p5.js 3D圖形-立方體》

《p5.js 開發點彩畫派的繪畫工具》

《p5.js畫布操作實戰：創建，綁定指定元素，動態調整大小，隱藏滾動條，刪除畫布》

點贊 + 關注 + 收藏 = 學會了

用說明：把代碼中的視頻路徑換成與自己的相對路徑或絕對路徑，播放器的窗口大小，根據需要修改高和寬的參數。

1.avi格式

復制代碼

代碼如下:

</embed>

</object>

2.mpg格式

復制代碼

代碼如下:

</object>

3.rm格式

復制代碼

代碼如下:

4.wmv格式

復制代碼

代碼如下:

</object>

5:最簡單的播放代碼

復制代碼

代碼如下:

6:有圖像的rm格式

復制代碼

代碼如下:

</OBJECT>

7:無圖像的rm格式：(如相聲，歌曲...)

復制代碼

代碼如下:

</object>

8:最簡單的media格式的播放器

復制代碼

代碼如下:

9:有圖像的media播放器，自動調用網上的插件

復制代碼

代碼如下:

10:無圖像的media播放器

復制代碼

代碼如下:

</object>

11:在線播放rm格式視頻代碼

復制代碼

代碼如下:

</object><br>

</object>

媒體播放器的外觀界面

在網頁中，你可以通過相關屬性來控制媒體播放器的哪些部分出現，哪些部分不出現。

媒體播放器包括如下元素：

VideoDisplayPanel：視頻顯示面板；

VideoBorder：視頻邊框；

ClosedCaptioningDisplayPanel；字幕顯示面板；

TrackBar；搜索欄；

ControlBarwithAudioandPositionControls：帶有聲音和位置控制的控制欄；

GoToBar：轉到欄；

DisplayPanel：顯示面板；

StatusBar：狀態欄；

下面的屬性用來決定顯示哪一個元素：

ShowControls屬性：是否顯示控制欄（包括播放控件及可選的聲音和位置控件）；

ShowAudioControls屬性：是否在控制欄顯示聲音控件（靜音按鈕和音量滑塊）；

ShowPositionControls屬性：是否在控制欄顯示位置控件（包括向后跳進、快退、快進、向前跳進、預覽播放列表中的每個剪輯）；

ShowTracker屬性：是否顯示搜索欄；

ShowDisplay屬性：是否顯示顯示面板（用來提供節目與剪輯的信息）；

ShowCaptioning屬性：是否顯示字幕顯示面板；

ShowGotoBar屬性：是否顯示轉到欄；

ShowStatusBar屬性：是否顯示狀態欄；

播放列表

媒體播放器提供下面的方法來訪問播放列表中的剪輯：

Next方法，跳到節目（播放列表）中的下一個剪輯；

Previous方法，跳回到節目中的上一個剪輯；

媒體播放器的一個特性是能夠預覽節目中的每一個剪輯，使用如下屬性：

PreviewMode屬性，決定媒體播放器當前是否處于預覽模式；

CanPreview屬性，決定媒體播放器能否處于預覽模式；

在windows媒體元文件中，可以為每一個剪輯指定預覽時間——PREVIEWDURATION,如果沒有指定，那么默認的預覽時間是10秒鐘。

你也可以用Windows媒體元文件來添加watermarks與banners，元文件也支持插入廣告時的無間隙流切換。

節目信息

使用GetMediaInfoString方法可以返回相關剪輯或節目的如下信息：

文件名：Filename

標題：Title

描述：Description

作者：Author

版權：Copyright

級別：Rating

URLs：logoicon、watermark、banner的地址

剪輯信息可以放在媒體文件中，也可以放在Windows媒體元文件中，或者兩者都放。如果在元文件中指定了剪輯信息，那么用GetMediaInfoString方法返回的就是元文件中的信息，而不會返回剪輯中包含的信息。

在元文件中，附加信息可以放置在每一個剪輯或節目的PARAM標簽中。你可以為每個剪輯添加任意多個PARAM標簽，用來存儲自定義的信息或鏈接到相關站點。在PARAM標簽中的信息可以通過GetMediaParameter方法來訪問。

下面的屬性返回有關大小和時間的信息：

ImageSourceHeight、ImageSourceWidth：返回圖像窗口的顯示尺寸；

Duration屬性，返回剪輯的長度(秒)，要檢測這個屬性是否包含有效的數值，請檢查IsDurationValid屬性。(對于廣播的視頻，其長度是不可預知的)。

字幕

你可以用.smi文件來為你的節目添加字幕。媒體播放器支持下面的屬性來處理字幕：

SAMIFileName屬性，指定.smi文件的名字；

SAMILang屬性，指定字幕的語言(如果沒有指定則使用第一種語言)；

SAMIStyle屬性，指定字幕的文字大小和樣式；

ShowCaptioning屬性，決定是否顯示字幕顯示面板；

腳本命令

伴隨音頻、視頻流，你可以在流媒體文件中加入腳本命令。腳本命令是多媒體流中與特定時間同步的多對Unicode串。第一個串標識待發命令的類型，第二個串指定要執行的命令。

當流播放到與腳本相關的時間時，控件會向網頁發送一個ScriptCommand事件，然后由事件處理進程來響應這個事件。腳本命令字符串會作為腳本命令事件的參數傳遞給事件處理器。

媒體播放器會自動處理下面類型的內嵌腳本命令：

1)URL型命令：當媒體播放器控件收到一個URL型的命令時，指定的URL會被裝載到用戶的默認瀏覽器。如果媒體播放器嵌在一個分幀的HTML文件中，URL頁可以裝載到由腳本命令指定的幀內。如果腳本命令沒有指定一個幀，將由DefaultFrame屬性決定將URL頁裝入哪一幀。

你可以通過設置InvokeURLs屬性來決定是否自動處理URL型的腳本命令。如果這個屬性的值為false，媒體播放器控件將忽視URL型命令。但是腳本命令事件仍會觸發，這就允許你有選擇地處理URL型命令。

URL型命令指定的是URL的相對地址。基地址是由BaseURL屬性指定的。媒體播放器控件傳送的腳本命令事件的命令參數是鏈接好的地址。

2)FILENAME型命令：當媒體播放器控件收到一個FILENAME型的命令時，它將FileName屬性設置為腳本命令提供的文件，之后媒體播放器會打開這個文件開始播放。媒體播放器控件總是自動處理FILENAME型命令，不象URL型命令，它們不能被禁止。

3)TEXT型命令：當媒體播放器控件收到一個TEXT型的命令時，它會將命令的內容顯示在控件的字幕窗口。內容可以是純文本的，也可以是HTML。

4)EVENT型命令：當媒體播放器控件收到一個EVENT型的命令時，它會在媒體元文件中搜索EVENT元素的NAME屬性。如果NAME屬性與腳本命令中的第二個字符串匹配，媒體播放器控件就執行包含在EVENT元素中的條目。

5)OPENEVENT型命令：當媒體播放器控件收到一個OPENEVENT型的命令時，它會在媒體元文件中檢查EVENT元素，并打開匹配的標題，但不播放，直到收到來自EVENT型命令的同名真實事件。

捕捉鍵盤和鼠標事件

EnableContextMenu與ClickToPlay屬性為用戶提供了在圖像窗口進行操作的方法。

如果EnableContextMenu屬性為true，在圖像窗口右擊鼠標可以打開關聯菜單，如果將ClickToPlay屬性設為true，用戶可以單擊圖像窗口進行播放與暫停的切換。

要接收鼠標移動和單擊事件，請將SendMouseMoveEvents和SendMouseClickEvents屬性設為true。鼠標事件有：

MouseDown，當用戶按下鼠標時產生；

MouseUp，當用戶釋放鼠標時產生；

MouseMove，當用戶移動鼠標時產生；

Click，當用戶在媒體播放器上單擊鼠標按鈕時產生；

DbClick，當用戶在媒體播放器上雙擊鼠標按鈕時產生；

要接收鍵盤事件，請將SendKeyboardEvents屬性設為true。鍵盤事件有：

KeyDown，當用戶按下一個鍵時產生；

KeyUp，當用戶釋放一個鍵時產生；

KeyPress，當用戶按下并釋放一個鍵時產生；

監測流狀態與網絡鏈接

流狀態屬性包括：

PlayState：播放狀態；

OpenState：打開狀態；

Bandwidth：帶寬；

支持的事件有：

OpenStateChange：打開狀態改變(僅當SendOpenStateChangeEvents屬性為true時觸發)

PlayStateChange：播放狀態改變(僅當SendPlayStateChangeEvents屬性為true時觸發)

EndOfStream：流結束時觸發；

NewStream：打開新流時觸發；

網絡接收屬性包括：

ReceptionQuality：接收質量；

ReceivedPackets：已經收到的包；

LostPackets：丟失的包；

監測緩沖的屬性有：

BufferingTime：緩沖時間；

BufferingCount：緩沖次數；

BufferingProgress：緩沖進程；

Buffering：緩沖事件；

錯誤處理

媒體播放器提供了內建的錯誤處理功能——在對話框或狀態欄顯示錯誤信息。另外，你可以自己添加錯誤處理程序。如果SendErrorEvents屬性設置為true，將不會顯示錯誤框，而是發送錯誤事件；如果SendErrorEvents屬性設置為false，將顯示錯誤框，而是發送錯誤事件。

媒體播放器支持下面的錯誤處理事件：

Error事件，指有危險性錯誤發生；

Warning事件，指發生了非危險性的錯誤；

當你的應用程序接收到一個錯誤事件，你可以檢測下面的屬性來確定具體的錯誤信息：

HasError：檢測目前的媒體播放器是否有錯誤；

ErrorCode：提供與該類型錯誤相關的代碼值；

ErrorDescription：提供錯誤的描述信息；

ErrorCorrection：指定媒體播放器對該類型的錯誤進行校正；

播放CD

媒體播放器將CD看作（在每個音軌的開頭具有標記的）單一音頻流。要在網頁中使用CD，你需要將FileName屬性設為CDAUDI，必須帶有冒號，如下所示：

復制代碼

代碼如下:

<HTML>

<HEAD><TITLE>CDAudioPlaybackExample</TITLE></HEAD>

<BODY>

<OBJECTID="MediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

WIDTH="320"

HEIGHT="508"

STYLE="position:absolute;left:0px;top:70px;">

<PARAMNAME="FileName"VALUE="cdaudi">

<PARAMNAME="AutoStart"VALUE="0">

<PARAMNAME="ShowControls"VALUE="1">

<PARAMNAME="ShowStatusBar"VALUE="1">

<PARAMNAME="ShowDisplay"VALUE="1">

</OBJECT>

</BODY>

</HTML>

之后你可以用Play方法播放CD了。

你可以在windows媒體元文件中指定播放順序以及每個音軌的信息。示例如下：

<ASXVERSION="3.0">

<TITLE>CDAudiowiththeMediaPlayer</TITLE>

<AUTHOR>WindowsMediaTechnologies</AUTHOR>

<ENTRY>

<TITLE>Track1:Title1</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="1"/>

<ENDMARKERNUMBER="2"/>

</ENTRY>

<ENTRY>

<TITLE>Track2:Title2</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="2"/>

<ENDMARKERNUMBER="3"/>

</ENTRY>

<ENTRY>

<TITLE>Track3:Title3</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="3"/>

<ENDMARKERNUMBER="4"/>

</ENTRY>

<ENTRY>

<TITLE>Track4:Title4</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="4"/>

</ENTRY>

</ASX>

在線咨詢

上一篇：List集合簡單總結
下一篇：抖音里怎么通過鏈接跳轉添加微信？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

帶你看好玩的CSS-霓虹燈按鈕

準備一個HTML標簽

CSS部分的代碼

文簡介

播放視頻文件

方式1：video元素播放視頻

基礎用法

播放方法

傳入多個視頻地址

設置視頻窗口尺寸

設置音量

方式2：用image控件播放視頻

接入攝像頭

推薦閱讀

您的項目需求