带你看好玩的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控件播放视频

接入摄像头

推荐阅读

您的项目需求