p5.js 視頻播放指南

文簡(jiǎn)介

在剛接觸 p5.js 時(shí)我以為這只是一個(gè)藝術(shù)方向的 canvas 庫(kù)，沒(méi)想到它還支持視頻文件和視頻流的播放。

本文簡(jiǎn)單講講如何使用 P5.js 播放視頻。

播放視頻文件

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

方式1：video元素播放視頻

基礎(chǔ)用法

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

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

src: 視頻路徑（必傳）。可以傳一個(gè)字符串類型的視頻路徑；也可以傳入字符串?dāng)?shù)組類型，指定多個(gè)路徑支持不同瀏覽器。
callback: 回調(diào)函數(shù)（非必傳）。在視頻加載完成時(shí)觸發(fā)。

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

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

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

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

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

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

粗略講講上面這段代碼。

preload() 是 p5.js 提供的一個(gè)生命周期，我們通常會(huì)將“加載靜態(tài)資源”這個(gè)步驟放在 preload() 里執(zhí)行。在《p5.js光速入門(mén)》的圖片章節(jié)里介紹過(guò)。
setup() 是一個(gè)初始化的生命周期。
createVideo() 方法加載視頻。第二個(gè)參數(shù)傳入回調(diào)函數(shù) afterLoad，在加載完視頻資源后會(huì)執(zhí)行回調(diào)函數(shù)。
video.loop() 方法可以播放視頻。
video.pause() 方法可以暫停視頻。
noCanvas() 方法用來(lái)隱藏 <canvas> 元素，因?yàn)槲覀兪褂?createVideo() 會(huì)在頁(yè)面創(chuàng)建一個(gè) <video> 元素，所以我們就不需要 <canvas> 元素了。

播放方法

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

傳入多個(gè)視頻地址

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

比如你的視頻資源只有 2.mp4，你希望可以先播放 1.mp4，沒(méi)有這個(gè)視頻再播放 2.mp4，就可以這樣寫(xiě)：

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

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

因?yàn)橛行g覽器不一定支持你想播放的地址，此時(shí)就可以做個(gè)保底處理。

設(shè)置視頻窗口尺寸

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

let video = null

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

設(shè)置音量

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

let video = null

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

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

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

一開(kāi)始我也沒(méi)想到 image 控件可以播放視頻，誤打誤撞試出來(lái)的。

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

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() 創(chuàng)建出來(lái)的 <video> 元素隱藏起來(lái)，因?yàn)檫@次我們需要將視頻渲染到畫(huà)布中，所以不再需要 <video> 了。

接著我們?cè)?draw() 里用 image 不斷刷新視頻，所以上面這樣寫(xiě)是對(duì)的。

其他地方?jīng)]變化。

接入攝像頭

如果你的設(shè)備有攝像頭，p5.js 是支持調(diào)用攝像頭并將內(nèi)容展示在畫(huà)布上的。

let capture

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

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

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

這個(gè)默認(rèn)是顯示的，而且它是一個(gè)獨(dú)立的元素，默認(rèn)和畫(huà)布分離。所以使用 capture.hide() 方法把 <video> 元素隱藏起來(lái)，不然頁(yè)面中會(huì)出現(xiàn)兩個(gè)視頻窗口。

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

其一是 @keyframes

因?yàn)?strong>它限定了CSS 樣式和動(dòng)畫(huà)逐步從目前的樣式更改為新的樣式的變化過(guò)程。瀏覽器兼容的時(shí)候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個(gè)屬性，from和to，from里面的內(nèi)容定義動(dòng)畫(huà)開(kāi)始的狀態(tài)，to記錄動(dòng)畫(huà)結(jié)束的狀態(tài)。@keyframes后面緊跟的是動(dòng)畫(huà)的名字，這個(gè)可以自定義取名字，比如我取 gifname，頁(yè)面某個(gè)標(biāo)簽元素使用這個(gè)動(dòng)畫(huà)時(shí)候，就需要用到這個(gè)名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來(lái)表示動(dòng)畫(huà)的過(guò)程，可以用百分比的話，就可以把動(dòng)畫(huà)的內(nèi)容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個(gè)div元素上用到這個(gè)動(dòng)畫(huà)

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們?cè)赿iv元素中看到的animation就是我們要認(rèn)識(shí)的第二個(gè)屬性。animation其實(shí)是一堆屬性的簡(jiǎn)寫(xiě)。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實(shí)可以寫(xiě)成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動(dòng)畫(huà)名稱

