前端開發(fā)冷知識(shí)，css動(dòng)畫設(shè)置暫停 animatio

前端開發(fā)冷知識(shí)，css動(dòng)畫設(shè)置暫停 animation-play-state

說(shuō)前端很簡(jiǎn)單，我說(shuō)，越簡(jiǎn)單的東西做好越難。

我們經(jīng)常用css3寫一些動(dòng)畫，很是方便，下面普及一個(gè)前端開發(fā)冷知識(shí)，css動(dòng)畫設(shè)置暫停 animation-play-state，你用過(guò)嗎？

看代碼

鼠標(biāo)一上去動(dòng)畫暫停，是不是漲姿勢(shì)了？基于它你是否已經(jīng)有了更好動(dòng)畫實(shí)現(xiàn)的想法？

切圖網(wǎng)qietu.com ，專注前端開發(fā)

擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問(wèn)題！

大家可能會(huì)經(jīng)常使用animation來(lái)處理一些動(dòng)畫效果，所以對(duì)animation這個(gè)CSS屬性應(yīng)該是非常熟悉。自定義一個(gè)動(dòng)畫過(guò)程，然后用animation來(lái)設(shè)置它的動(dòng)畫時(shí)間，動(dòng)畫效果，動(dòng)畫方式等等。

今天我們來(lái)想想，我們是否可控制animation的暫停和繼續(xù)播放了？答案是可以的，怎么搞了？一個(gè)屬性：animation-play-state。

取值：paused（暫停）|running（播放）

竟然知道了用這個(gè)屬性可以實(shí)現(xiàn)，那處理方式就有好多了，下面我來(lái)想幾種常規(guī)思路。

一、通過(guò)JavaScript實(shí)現(xiàn)

JavaScript動(dòng)態(tài)設(shè)置嘛，當(dāng)用戶點(diǎn)擊按鈕時(shí)，將animation-play-state屬性設(shè)置到DOM上。效果就是下面這樣的：

核心代碼就是一段監(jiān)聽(tīng)點(diǎn)擊事件和設(shè)置animation-play-state屬性：

很容易想得到，其實(shí)用純CSS也可以實(shí)現(xiàn)animation的播放和暫停。

二、hover代替點(diǎn)擊

.stop:hover~.animation {
animation-play-state: paused;
}

三、checked偽類

radio標(biāo)簽的checked偽類，加上<label for>實(shí)現(xiàn)點(diǎn)擊響應(yīng)，這個(gè)在我之前的文章寫純CSS實(shí)現(xiàn)TAB切換時(shí)有詳細(xì)講的這個(gè)方法。這里同樣也可以用來(lái)響應(yīng)點(diǎn)擊，從而控制動(dòng)畫的狀態(tài)。

核心代碼如下：

#stop:checked ~ .animation {
animation-play-state: paused;
}
#play:checked ~ .animation {
animation-play-state: running;
}

最后總結(jié)一下：

除了上面提到的一些處理方式，我現(xiàn)在能想到的至少還有一個(gè)偽類能實(shí)現(xiàn)，大家動(dòng)動(dòng)腦。

TML 規(guī)范的開發(fā)是一個(gè)漸進(jìn)的過(guò)程，有時(shí)會(huì)出現(xiàn)問(wèn)題。隨著時(shí)間的推移，許多元素和屬性被添加到 HTML 中，直到后來(lái) Web 社區(qū)集體意識(shí)到有更好的方法時(shí)才被刪除。由于已棄用和過(guò)時(shí)的元素和屬性已經(jīng)存在于網(wǎng)絡(luò)上，因此許多現(xiàn)代瀏覽器繼續(xù)支持它們的使用。盡管它們可能仍然有效，但您應(yīng)該始終遵循最新版本的要求 HTML。不能保證瀏覽器對(duì)過(guò)時(shí)和棄用元素的支持會(huì)持續(xù)下去。有效但執(zhí)行不A力。

有幾種 HTML 元素和屬性是有效的并且應(yīng)該被使用，但是這些特性的實(shí)現(xiàn)隨著時(shí)間的推移而發(fā)生了變化，而 Web 開發(fā)社區(qū)的一些人還沒(méi)有注意到。HTMLtables就是一個(gè)很好的例子。table在某一時(shí)刻，使用 HTML元素創(chuàng)建網(wǎng)頁(yè)布局是很常見(jiàn)的。幾乎沒(méi)有人再這樣做了，CSS 比tables以往任何時(shí)候都更強(qiáng)大。但是，即使是經(jīng)驗(yàn)豐富的 Web 開發(fā)人員，也存在許多其他不太嚴(yán)重的誤用和語(yǔ)法錯(cuò)誤。以下是一些經(jīng)常被誤用得完全有效且有用的 HTML 功能以及正確實(shí)現(xiàn)的示例。

