說(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ī)思路。
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的播放和暫停。
.stop:hover~.animation {
animation-play-state: paused;
}
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)的示例。
雖然在技術(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ō)什么。
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 文檔中即可。
過(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 文檔中,如下所示:
還有不少元素曾經(jīng)是 HTML 規(guī)范的一部分,但后來(lái)被棄用或廢棄。以下是您可能仍在使用的八個(gè) HTML 元素,您應(yīng)該立即停止使用它們以及您可以使用的替代標(biāo)簽:
有許多元素和屬性曾經(jīng)是 HTML 的一部分,但執(zhí)行的任務(wù)更適合 CSS。這些元素已經(jīng)被棄用,取而代之的是讓 CSS 控制網(wǎng)頁(yè)呈現(xiàn)。
曾經(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)大的效果。
廣泛的 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 屬性。
在本文中,我們介紹了一些最常見(jiàn)的元素和屬性,這些元素和屬性使用不當(dāng)或已被棄用或過(guò)時(shí)。然而,我們真的只是觸及了冰山一角。如果您想了解已從 HTML 規(guī)范中刪除的所有 HTML 元素和屬性,請(qǐng)參閱以下資源:
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。