這里是引入 @keyframes 動(dòng)畫(huà)的名稱。

animation-duration：動(dòng)畫(huà)的持續(xù)時(shí)間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動(dòng)畫(huà)的過(guò)度類型

屬性值 :默認(rèn)是 "ease"

linear：線性過(guò)渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過(guò)渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

step-start:馬上跳到動(dòng)畫(huà)每一結(jié)束幀的狀態(tài)

animation-delay：動(dòng)畫(huà)延遲時(shí)間

默認(rèn)是 0。

animation-iteration-count：動(dòng)畫(huà)循環(huán)次數(shù)

默認(rèn)是 1。屬性值infinite 代表無(wú)數(shù)次。

animation-direction：動(dòng)畫(huà)是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運(yùn)行

alternate：動(dòng)畫(huà)先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行

alternate-reverse：動(dòng)畫(huà)先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行

另外還有兩項(xiàng)屬性：

animation-fill-mode:設(shè)置動(dòng)畫(huà)播放后的效果

取值:

none:初始樣式,不改變默認(rèn)行為.(默認(rèn)行為)

forwards:動(dòng)畫(huà)播放結(jié)束后保持最后一個(gè)狀態(tài);

backwards:結(jié)束后保持第一個(gè)狀態(tài);

animation-play-state :檢索或設(shè)置對(duì)象動(dòng)畫(huà)的狀態(tài)

屬性值

animation-play-state:running | paused;

running:運(yùn)動(dòng)

paused: 暫停

animation-play-state:paused; 當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)動(dòng)畫(huà)停止，鼠標(biāo)移開(kāi)動(dòng)畫(huà)繼續(xù)執(zhí)行

到此為止，屬性我們都學(xué)習(xí)完了，開(kāi)始實(shí)踐部分：

首先準(zhǔn)備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個(gè)<li></li>標(biāo)簽里。所有l(wèi)i標(biāo)簽用ul標(biāo)簽包含起來(lái)。然后把ul放在一個(gè)div標(biāo)簽里，div設(shè)置成一張圖片的大小，然后通過(guò)逐幀移動(dòng)ul元素實(shí)現(xiàn)動(dòng)畫(huà)。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開(kāi)始時(shí)候的圖片了。

最關(guān)鍵的，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css動(dòng)畫(huà)</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動(dòng)畫(huà)不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點(diǎn)贊支持一下吧！

、變形

CSS3變形是一些效果的集合

如平移、旋轉(zhuǎn)、縮放、傾斜效果

每個(gè)效果都可以稱為變形（transform），它們可以分別操控元素發(fā)生平移、旋轉(zhuǎn)、縮放、傾斜等變化

語(yǔ)法：transform:[transform-function] *;

變形函數(shù)

translate()：平移函數(shù)，基于X、Y坐標(biāo)重新定位元素的位置

transform:translate(100px,0) x軸移動(dòng)

transform:translate(0,100px) y軸移動(dòng)

scale()：縮放函數(shù)，可以使任意元素對(duì)象尺寸發(fā)生變化

transform:scale(2,0) 設(shè)置X軸的縮放

transform:scale(0,2) 設(shè)置Y軸的縮放

rotate()：旋轉(zhuǎn)函數(shù)，取值是一個(gè)度數(shù)值

transform:rotate(30deg);

skew()：傾斜函數(shù)，取值是一個(gè)度數(shù)值

transform:skewX（ax）：表示只設(shè)置X軸的傾斜

transform:skewY（ay）：表示只設(shè)置Y軸的傾斜

注：rotate( )函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤?/p>

skew( )函數(shù)是傾斜，元素不會(huì)旋轉(zhuǎn)，會(huì)改變?cè)氐男螤?/p>

二、過(guò)度

transition呈現(xiàn)的是一種過(guò)渡，是一種動(dòng)畫(huà)轉(zhuǎn)換的過(guò)程，如漸現(xiàn)、漸弱、動(dòng)畫(huà)快慢等

CSS3 transition的過(guò)渡功能更像是一種“黃油”，通過(guò)一些CSS的簡(jiǎn)單動(dòng)作觸發(fā)樣式平滑過(guò)渡

語(yǔ)法：transition:[transition-property transition-duration transition-timing-function transition-delay ]

過(guò)渡屬性（ transition-property ）

