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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          前端開發(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)簽:

          1. applet:如果您仍在使用此標(biāo)簽,那么您遇到的問(wèn)題比使用不推薦使用的標(biāo)簽更大,因?yàn)镴ava 正在作為一種 Web 編程語(yǔ)言退出。短期內(nèi)切換到objectorembed元素,但長(zhǎng)期停止在 web 上使用 Java。
          2. bgsound: 這個(gè)元素曾經(jīng)被 IE 用來(lái)為網(wǎng)站添加背景音樂(lè)。背景音樂(lè)從一開始就是個(gè)壞主意。只是不要這樣做。如果您想將音頻內(nèi)容添加到您的網(wǎng)站,請(qǐng)使用audio標(biāo)簽,但不要將其設(shè)置為自動(dòng)播放。
          3. frame:該frame元素及其所有相關(guān)元素已從 HTML 規(guī)范中刪除。不要使用它們。如果iframe您嘗試嵌入外部網(wǎng)頁(yè),請(qǐng)使用CSS,如果您嘗試設(shè)計(jì)網(wǎng)站布局,請(qǐng)使用。
          4. 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)題的樣式。
          5. dir:目錄元素曾經(jīng)是什么 HTML 規(guī)范的一部分,用于表示文件或頁(yè)面的列表。改用錨元素的無(wú)序列表。
          6. acronym:此元素已被棄用,請(qǐng)改用縮寫標(biāo)簽abbr
          7. isindex:此元素在網(wǎng)頁(yè)上創(chuàng)建了一個(gè)文本字段。但是,從 HTML 4.01 開始,可以使用呈現(xiàn)此標(biāo)記的form元素input和屬性來(lái)完成同樣的事情,type="text"這些標(biāo)記是不必要的和過(guò)時(shí)的。
          8. 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 元素(如fontbasefontcenterstrikeu. 這些元素都已被棄用,取而代之的是 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 屬性。

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

          其他資源

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


          主站蜘蛛池模板: 国产精品久久久久一区二区| 国产精品制服丝袜一区| 国产精品一区二区AV麻豆| 亚洲国产精品一区第二页| 午夜影视日本亚洲欧洲精品一区| 国产一区二区三区夜色| 日韩精品一区二区三区四区 | 国产综合无码一区二区色蜜蜜| 国产麻豆精品一区二区三区| 国产成人一区二区三区免费视频| 波多野结衣电影区一区二区三区| 成人精品一区二区三区中文字幕| 国精产品一区一区三区| 国产精品视频一区二区三区| 无码少妇一区二区三区芒果| 亚洲一区二区三区在线视频| 久久久国产精品亚洲一区 | 久久国产精品免费一区| 少妇无码一区二区三区| 国产成人免费一区二区三区| 精品一区二区三区免费视频| 亚洲高清日韩精品第一区| 日韩在线视频一区二区三区| 亚洲色无码一区二区三区| 日本成人一区二区三区| 精品一区二区三区在线观看l| 国产AV午夜精品一区二区三| 国产精品自拍一区| 精品在线一区二区三区| 亚欧色一区W666天堂| 在线观看国产一区二区三区| 亚洲天堂一区二区| V一区无码内射国产| 一本大道在线无码一区| 亚洲一区二区三区偷拍女厕| 综合无码一区二区三区四区五区| 色老板在线视频一区二区| 日本精品视频一区二区三区| 亚洲视频一区在线| 嫩B人妻精品一区二区三区| 人妻精品无码一区二区三区|