鑰匙要點(diǎn)
-
可以使用CSS 3D和2D變換和CSS動(dòng)畫創(chuàng)建整頁動(dòng)畫，從而為Web內(nèi)容提供了更具性能和靈活性的替代方案。可以使用CSS動(dòng)畫來轉(zhuǎn)換HTML元素以實(shí)現(xiàn)這些效果。
- 。 在瀏覽體驗(yàn)期間，可以在戰(zhàn)略時(shí)期設(shè)置 動(dòng)畫，以使內(nèi)容過渡到頁面加載並在用戶單擊鏈接時(shí)看不見的視圖。設(shè)置動(dòng)畫將頁面內(nèi)容轉(zhuǎn)換為視圖的最佳位置是元素頂部。 AnimationEnd事件可用於檢測動(dòng)畫何時(shí)完成，然後觸發(fā)導(dǎo)航事件。
- Internet Explorer（Internet Explorer 10支持CSS 3D和2D變換和CSS動(dòng)畫）等現(xiàn)代瀏覽器。通過利用GPU的功能並與常規(guī)JavaScript進(jìn)行異步運(yùn)行，這些技術(shù)為Web內(nèi)容提供了更具性能和靈活的替代方案。 >我已經(jīng)討論過如何使用CSS 3D變換以及以前文章中的CSS動(dòng)畫和過渡。 在本文中，我想通過描述可以在導(dǎo)航過程中使用的“全頁動(dòng)畫”的概念來為這些技術(shù)介紹一個(gè)更“非常規(guī)”的用例，以增加瀏覽的流動(dòng)性和連續(xù)性。我們的目標(biāo)是獲得無縫的瀏覽體驗(yàn)，當(dāng)用戶訪問頁面並在單擊鏈接或執(zhí)行相關(guān)操作時(shí)，內(nèi)容順暢地顯示出視圖。
- 這些效果可以通過使用CSS動(dòng)畫轉(zhuǎn)換HTML 元素來實(shí)現(xiàn)。但是，此用例提出了一些我們認(rèn)為值得討論的考慮因素，例如佈局和尺寸對轉(zhuǎn)換的效果，以及如何適當(dāng)?shù)臅r(shí)間頁導(dǎo)航，以便它們與我們的動(dòng)畫正確融合。 > >本文中的代碼示例使用IE10 Release Preview支持的未解決的CSS標(biāo)記；其他瀏覽器可能需要CSS動(dòng)畫的供應(yīng)商前綴，而CSS會(huì)轉(zhuǎn)換所使用的屬性。
CSS變換是在HTML DOM元素的風(fēng)格屬性上定義的。例如，沿其z軸旋轉(zhuǎn)45度的元素的標(biāo)記看起來像這樣： >將轉(zhuǎn)換附加到HTML文檔的#element {
transform: rotateZ(45deg);
}
body {
transform: rotateZ(45deg);
}讓我們看一下將轉(zhuǎn)換應(yīng)用於身體元素時(shí)的頁面前後拍攝的鏡頭：
應(yīng)用旋轉(zhuǎn)（45DEG）轉(zhuǎn)換為文檔的身體元素。
對於三維變換，CSS轉(zhuǎn)換規(guī)範(fàn)定義了可以在我們轉(zhuǎn)換的元素的母體上指定的透視屬性。在轉(zhuǎn)換內(nèi)容的元素時(shí)，必須將其應(yīng)用於位於DOM層次結(jié)構(gòu)中上方的元素。這樣做很簡單：
html {
perspective: 500px;
} 將旋轉(zhuǎn)（45DEG）轉(zhuǎn)換為的透視圖：。
>我們可以在人體元素上操縱轉(zhuǎn)化 - 原始特性以獲得有趣的結(jié)果。讓我們看一下幾個(gè)示例：
上面的標(biāo)記將沿x旋轉(zhuǎn)作為人體元素設(shè)置，同時(shí)使用轉(zhuǎn)化原孔將旋轉(zhuǎn)的起源轉(zhuǎn)移到元素的底部。有效地，這將文檔的內(nèi)容“進(jìn)入”了這樣的屏幕：
body {
transform-origin: 50% 100%;
transform: rotateX(45deg);
}
>
>我們還可以在文檔的根部元素上操縱透視 - 原始屬性，以實(shí)現(xiàn)離軸投影效應(yīng)。將的樣式更改為：>
我們的頁面現(xiàn)在看起來像這樣：
html {
perspective: 500px;
perspective-origin: 90% 50%;
}
在下面，您可以在應(yīng)用轉(zhuǎn)換之前和之後查看結(jié)果。
請注意，內(nèi)容如何實(shí)際上並不在窗口底部，而是在視口外的某個(gè)時(shí)候。這是CSS變換的預(yù)期行為：
正常佈置，然後沿屏幕上某個(gè)地方的底部邊緣旋轉(zhuǎn)。您還會(huì)注意到，內(nèi)容的實(shí)際腳印已經(jīng)擴(kuò)展（查看“後圖”圖片中的滾動(dòng)條），以適應(yīng)變換的內(nèi)容（我們正在使用透視圖投影的事實(shí)使此效果更加多發(fā)音）。>那麼，在將轉(zhuǎn)換應(yīng)用於我們的身體元素時(shí)，我們?nèi)绾翁幚砣我獬叽绲膬?nèi)容？自定義調(diào)整所有內(nèi)容，以確保身體的大小不會(huì)擴(kuò)大超過一定量可能是不現(xiàn)實(shí)的。取而代之的是，我們可以使用簡單的HTML/CSS模式，該模式使我們能夠?qū)⑸眢w元素的大小固定到瀏覽器窗口的大小，並在包裝??器
#element {
transform: rotateZ(45deg);
}
>下面的插圖顯示了頁面垂直滾動(dòng)時(shí)發(fā)生的情況，然後我們將旋轉(zhuǎn)（45DEG）直接轉(zhuǎn)換為文檔的
元素（左）（左）和使用包裝模式（右）： >
>通過利用上述模式並設(shè)置CSS隨時(shí)使用百分比值轉(zhuǎn)換，我們可以以一致的方式影響我們的
元素，而不論其內(nèi)容的大小如何。>整理了將CSS轉(zhuǎn)換到元素的複雜性後，CSS動(dòng)畫是下一步。通過遵循上述原則，我們可以創(chuàng)建動(dòng)畫，以有趣的方式將我們的Web內(nèi)容視為視圖（或從視圖中刪除）。
考慮此基本@keyframes規(guī)則：
應(yīng)用於元素時(shí)，此動(dòng)畫將導(dǎo)致其左側(cè)旋轉(zhuǎn)。當(dāng)應(yīng)用於使用我們的包裝器模式的元素時(shí)，視覺結(jié)果會(huì)更有趣。該文檔實(shí)際上將從瀏覽器窗口可見區(qū)域的外部旋轉(zhuǎn)，然後旋轉(zhuǎn)到完整視圖：
body {
transform: rotateZ(45deg);
}
同樣，我們可以撰寫動(dòng)畫，這些動(dòng)畫會(huì)流暢地從視圖中刪除我們的Web內(nèi)容。例如，如果我們希望我們的頁面在旋轉(zhuǎn)時(shí)消失到遠(yuǎn)處，我們可以使用類似的東西：>
#element {
transform: rotateZ(45deg);
}
視覺結(jié)果為：
>由於我們可以利用CSS動(dòng)畫的全部功能來影響我們的整個(gè)Web內(nèi)容，因此我們在生成這些頁面效果方面具有很大的靈活性（而且我們當(dāng)然不限於僅使用CSS變換）。但是，一旦我們構(gòu)成了要應(yīng)用於內(nèi)容的效果，我們?nèi)绾问顾鼈冊陧撁鎸?dǎo)航過程中觸發(fā)？
將動(dòng)畫附加到>
>我們的目標(biāo)是在瀏覽器體驗(yàn)期間在戰(zhàn)略時(shí)期使用觸發(fā)動(dòng)畫，以使內(nèi)容過渡的外觀在頁面加載並在用戶單擊鏈接上時(shí)的視圖時(shí)將其視為視圖。。
>在身體元素中添加動(dòng)畫的第一個(gè)直觀位置是Onload JavaScript事件。然而，事實(shí)證明，當(dāng)on load火災(zāi)實(shí)際上為時(shí)已晚時(shí)添加動(dòng)畫。當(dāng)我們頁面中的整個(gè)內(nèi)容完成加載時(shí)（包括任何圖像或其他帶寬密集型資源），此事件實(shí)際上會(huì)觸發(fā)。將動(dòng)畫附加到帶寬密集的頁面上的onload將導(dǎo)致我們的內(nèi)容顯示“正常”，然後動(dòng)畫觸發(fā)並將內(nèi)容重新包含到視圖中。不完全是我們目標(biāo)的效果。> 或者，我們可以利用當(dāng)瀏覽器完成內(nèi)容的DOM結(jié)構(gòu)時(shí)觸發(fā)的Domcontentloaded事件（但有可能在資源完成加載之前）。 IE測試驅(qū)動(dòng)器domcontentloaded演示說明了這兩個(gè)事件之間的區(qū)別。但是，在具有復(fù)雜的Web內(nèi)容的情況下，現(xiàn)代瀏覽器可能會(huì)選擇執(zhí)行“漸進(jìn)式”渲染，並在加載整個(gè)DOM樹之前顯示頁面。在這些情況下，視覺結(jié)果將類似於Onload方案。
>設(shè)置一個(gè)動(dòng)畫的最佳位置，該動(dòng)畫過渡我們的頁面內(nèi)容是元素的頂部。這樣可以確保動(dòng)畫隨著內(nèi)容的渲染而開始正確（並且內(nèi)容的啟動(dòng)位置將是我們所選動(dòng)畫的關(guān)鍵幀的開始位置）。這種方法的一個(gè)令人愉悅的副作用是，動(dòng)畫實(shí)際上可以掩蓋可能與復(fù)雜內(nèi)容一起發(fā)生的任何進(jìn)行性渲染，重新分析或資源加載。>設(shè)置動(dòng)畫，使我們的內(nèi)容過渡出來也很有趣。人們可以假設(shè)我們可以將onclick處理程序附加到我們內(nèi)容中所有感興趣的元素上（例如所有標(biāo)籤），並且只需在回調(diào)函數(shù)中設(shè)置相關(guān)的動(dòng)畫屬性（Animation-name，Animation-Duration等） 。但是，如果我們實(shí)際上沒有延遲導(dǎo)航的發(fā)生，我們將不會(huì)看到我們的預(yù)期流體過渡。 這是利用CSS動(dòng)畫規(guī)範(fàn)中描述的動(dòng)畫事件的好機(jī)會(huì)。特別是，我們可以使用AnimationEnd事件來檢測動(dòng)畫何時(shí)完成，然後觸發(fā)導(dǎo)航（例如，通過設(shè)置window.location.href）。因此，我們的onclick將觸發(fā)“刪除從視圖”動(dòng)畫，並在
>我們創(chuàng)建了一個(gè)演示和教程，以使CSS變換和動(dòng)畫充滿活力，以提供深度和示例，超出了我們在此處顯示的內(nèi)容。該教程本身在頁面導(dǎo)航期間使用了全頁動(dòng)畫，該動(dòng)畫在Windows 8上的Internet Explorer 10以及Chrome和Firefox的最新版本中使用。
>簡單地享受頁面到頁面的動(dòng)畫，使用“繼續(xù)……”鏈接在每個(gè)頁面的右下角中瀏覽教程的頁面。
>
>將其包裹起來CSS變換和CSS動(dòng)畫是兩個(gè)強(qiáng)大的功能集，可實(shí)現(xiàn)更豐富，更身臨其境的網(wǎng)絡(luò)體驗(yàn)。通過少量努力，您可以創(chuàng)建網(wǎng)頁（甚至是靜態(tài)的頁面），以提供流暢且?guī)缀躅愃茟?yīng)用的導(dǎo)航體驗(yàn)。 如果您喜歡閱讀這篇文章，那麼您會(huì)喜歡學(xué)習(xí)；從大師那裡學(xué)習(xí)新鮮技能和技術(shù)的地方。成員可以立即訪問SitePoint的所有電子書和互動(dòng)在線課程，例如實(shí)用的CSS。
全頁CSS動(dòng)畫上經(jīng)常詢問問題> CSS動(dòng)畫和JavaScript動(dòng)畫之間的關(guān)鍵區(qū)別是什麼？ CSS動(dòng)畫和JavaScript動(dòng)畫具有與動(dòng)畫Web元素的相同目的，但它們具有一些關(guān)鍵差異。 CSS動(dòng)畫更容易實(shí)現(xiàn)，尤其是對於簡單的動(dòng)畫。當(dāng)瀏覽器的渲染引擎處理時(shí)，它們也更加友好。但是，與JavaScript動(dòng)畫相比，CSS動(dòng)畫的控制力和靈活性有限。另一方面，JavaScript動(dòng)畫提供了更多的控制和靈活性，可以進(jìn)行複雜的動(dòng)畫。它們可以實(shí)時(shí)暫停，逆轉(zhuǎn)或操縱，也可以響應(yīng)用戶互動(dòng)。
>
>我如何使我的CSS動(dòng)畫響應(yīng)？>使CSS動(dòng)畫響應(yīng)響應(yīng)涉及相對單位喜歡百分比或視口單元，而不是像像素這樣的絕對單位。這樣可以確保動(dòng)畫尺寸正確，而不管屏幕尺寸如何。您還可以使用媒體查詢根據(jù)特定的屏幕尺寸或設(shè)備類型調(diào)整動(dòng)畫。
>>我可以將CSS動(dòng)畫與svg？
一起使用，是的，CSS動(dòng)畫可以與SVG一起使用（可擴(kuò)展向量圖形）。 SVG擁有自己的CSS屬性集，可以動(dòng)畫，例如填充，中風(fēng)和轉(zhuǎn)換。與對常規(guī)的HTML元素進(jìn)行動(dòng)畫相比，這允許更複雜，有趣的動(dòng)畫。
>為什麼我的CSS動(dòng)畫在某些瀏覽器中不起作用？
>並非所有瀏覽器都支持所有CSS動(dòng)畫屬性。例如，Internet Explorer不支持動(dòng)畫觸時(shí)屬性。為了確?？鐬g覽器兼容性，您可以在動(dòng)畫屬性之前使用-webkit-，-moz-，-o-和-ms-等供應(yīng)商前綴。您還可以使用諸如AutopRefixer之類的工具自動(dòng)添加這些前綴。 >
>如何優(yōu)化我的CSS動(dòng)畫的性能？>
>以優(yōu)化CSS動(dòng)畫的性能，您可以限制動(dòng)畫屬性，尤其是觸發(fā)佈局的動(dòng)畫屬性會(huì)更改寬度，高度和邊距。而是使用僅觸發(fā)複合變化（例如變換和不透明度）的屬性。您還可以使用Will-Change屬性將可能是動(dòng)畫化的屬性通知瀏覽器。
>>我可以使用CSS？
用CSS動(dòng)畫。這是因?yàn)樗谄渲抵g沒有中間狀態(tài)。但是，您可以通過對不透明度和可見性屬性進(jìn)行動(dòng)畫效果來實(shí)現(xiàn)類似的效果。 如何使用CSS創(chuàng)建一個(gè)循環(huán)的動(dòng)畫？我可以控制CSS動(dòng)畫的速度嗎？財(cái)產(chǎn)。此屬性定義了動(dòng)畫完成一個(gè)週期的時(shí)間長度。
>>我如何暫停CSS動(dòng)畫？
您可以使用Animation-Play-State屬性暫停CSS動(dòng)畫。通過將其值設(shè)置為暫停，動(dòng)畫將停止運(yùn)行。 >我可以使用CSS？ 對背景圖像屬性進(jìn)行動(dòng)畫動(dòng)畫，而不可以CSS來動(dòng)畫。但是，您可以使用不透明度屬性在多個(gè)背景圖像之間逐漸消失來實(shí)現(xiàn)類似的效果。
以上是如何使用CSS創(chuàng)建整頁動(dòng)畫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機(jī)制通過標(biāo)記-清除算法自動(dòng)管理內(nèi)存，以減少內(nèi)存洩漏風(fēng)險(xiǎn)。引擎從根對像出發(fā)遍歷並標(biāo)記活躍對象，未被標(biāo)記的則被視為垃圾並被清除。例如，當(dāng)對像不再被引用（如將變量設(shè)為null），它將在下一輪迴收中被釋放。常見的內(nèi)存洩漏原因包括：①未清除的定時(shí)器或事件監(jiān)聽器；②閉包中對外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。 V8引擎通過分代回收、增量標(biāo)記、並行/並發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時(shí)間。開發(fā)時(shí)應(yīng)避免不必要的全局引用、及時(shí)解除對象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
如何在node.js中提出HTTP請求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。 1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請求；2.axios是基於Promise的第三方庫，語法簡潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用於簡化異步請求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基於Promise且語法簡單
JavaScript數(shù)據(jù)類型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時(shí)復(fù)制副本，因此互不影響；引用類型如對象、數(shù)組和函數(shù)存儲(chǔ)的是內(nèi)存地址，指向同一對象的變量會(huì)相互影響。判斷類型可用typeof和instanceof，但需注意typeofnull的歷史問題。理解這兩類差異有助於編寫更穩(wěn)定可靠的代碼。
JavaScript時(shí)間對象，某人構(gòu)建了一個(gè)eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本週的JavaScript新聞！本週我們將重點(diǎn)關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時(shí)間對象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開發(fā)者工具。讓我們開始吧！ Oracle與Deno的商標(biāo)之爭Oracle試圖註冊“JavaScript”商標(biāo)的舉動(dòng)引發(fā)爭議。 Node.js和Deno的創(chuàng)建者RyanDahl已提交請願(yuàn)書，要求取消該商標(biāo)，他認(rèn)為JavaScript是一個(gè)開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
React與Angular vs Vue：哪個(gè)JS框架最好？
Jul 05, 2025 am 02:24 AM
選哪個(gè)JavaScript框架最好？答案是根據(jù)需求選擇最適合的。 1.React靈活自由，適合需要高度定制、團(tuán)隊(duì)有架構(gòu)能力的中大型項(xiàng)目；2.Angular提供完整解決方案，適合企業(yè)級應(yīng)用和長期維護(hù)的大項(xiàng)目；3.Vue上手簡單，適合中小型項(xiàng)目或快速開發(fā)。此外，是否已有技術(shù)棧、團(tuán)隊(duì)規(guī)模、項(xiàng)目生命週期及是否需要SSR也都是選擇框架的重要因素?？傊?，沒有絕對最好的框架，適合自己需求的就是最佳選擇。
立即在JavaScript中立即調(diào)用功能表達(dá)式（IIFE）
Jul 04, 2025 am 02:42 AM
IIFE（ImmediatelyInvokedFunctionExpression）是一種在定義後立即執(zhí)行的函數(shù)表達(dá)式，用於變量隔離和避免污染全局作用域。它通過將函數(shù)包裹在括號中使其成為表達(dá)式，並緊隨其後的一對括號來調(diào)用，如(function(){/code/})();。其核心用途包括：1.避免變量衝突，防止多個(gè)腳本間的命名重複；2.創(chuàng)建私有作用域，使函數(shù)內(nèi)部變量不可見；3.模塊化代碼，便於初始化工作而不暴露過多變量。常見寫法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本，但需注意：必須使用表達(dá)式、結(jié)
處理諾言：鏈接，錯(cuò)誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機(jī)制，理解鍊式調(diào)用、錯(cuò)誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。 1.鍊式調(diào)用通過.then()返回新Promise實(shí)現(xiàn)異步流程串聯(lián)，每個(gè).then()接收上一步結(jié)果並可返回值或Promise；2.錯(cuò)誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，並可在catch中返回默認(rèn)值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個(gè)完成即返回）和Promise.allSettled()（等待所有完成）
什麼是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線體驗(yàn)。 1.它允許開發(fā)者手動(dòng)存儲(chǔ)如腳本、樣式表、圖片等資源；2.可根據(jù)請求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個(gè)緩存；4.通過ServiceWorker監(jiān)聽fetch事件實(shí)現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用於離線支持、加快重複訪問速度、預(yù)加載關(guān)鍵資源及後臺(tái)更新內(nèi)容；6.使用時(shí)需注意緩存版本控制、存儲(chǔ)限制及與HTTP緩存機(jī)制的區(qū)別。