定義轉(zhuǎn)換動(dòng)畫(huà)的CSS屬性名稱

IDENT：指定的CSS屬性（width、height、background-color屬性等）

all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會(huì)使用all

過(guò)渡所需的時(shí)間（ transition-duration ）

定義轉(zhuǎn)換動(dòng)畫(huà)的時(shí)間長(zhǎng)度，即從設(shè)置舊屬性到換新屬性所花費(fèi)的時(shí)間，單位為秒（s）

過(guò)渡動(dòng)畫(huà)函數(shù)（ transition-timing-function ）

指定瀏覽器的過(guò)渡速度，以及過(guò)渡期間的操作進(jìn)展情況，通過(guò)給過(guò)渡添加一個(gè)函數(shù)來(lái)指定動(dòng)畫(huà)的快慢方式

ease：速度由快到慢（默認(rèn)值）

linear：速度恒速（勻速運(yùn)動(dòng)）

ease-in：速度越來(lái)越快（漸顯效果）

ease-out：速度越來(lái)越慢（漸隱效果）

ease-in-out：速度先加速再減速（漸顯漸隱效果）

過(guò)渡延遲時(shí)間（ transition-delay ）

指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間去執(zhí)行過(guò)渡效果

正值：元素過(guò)渡效果不會(huì)立即觸發(fā)，當(dāng)過(guò)了設(shè)置的時(shí)間值后才會(huì)被觸發(fā)

負(fù)值：元素過(guò)渡效果會(huì)從該時(shí)間點(diǎn)開(kāi)始顯示，之前的動(dòng)作被截?cái)?/p>

0：默認(rèn)值，元素過(guò)渡效果立即執(zhí)行

三、animation動(dòng)畫(huà)簡(jiǎn)介

animation實(shí)現(xiàn)動(dòng)畫(huà)主要由兩個(gè)部分組成

通過(guò)類似Flash動(dòng)畫(huà)的關(guān)鍵幀來(lái)聲明一個(gè)動(dòng)畫(huà)

在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)實(shí)現(xiàn)一個(gè)更為復(fù)雜的動(dòng)畫(huà)效果

設(shè)置關(guān)鍵貞：

@keyframes spread {

0% {width:0;}

33% {width:23px;}

66% {width:46px;}

100% {width:69px;}

}

調(diào)用關(guān)鍵貞：

animation:animation-name animation–duration animation-timing-function

animation-delay animation-iteration-count animation-direction

animation-play-state animation-fill-mode;

動(dòng)畫(huà)的使用過(guò)程：

動(dòng)畫(huà)的播放次數(shù)（animation-iteration-count）

值通常為整數(shù)，默認(rèn)值為1

特殊值infinite，表示動(dòng)畫(huà)無(wú)限次播放

動(dòng)畫(huà)的播放方向（animation-direction）

normal，動(dòng)畫(huà)每次都是循環(huán)向前播放

alternate，動(dòng)畫(huà)播放為偶數(shù)次則向前播放

動(dòng)畫(huà)的播放狀態(tài)（animation-play-state）

running將暫停的動(dòng)畫(huà)重新播放

paused將正在播放的元素動(dòng)畫(huà)停下來(lái)

代碼展示：

<html>

<head>

</head>

<body>

</div>

</body>

</html>

margin: 0;

padding: 0;

}

/* 父div設(shè)置寬高 */

.box{

width: 80%;

height: 600px;

margin: 0px auto;

margin-top: 10px;

position: relative;

}

/* 所有的圖片設(shè)置 */

.box>img{

width: 300px;

height: 250px;

position: absolute;

border: 1px solid white;

box-shadow:5px 5px 5px rgba(0,0,0,.6);

border-radius: 20px;

}

/* 第一張圖片設(shè)置 */

.box>img:nth-of-type(1) {

right: 2;

top: 0px;

transform: rotate(48deg);

}

.box>img:nth-of-type(2){

left: 2px;

top: 10px;

transform: rotate(319deg);

}

.box>img:nth-of-type(3){

left: 500px;

top: 40px;

transform: rotate(278deg);

}

.box>img:nth-of-type(4){

left:250px;

top:40px;

transform: rotate(-50deg);

}

.box>img:nth-of-type(5){

top:300px;

transform: rotate(-80deg);

}

.box>img:nth-of-type(6){

left:700px;

top:300px;

transform: rotate(-260deg);

}

.box>img:nth-of-type(7){

left: 310px;

top: 300px;

transform: rotate(94deg);

}