DOCTYPE

雖然在技術(shù)上不是 HTML 元素，但DOCTYPE聲明應(yīng)該是每個(gè) HTML 文檔中出現(xiàn)的第一件事。這個(gè)聲明是瀏覽器文檔中代碼的語(yǔ)言。過(guò)去，這個(gè)聲明包括幾個(gè)部分，可能會(huì)有點(diǎn)復(fù)雜。然而，在 HTML5 中，這很簡(jiǎn)單：

使用該聲明開始每個(gè)人 HTML 文檔，Web 瀏覽器將準(zhǔn)確地知道您要說(shuō)什么。

識(shí)別字符集

Web 瀏覽器必須知道用于編寫文檔的字符集才能正確呈現(xiàn)它。在絕大多數(shù)情況下，要聲明的正確字符集是UTF-8。如果您需要聲明其他任何內(nèi)容，很可能您已經(jīng)知道并知道如何去做。如果您不確定，請(qǐng)堅(jiān)持使用 UTF-8 是一個(gè)安全的選擇。在 HTML5 中聲明字符集比在以前的 HTML 版本中要簡(jiǎn)單得多。這是現(xiàn)代 HTML5 中聲明的正確語(yǔ)法：

只需將該行放到head您的 HTML 文檔中即可。

鏈接到版權(quán)信息

過(guò)去，通常使用meta標(biāo)簽來(lái)提供版權(quán)信息。但是，這不是處理此任務(wù)的正確方法，并且網(wǎng)絡(luò)爬蟲無(wú)法識(shí)別標(biāo)簽的這種標(biāo)簽外使用meta。識(shí)別版權(quán)的正確方法是使用HTML 文檔link中的元素，如下所示：head

您還可以在錨點(diǎn)和區(qū)域元素上使用rel="license"屬性值對(duì)。

停止注釋掉腳本

在過(guò)去，通常使用如下語(yǔ)法將腳本添加到 HTML 文檔中：

這是有充分理由的。在某一時(shí)刻，許多瀏覽器無(wú)法識(shí)別script標(biāo)簽，并試圖將標(biāo)簽之間的內(nèi)容呈現(xiàn)為 HTML，從而導(dǎo)致它們以純文本形式顯示腳本。為了避免這個(gè)問(wèn)題，開發(fā)人員會(huì)注釋掉文本，這樣它就不會(huì)被不受支持的瀏覽器呈現(xiàn)為 HTML。那些日子已經(jīng)離我們很遠(yuǎn)了。所有現(xiàn)代瀏覽器都支持該script標(biāo)簽。只需完全刪除 HTML 注釋括號(hào)，或者更好的是，將 JavaScript 編寫在單獨(dú)的文件中，然后使用script標(biāo)記將其導(dǎo)入到當(dāng)前的 HTML 文檔中，如下所示：

立即停止使用的 HTML 元素

還有不少元素曾經(jīng)是 HTML 規(guī)范的一部分，但后來(lái)被棄用或廢棄。以下是您可能仍在使用的八個(gè) HTML 元素，您應(yīng)該立即停止使用它們以及您可以使用的替代標(biāo)簽：

