DUX主題是基于WordPress程序的主題，由themebetter團(tuán)隊(duì)原創(chuàng)開發(fā)，使用主題你需要安裝WordPress程序。
支持夜間模式、快訊、專題、百度收錄、人機(jī)驗(yàn)證、多級分類篩選，適用于垂直站點(diǎn)、科技博客、個人站，扁平化設(shè)計(jì)、簡潔白色、超多功能配置、會員中心、直達(dá)鏈接、自動縮略圖等多種功能。

導(dǎo)航ico圖標(biāo)旋轉(zhuǎn)

/*導(dǎo)航ico圖標(biāo)旋轉(zhuǎn)*/
.icon:hover{transform:rotate(360deg)}

導(dǎo)航ico圖標(biāo)

.icon {
width: 20px; 
height: 20px;
vertical-align: -5px;
fill: currentColor;
overflow: hidden;
transition: transform 0.3s ease;
}

<script type='text/javascript' src='//at.alicdn.com/t/c/font_4531430_gwdw2fkhet.js'></script>

logo掃光效果

/*logo掃光效果*/
.logo{position:relative;float:left;margin-right:10px;padding:5px 0;overflow:hidden}.logo a:before{content:"";position:absolute;left:-300px;width:250px;height:10px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-ms-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg);-webkit-animation:searchLights 2s ease-in 2s infinite;-o-animation:searchLights 2s ease-in 2s infinite;animation:searchLights 2s ease-in 2s infinite}@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}

去除分類頁面站點(diǎn)標(biāo)題

修改路徑：/themes/dux/functions-theme.php，搜索post_title_no_sitetitle_s，大概位置581。在添加一個if為如下代碼：

?if ( is_category() ) {
// 在分類頁面中只顯示分類標(biāo)題
$category_title = single_cat_title( '', false );
$html = $category_title;
}

首頁列表圖片放大效果

/* 首頁列表圖片放大效果 */
.excerpt:hover .thumb{transform:scale(1.2) rotate(-6deg);transition:transform 0.3s ease}.thumb{transition:transform 0.3s ease}

首頁列表彩色邊框

/*首頁列表彩色邊框*/
.excerpt{border:1px solid #dcd9d900}
.excerpt:hover{border-color:#ffaa00 #ff3f86 #94b21b #00d0ff;z-index:2;box-shadow:0 34px 20px -30px rgba(136,161,206,0.3);transform:translateY(-5px)}

頭像旋轉(zhuǎn)

/*頭像旋轉(zhuǎn)*/
.avatar{-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out}.avatar:hover{transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg)}

小工具懸停效果

/*小工具效果*/
.widget:hover{box-shadow:0 34px 20px -33px rgba(136,161,206,0.3);transform:translateY(-5px)}

文章列表描述添加超鏈接

修改路徑/themes/dux/excerpt.php，找到第二個class=”note”標(biāo)簽，修改為下列代碼

echo '<p><a class="note" href="' . get_permalink() . '">' . $res_desc . '</a></p>';

添加Mac樣式的三個小圓點(diǎn)

1、添加路徑/themes/dux/widgets/widget-posts.php，【echo $before_title.$title.$after_title; 】在此代碼下面添加

echo '<i class="mac"></i>';

2、CSS：添加到主題自定義CSS樣式

/*Mac三個圓點(diǎn)*/
.mac{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d !important;width:10px;height:10px;-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;float:right;right:55px;top:15px}

底部波浪效果（1）

1、添加路徑</themes/dux/footer.php>添加到最底部</body></html>前面

<div class="waveHorizontals">
<div id="waveHorizontal1" class="waveHorizontal"></div>
<div id="waveHorizontal2" class="waveHorizontal"></div>
<div id="waveHorizontal3" class="waveHorizontal"></div>
</div>

2、CSS：添加到主題自定義CSS樣式

/*底部波浪*/
.waveHorizontals{width: 100%;height: 20px;position: relative;overflow: hidden;z-index: 1;}
.ripro-dark .waveHorizontals{width: 100%; height: 20px; position: relative; overflow: hidden; z-index: 1; background-color:#181616 !important}
#waveHorizontal1{-webkit-mask: url(./img/sucaihu_001.svg); mask: url(./img/sucaihu_001.svg); animation-delay: -2s; animation-duration: 12s;}
#waveHorizontal1, #waveHorizontal2, #waveHorizontal3{background-image: linear-gradient(20deg,#18cef2 0,#448aff 100%)!important;}
.ripro-dark #waveHorizontal1, .ripro-dark #waveHorizontal2, .ripro-dark #waveHorizontal3{background-image: linear-gradient(20deg,#ececec 0,#bbbbbb 100%)!important}
.waveHorizontal{width: 200%; height: 100%; display: block; position: absolute; left: 0; bottom: 0; background-repeat: repeat-x; background-position: left bottom; background-size: 350px 100%; transform-origin: 0 100% 0; animation-name: move; animation-timing-function: linear; animation-iteration-count: infinite;}
@keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}
#waveHorizontal2{-webkit-mask: url(./img/sucaihu_002.svg); mask: url(./img/sucaihu_002.svg); animation-delay: -2s; animation-duration: 5s;}
#waveHorizontal3{-webkit-mask: url(./img/sucaihu_003.svg); mask: url(./img/sucaihu_003.svg); animation-delay: -1s; animation-duration: 3s;}

3、下載圖片并放到此目錄中 url(./img/sucaihu_003.svg)，路徑可自己修改（CSS樣式中）

底部波浪效果（2）

添加路徑</themes/dux/footer.php>添加到最底部</body></html>前面

<!--底部波浪開始-->
<div class="wiiuii_layout">
<svg class="editorial"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 
58-18 88-18s
58 18 88 18 
58-18 88-18 
58 18 88 18
v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/> 
</g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪結(jié)束-->

文章底部版權(quán)聲明

<fieldset style="border: 8px dashed;padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;" data-mce-style="border: 2px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;"><legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center" data-mce-style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 8px;">版權(quán)聲明</legend><fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;" data-mce-style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;"><div style="font-size: 14px; color: #A3A3A3; text-align: left;" data-mce-style="font-size: 14px; text-align: left;">本文采用知識共享 署名4.0國際許可協(xié)議 [BY-NC-SA] 進(jìn)行授權(quán)
文章名稱：《%POSTNAME%》
文章鏈接：<a href="%POSTLINK%"style=" color: #A3A3A3; ">%POSTLINK%</a>
本站資源僅供個人學(xué)習(xí)交流，請于下載后24小時內(nèi)刪除，不允許用于商業(yè)用途，否則法律問題自行承擔(dān)。</div></fieldset></fieldset>

分享和標(biāo)簽效果

/*分享和標(biāo)簽效果*/
.shares a:hover,.article-tags a:hover{transform:translateY(-5px)}

相關(guān)推薦特效及字體居中顯示

/*相關(guān)推薦特效及字體居中顯示*/
.relates-imagetext li {transition: transform 0.2s ease;}
.relates-imagetext li:hover{-webkit-transform:translateY(5px);transform:translateY(5px)}
.relates-imagetext a:nth-of-type(2){display:flex;justify-content:center;align-items:center;color:var(--tb--gray)}

Pre代碼自動換行

/*代碼自動換行*/
pre{white-space:pre-wrap;word-wrap:break-word}