DUX主題是基于WordPress程序的主題,由themebetter團(tuán)隊原創(chuàng)開發(fā),使用主題你需要安裝WordPress程序。
支持夜間模式、快訊、專題、百度收錄、人機(jī)驗證、多級分類篩選,適用于垂直站點、科技博客、個人站,扁平化設(shè)計、簡潔白色、超多功能配置、會員中心、直達(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}}
去除分類頁面站點標(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樣式的三個小圓點
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> <!--底部波浪結(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}
最新評論
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/
Hello, for your website do be displayed in searches your domain needs to be indexed in the Google Search Index. To add your domain to Google Search Index now, please visit https://searchregistry.net/