利用CSS3動(dòng)畫屬性“@keyframes ”可實(shí)現(xiàn)一些動(dòng)態(tài)特效，具體語法和參數(shù)可以網(wǎng)上自行學(xué)習(xí)。這篇文章主要是實(shí)踐應(yīng)用一下這個(gè)動(dòng)畫屬性，實(shí)現(xiàn)頁面淡入特效，在火狐24版、chrome29版、IE10中測(cè)試通過。IE9及以下瀏覽器不支持此特效。 淡入代碼：
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比方正網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式方正網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋方正地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
@keyframes fade-in {
0% {opacity: 0;}/*初始狀態(tài) 透明度為0*/
40% {opacity: 0;}/*過渡狀態(tài) 透明度為0*/
100% {opacity: 1;}/*結(jié)束狀態(tài) 透明度為1*/
}
@-webkit-keyframes fade-in {/*針對(duì)webkit內(nèi)核*/
0% {opacity: 0;}
40% {opacity: 0;}
100% {opacity: 1;}
}
#wrapper {
animation: fade-in;/*動(dòng)畫名稱*/
animation-duration: 1.5s;/*動(dòng)畫持續(xù)時(shí)間*/
-webkit-animation:fade-in 1.5s;/*針對(duì)webkit內(nèi)核*/
}
直接將上述代碼添加到主題style樣式文件中，并修改其中 #wrapper 為你的主題ID或類的名稱即可。
另外，可針對(duì)頁面某部分延長(zhǎng)顯示時(shí)間，比如側(cè)邊欄，再加上一句：
#sidebar {
animation: fade-in;
animation-duration: 4s;
-webkit-animation:fade-in 1.5s;
}
同理，可對(duì)頁面不同的部分設(shè)定不同的淡入顯示時(shí)間，實(shí)現(xiàn)分段顯示。
1、層級(jí)較深的網(wǎng)站，面包屑導(dǎo)航適合層級(jí)較深的網(wǎng)站，如果只有一級(jí)分類的話，通過主導(dǎo)航就可以起到快速定位的作用。比如“豆瓣網(wǎng)”類型扁平構(gòu)架的網(wǎng)站就沒有使用面包屑導(dǎo)航的作用。
2、獨(dú)立不交叉的網(wǎng)站機(jī)構(gòu)，由于面包屑網(wǎng)站導(dǎo)航路徑是線性結(jié)構(gòu)的，因此網(wǎng)站內(nèi)容必須劃分的非常清晰，且不存在交叉；否則，面包屑導(dǎo)航的路徑就不是唯一的，同一分類可能出現(xiàn)在不同的路徑中，讓用戶感到困惑。
在wordpress中添加面包屑導(dǎo)航的話，可以直接使用插件來實(shí)現(xiàn)，不過很多站長(zhǎng)都不喜歡用插件，還是認(rèn)為如果能用代碼解決的話是最理想的。我最近也找了一些關(guān)于面包屑導(dǎo)航的資料。下文中就有詳細(xì)解決怎么用代碼來實(shí)現(xiàn)wordpress面包屑導(dǎo)航：
一、在wordpress博客當(dāng)前主題的functions.php文件（沒有就創(chuàng)建一個(gè)）中添加以下代碼：
//面包屑導(dǎo)航
functionget_breadcrumbs()
{
global$wp_query;
if(!is_home()){
//StarttheUL
echo'ulclass="breadcrumbs"';
//AddtheHomelink
echo'liahref="'.get_settings('home').'"'.get_bloginfo('name').'/a/li';
if(is_category())
{
$catTitle=single_cat_title("",false);
$cat=get_cat_ID($catTitle);
echo"li?".get_category_parents($cat,TRUE,"?")."/li";
}
elseif(is_archive()!is_category())
{
echo"li?Archives/li";
}
elseif(is_search()){
echo"li?SearchResults/li";
}
elseif(is_404())
{
echo"li?404NotFound/li";
}
elseif(is_single())
{
$category=get_the_category();
$category_id=get_cat_ID($category[0]-cat_name);
echo'li?'.get_category_parents($category_id,TRUE,"?");
echothe_title('','',FALSE)."/li";
}
elseif(is_page())
{
$post=$wp_query-get_queried_object();
if($post-post_parent==0){
echo"li?".the_title('','',FALSE)."/li";
}else{
$title=the_title('','',FALSE);
$ancestors=array_reverse(get_post_ancestors($post-ID));
array_push($ancestors,$post-ID);
foreach($ancestorsas$ancestor){
if($ancestor!=end($ancestors)){
echo'li?ahref="'.get_permalink($ancestor).'"'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'/a/li';
}else{
echo'li?'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'/li';
}
}
}
}
//EndtheUL
echo"/ul";
}
}
二、在顯示面包屑導(dǎo)航的位置添加以下調(diào)用代碼：
?php
if(function_exists('get_breadcrumbs')){
get_breadcrumbs();
}
?
三、在主題的css樣式文件中添加以下樣式代碼：
ul.breadcrumbs{list-style:none;font-size:12px;}
ul.breadcrumbsli{float:left;margin-right:5px;}
Edge Animate是Adobe最新出品的制作HTML5動(dòng)畫的可視化工具，簡(jiǎn)單的可以理解為HTML5版本的Flash Pro。在之后的文章中，我會(huì)逐一的介紹這款新的HTML5動(dòng)畫神器。這篇文章先說一說如何把Edge Animate制作的HTML5動(dòng)畫作品嵌入到Wordpress中。
因?yàn)橹黝}缺少評(píng)論模板，你可以這樣：在single.php之類的文章詳情頁（一般主題僅有single.php和page.php是文章詳情頁），的之后某個(gè)地方（要考慮CSS布局）直接添加來調(diào)用Wordpress默認(rèn)的評(píng)論樣式，這個(gè)評(píng)論樣式不好看，沒關(guān)系你可以：1.修改默認(rèn)評(píng)論樣式的CSS；2.在WP后臺(tái)插件安裝頁面搜索有言之類的評(píng)論插件，裝上后，效果就好多了！
重慶分公司
重慶分公司
