DUX主题美化记录

DUX主题是基于WordPress程序的主题，由themebetter团队原创开发，使用主题你需要安装WordPress程序。
支持夜间模式、快讯、专题、百度收录、人机验证、多级分类筛选，适用于垂直站点、科技博客、个人站，扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、自动缩略图等多种功能。

导航ico图标旋转

/*导航ico图标旋转*/
.icon:hover{transform:rotate(360deg)}

导航ico图标

.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}}

去除分类页面站点标题

修改路径：/themes/dux/functions-theme.php，搜索post_title_no_sitetitle_s，大概位置581。在添加一个if为如下代码：

 if ( is_category() ) {
// 在分类页面中只显示分类标题
$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)}

头像旋转

/*头像旋转*/
.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”标签，修改为下列代码

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

添加Mac样式的三个小圆点

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

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

2、CSS：添加到主题自定义CSS样式

/*Mac三个圆点*/
.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>
<!--底部波浪结束-->

文章底部版权声明

<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;">版权声明</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国际许可协议 [BY-NC-SA] 进行授权
文章名称：《%POSTNAME%》
文章链接：<a href="%POSTLINK%"style=" color: #A3A3A3; ">%POSTLINK%</a>
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。</div></fieldset></fieldset>

分享和标签效果

/*分享和标签效果*/
.shares a:hover,.article-tags a:hover{transform:translateY(-5px)}

相关推荐特效及字体居中显示

/*相关推荐特效及字体居中显示*/
.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}