applet：如果您仍在使用此標(biāo)簽，那么您遇到的問(wèn)題比使用不推薦使用的標(biāo)簽更大，因?yàn)镴ava 正在作為一種 Web 編程語(yǔ)言退出。短期內(nèi)切換到objectorembed元素，但長(zhǎng)期停止在 web 上使用 Java。
bgsound: 這個(gè)元素曾經(jīng)被 IE 用來(lái)為網(wǎng)站添加背景音樂(lè)。背景音樂(lè)從一開始就是個(gè)壞主意。只是不要這樣做。如果您想將音頻內(nèi)容添加到您的網(wǎng)站，請(qǐng)使用audio標(biāo)簽，但不要將其設(shè)置為自動(dòng)播放。
frame：該frame元素及其所有相關(guān)元素已從 HTML 規(guī)范中刪除。不要使用它們。如果iframe您嘗試嵌入外部網(wǎng)頁(yè)，請(qǐng)使用CSS，如果您嘗試設(shè)計(jì)網(wǎng)站布局，請(qǐng)使用。
hgroup：在過(guò)去，您可以通過(guò)將標(biāo)題和副標(biāo)題包裝在適當(dāng)?shù)臉?biāo)題級(jí)別并將兩個(gè)標(biāo)題包裝在hgroup標(biāo)簽中來(lái)對(duì)標(biāo)題和副標(biāo)題進(jìn)行分組。但是，此元素已被棄用。相反，使用單個(gè)標(biāo)題元素來(lái)包含標(biāo)題和副標(biāo)題，將副標(biāo)題包裝在span標(biāo)簽中，并使用 CSS 來(lái)控制副標(biāo)題的樣式。
dir：目錄元素曾經(jīng)是什么 HTML 規(guī)范的一部分，用于表示文件或頁(yè)面的列表。改用錨元素的無(wú)序列表。
acronym：此元素已被棄用，請(qǐng)改用縮寫標(biāo)簽abbr。
isindex：此元素在網(wǎng)頁(yè)上創(chuàng)建了一個(gè)文本字段。但是，從 HTML 4.01 開始，可以使用呈現(xiàn)此標(biāo)記的form元素input和屬性來(lái)完成同樣的事情，type="text"這些標(biāo)記是不必要的和過(guò)時(shí)的。
plaintext, xmp, 和listing: 這些標(biāo)簽是以純文本而不是 HTML 顯示文本的不同方式。如果您想在 HTML 文檔中嵌入純文本，您有兩個(gè)選項(xiàng)，pre以及'code'。要以等寬字體顯示文本并保留空格 use pre，要顯示代碼，請(qǐng)使用該code元素并<通過(guò)>鍵入<和>替換每個(gè)符號(hào)來(lái)轉(zhuǎn)義所有符號(hào)。

由 CSS 更好地處理的任務(wù)

有許多元素和屬性曾經(jīng)是 HTML 的一部分，但執(zhí)行的任務(wù)更適合 CSS。這些元素已經(jīng)被棄用，取而代之的是讓 CSS 控制網(wǎng)頁(yè)呈現(xiàn)。

由 CSS 屬性替換的元素

曾經(jīng)使用 HTML 元素（如font、basefont、center、strike和u. 這些元素都已被棄用，取而代之的是 CSS 提供的字體和排版控件。要了解更多信息，請(qǐng)查看我們的字體和網(wǎng)頁(yè)排版教程。一個(gè)從未真正流行起來(lái)的獨(dú)特標(biāo)簽是multicol。此標(biāo)簽可用于將文本分成多列，類似于報(bào)紙的外觀。現(xiàn)在可以使用 CSScolumns屬性在現(xiàn)代瀏覽器中創(chuàng)建類似但更強(qiáng)大的效果。

由 CSS 屬性替換的屬性

廣泛的 HTML 元素屬性曾經(jīng)可用于控制 HTML 元素的呈現(xiàn)。幾乎所有這些標(biāo)簽都已被棄用，現(xiàn)在 CSS 提供了相同的功能。如果您不熟悉 CSS 以及如何實(shí)現(xiàn)這些屬性，我們的 CSS 教程將幫助您立即開始使用層疊樣式表。下面是一些更常用的屬性和現(xiàn)在可以用來(lái)實(shí)現(xiàn)相同結(jié)果的 CSS 屬性。

align：此屬性已被強(qiáng)大的 CSS 屬性組合所取代，包括text-align、float和vertical-align.
background和bgcolor：不要使用這些已棄用的 HTML 屬性應(yīng)用背景圖像和顏色，而是使用background-image和background-colorCSS 屬性。
height和width：這些屬性的使用在某些元素上仍然有效。但是，在所有情況下，都可以通過(guò)使用同名的 CSS 屬性來(lái)實(shí)現(xiàn)相同的效果。
clear：如果要強(qiáng)制一個(gè)元素清除一側(cè)或兩側(cè)的所有其他元素，請(qǐng)使用clearCSS 屬性而不是clearHTML 屬性。
border：雖然此屬性在許多元素上仍然可以正常工作，但使用borderCSS 屬性應(yīng)用邊框是更好的做法。

其他資源

在本文中，我們介紹了一些最常見(jiàn)的元素和屬性，這些元素和屬性使用不當(dāng)或已被棄用或過(guò)時(shí)。然而，我們真的只是觸及了冰山一角。如果您想了解已從 HTML 規(guī)范中刪除的所有 HTML 元素和屬性，請(qǐng)參閱以下資源：

在線咨詢

上一篇：游戲雙端程序員轉(zhuǎn)行互聯(lián)網(wǎng)后端半年，所接觸到的新技術(shù)們
下一篇：html網(wǎng)頁(yè)禁止復(fù)制粘貼文字怎么辦強(qiáng)制復(fù)制解除破解

您的項(xiàng)目需求

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

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