當前位置：主頁 > 網站建設 > wordpress利用CSS3實現頁面淡入動畫特效,建站文章

wordpress利用CSS3實現頁面淡入動畫特效,建站文章

時間:2023-07-23 12:07:23 閱讀: 文章分類: 網站建設作者: 網站編輯員

導讀:建站文章建站文章利用CSS3動畫屬性“@keyframes ”可實現一些動態特效，具體語法和參數可以網上自行學習。這篇文章主要是實踐應用一下這個動畫屬性，實現頁面淡入特效，在火技術支持網站建站文章。

技術支持網站建站文章

利用CSS3動畫屬性“@keyframes ”可實現一些動態特效，具體語法和參數可以網上自行學習。這篇文章主要是實踐應用一下dede手機模板這個動畫屬性，實現頁面淡入特效，在火狐24版、chrome29版、IE10中測試通過。IE9及以下瀏覽器不支持此特效。

淡入代碼：

@keyframes fade-in {

0% {opacity: 0;}/*初始狀態透明度為0*/

40% {opacity: 0;}/*過渡狀態透明度為0*/

100% {opacity: 1;}/*結束狀態透明度為1*/

}

@-webkit-keyframes fade-dede,模板in {/*針對webkit內核*/

0% {opacity: 0;}

40% {opacity: 0;}

100% {opacity: 1;}

}

#wrapper {

animation: fade-in;/*動畫名稱*/

animation-duration: 1.5s;/*動畫持續時間*/

-webkit-animation:fade-in 1.5s;/*針對webkit內核*/

}

直接將上述代碼添加到主題style樣式文件中，并修改其中dede模板安裝 #wrapper 為你的主題ID或類的名稱即可。

另外，可針對頁面某部分延長顯示時間，比如側邊欄，再加上一句：

#sidebar {

animation: fade-in;

animation-duration: 4s;

-webkit-animation:fade-in 1.5s;

}

同理，可對頁面不同的部分設定不同的淡入顯示時間，實現分段顯示。

關鍵詞標簽: 建站頁面特效

聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-23 ，文章wordpress利用CSS3實現頁面淡入動畫特效,建站文章主要講述特效,頁面,建站網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_35456.html