.box>img:nth-of-type(8){

left: 460px;

top: 300px;

transform: rotate(205deg);

}

.box>img:nth-of-type(9){

left: 100px;

top: 210px;

transform: rotate(38deg);

}

.box>img:nth-of-type(10){

right:100px;

top:300px;

transform: rotate(-210deg);

}

.box>img:hover{

/* 圖片前置 */

z-index: 1;

/* 還原放大1.5倍 */

transform: rotate(360deg) scale(2);

transition:all 1s ease-in-out;

}

<!DOCTYPE html>

<head>

<title>QQ彩貝導(dǎo)航條</title>

</head>

<body>

<nav>

<h1>

</a>

</h1>

</div>

<ul>

<li><a href="#"><span class="iconOne"></span>返回商場(chǎng) | </a></li>

<li><a href="#"><span class="iconTwo"></span>積分商場(chǎng) | </a></li>

</ul>

</div>

<ul>

</ul>

</div>

</section>

</nav>

</div>

</body>

</html>

margin: 0;

padding:0;

}

li{

list-style: none;

}

text-decoration: none;

color: #787690;

}

/* 整個(gè)導(dǎo)航 */

nav{

height: 100px;

width: 100%;

margin: 0 auto;

position: relative;

background: linear-gradient(to bottom, #FFFFFF, rgba(204, 204, 204, 0.4));

}

/* 導(dǎo)航Logo部分 */

.topleft{

padding-top: 30px;

padding-left: 110px;

}

/* 中間整體部分 */

.topMiddle{

position: absolute;

left: 400px;

bottom: 20px;

height: 50px;

}

/* 導(dǎo)航中間文字 */

.topMiddle>ul>li{

float: left;

margin-right: 20px;

padding-top: 20px;

}

.topMiddle>ul>li>a:hover{

color:yellow;

}

/* 導(dǎo)航中間文字部分第一個(gè)li */

.iconOne{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

left: 0;

top:0;

background: url('../htmlNine/img/header_03.png') 2px 1px no-repeat;

}/* 導(dǎo)航中間文字部分第三個(gè)li */

.iconTwo{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

top:0;

background: url('../htmlNine/img/header_07.png') 2px 1px no-repeat;

}

/* 調(diào)用關(guān)鍵貞 */

.topMiddle>ul>li:nth-child(1)>a:hover .iconOne{

background: url('../htmlNine/img/header_05.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* 調(diào)用關(guān)鍵貞 */

.topMiddle>ul>li:nth-child(3)>a:hover .iconTwo{

background: url('../htmlNine/img/header_09.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* topRight */

/* 登錄部分所有l(wèi)i */

.topRight{

position: absolute;

left: 1380px;

bottom: 55px;

height: 40px;

}

.topRight>ul>li{

height: 25px;

width: 30px;

}

/* 登錄部分三個(gè)圖標(biāo) */

.topRight>ul>li:nth-child(1){

position: absolute;

right: 100px;

top:45px;

background: url('../htmlNine/img/iconsB_13.png') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(2){

position: absolute;

right: 150px;

top:45px;

background: url('../htmlNine/img/iconsB_12.gif') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(3){

position: absolute;

right:200px;

top:45px;

background: url('../htmlNine/img/iconsB_11.gif') 2px 1px no-repeat;

}

.topRight>ul>li:hover{

/* 變形 */

transform: rotate(720deg) scale(2);

/* 過(guò)度 */

transition:all 0.6s ease-in-out ;

}

/* 動(dòng)畫(huà)設(shè)置關(guān)鍵幀名稱identifier */

@keyframes identifier {

0%{width: 0;}

33%{width:23px;}

66%{width: 46px;}

100%{width: 69px;}

}

效果鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/duocaiqiang.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/QQcaibeidaohang.html

在線咨詢

上一篇：產(chǎn)品經(jīng)理的技術(shù)腦：html是什么意思？
下一篇：HTML5 Video(視頻)

您的項(xiàng)目需求

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

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

p5.js 視頻播放指南

文簡(jiǎn)介

播放視頻文件

方式1：video元素播放視頻

基礎(chǔ)用法

播放方法

傳入多個(gè)視頻地址

設(shè)置視頻窗口尺寸

設(shè)置音量

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

接入攝像頭

推薦閱讀

其一是 @keyframes

其二是 animation

您的項(xiàng)目需求