- 当前位置：首页 >遊戲攻略 >Handome主題美化全攻略：圓角化+懸停特效+滾動條自定義
游客发表
安鹿分享Handsome主題的主自定美化代碼 ，涵蓋多項視覺優化 ：首頁文章版式圓角化 、题美停特圖片懸停放大 、化全化悬頭像轉動放大及自動旋轉 、攻略標題居中 、圆角义apex视角动不了陰影效果 ，效滚apex双刀沙尘余烬是啥還包括自定義滾動條樣式、动条鼠標點擊特效和評論框特效 。主自定
所有修改通過後台自定義CSS或編輯主題文件實現，题美停特代碼簡潔易操作 ，化全化悬可晉升網站美觀度與交互體驗 ，攻略適合WordPress站長參考 。圆角义
首頁文章版式圓角化
本項修改的效滚apex辅助瞄准跟挂是首頁文章版式，包括圖片使其四個角由方形變成圓角形狀
。动条將以下代碼增補至後台主題設置 自定義CSS
<span class="hljs-selector-class">.panel</span>{<span class="hljs-attribute">border</span>: none;<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;}<span class="hljs-selector-class">.panel-small</span>{<span class="hljs-attribute">border</span>: none;<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;}<span class="hljs-selector-class">.item-thumb</span>{<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;}.panel{ border: none; border-radius: 15px;}.panel-small{ border: none; border-radius: 15px;}.item-thumb{ border-radius: 15px; }.panel{ border: none; border-radius: 15px;}.panel-small{ border: none; border-radius: 15px;}.item-thumb{ border-radius: 15px; }
首頁文章圖片得到焦點放大
本項修改的主自定是首頁文章圖片，將鼠標放到首頁頭圖後使其放大 。將以下代碼增補至後台主題設置 自定義CSS 。apex透视自瞄科技
<span class="hljs-selector-class">.item-thumb</span>{<span class="hljs-attribute">cursor</span>: pointer;<span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.6s</span>;}<span class="hljs-selector-class">.item-thumb</span><span class="hljs-selector-pseudo">:hover</span>{<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(<span class="hljs-number">1.05</span>);}<span class="hljs-selector-class">.item-thumb-small</span>{<span class="hljs-attribute">cursor</span>: pointer;<span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.6s</span>;}<span class="hljs-selector-class">.item-thumb-small</span><span class="hljs-selector-pseudo">:hover</span>{<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(<span class="hljs-number">1.05</span>);}.item-thumb{ cursor: pointer; transition: all 0.6s; }.item-thumb:hover{ transform: scale(1.05); }.item-thumb-small{ cursor: pointer; transition: all 0.6s;}.item-thumb-small:hover{ transform: scale(1.05);}.item-thumb{ cursor: pointer; transition: all 0.6s; }.item-thumb:hover{ transform: scale(1.05); }.item-thumb-small{ cursor: pointer; transition: all 0.6s;}.item-thumb-small:hover{ transform: scale(1.05);}
首頁頭像轉動並放大
本項修改的是首頁頭像，將鼠標放至頭像後使其轉動並放大
。將以下代碼增補至後台主題設置 自定義CSS
<span class="hljs-selector-class">.thumb-lg</span>{<span class="hljs-attribute">width</span>:<span class="hljs-number">130px</span>;}<span class="hljs-selector-class">.avatar</span>{-webkit-<span class="hljs-attribute">transition</span>: <span class="hljs-number">0.4s</span>;-webkit-<span class="hljs-attribute">transition</span>: -webkit-transform <span class="hljs-number">0.4s</span> ease-out;<span class="hljs-attribute">transition</span>: transform <span class="hljs-number">0.4s</span> ease-out;-moz-<span class="hljs-attribute">transition</span>: -moz-transform <span class="hljs-number">0.4s</span> ease-out;}<span class="hljs-selector-class">.avatar</span><span class="hljs-selector-pseudo">:hover</span>{<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotateZ</span>(<span class="hljs-number">360deg</span>);-webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotateZ</span>(<span class="hljs-number">360deg</span>);-moz-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotateZ</span>(<span class="hljs-number">360deg</span>);}<span class="hljs-selector-id">#aside-userspan.avatar{<span class="hljs-attribute">animation-timing-function</span>:<span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,.<span class="hljs-number">07</span>,<span class="hljs-number">1</span>)<span class="hljs-meta">!important</span>;<span class="hljs-attribute">border</span>:<span class="hljs-number">0</span> solid}<span class="hljs-selector-id">#aside-userspan.avatar:hover{<span class="hljs-attribute">transform</span>:<span class="hljs-built_in">rotate</span>(<span class="hljs-number">360deg</span>)<span class="hljs-built_in">scale</span>(<span class="hljs-number">1.2</span>);<span class="hljs-attribute">border-width</span>:<span class="hljs-number">5px</span>;<span class="hljs-attribute">animation</span>:avatar .<span class="hljs-number">5s</span>}.thumb-lg{ width:130px;}.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);}#aside-userspan.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1); border:0 solid}#aside-userspan.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s}.thumb-lg{ width:130px;}.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);}#aside-userspan.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid}#aside-userspan.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s}
首頁頭像放大並自動旋轉
本項修改的是首頁頭像
，效果就是Apex辅助瞄准0.6將首頁頭像放大 ，並使其自動旋轉 。將以下代碼增補至後台主題設置 自定義CSS
<span class="hljs-selector-class">.thumb-lg</span>{<span class="hljs-attribute">width</span>:<span class="hljs-number">130px</span>;}<span class="hljs-keyword">@-webkit-keyframes</span> rotation{<span class="hljs-selector-tag">from</span>{-webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(<span class="hljs-number">0deg</span>);}<span class="hljs-selector-tag">to</span>{-webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(<span class="hljs-number">360deg</span>);}}<span class="hljs-selector-class">.img-full</span>{-webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(<span class="hljs-number">360deg</span>);<span class="hljs-attribute">animation</span>: rotation <span class="hljs-number">3s</span> linear infinite;-moz-<span class="hljs-attribute">animation</span>: rotation <span class="hljs-number">3s</span> linear infinite;-webkit-<span class="hljs-attribute">animation</span>: rotation <span class="hljs-number">3s</span> linear infinite;-o-<span class="hljs-attribute">animation</span>: rotation <span class="hljs-number">3s</span> linear infinite;}.thumb-lg{ width:130px;}@-webkit-keyframes rotation{ from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}.img-full{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite;}.thumb-lg{ width:130px;}@-webkit-keyframes rotation{ from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}.img-full{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite;}
文章標題居中
本項修改的是文章標題 ，使其居中 。將以下代碼增補至後台主題設置 自定義CSS
<span class="hljs-selector-class">.panel</span><span class="hljs-selector-tag">h2</span>{<span class="hljs-attribute">text-align</span>: center;}<span class="hljs-selector-class">.post-item-foot-icon</span>{<span class="hljs-attribute">text-align</span>: center;}.panelh2{ text-align: center; }.post-item-foot-icon{ text-align: center;}.panelh2{ text-align: center; }.post-item-foot-icon{ text-align: center;}
首頁文章版式陰影化
本項修改的是首頁文章版式 ，包括圖片使其四周加上一層絢麗的陰影 。將以下代碼增補至後台主題設置 自定義CSS
<span class="hljs-selector-class">.panel</span>{<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);-moz-<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);}<span class="hljs-selector-class">.panel</span><span class="hljs-selector-pseudo">:hover</span>{<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);-moz-<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);}<span class="hljs-selector-class">.panel-small</span>{<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);-moz-<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);}<span class="hljs-selector-class">.panel-small</span><span class="hljs-selector-pseudo">:hover</span>{<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);-moz-<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span><span class="hljs-number">1px</span><span class="hljs-number">5px</span><span class="hljs-number">5px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);}<span class="hljs-selector-class">.app</span><span class="hljs-selector-class">.container</span>{<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span><span class="hljs-number">0</span><span class="hljs-number">30px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">112</span>, <span class="hljs-number">173</span>, <span class="hljs-number">0.35</span>);}.panel{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.panel:hover{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.panel-small{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.panel-small:hover{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.app.container { box-shadow: 0030pxrgba(255, 112, 173, 0.35);}.panel{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.panel:hover{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.panel-small{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.panel-small:hover{ box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35); -moz-box-shadow: 1px1px5px5pxrgba(255, 112, 173, 0.35);}.app.container { box-shadow: 0030pxrgba(255, 112, 173, 0.35);}
自定義滾動條滑塊
本項修改針對校驗器最右邊的滾動條滑塊 ，使其改變樣式 。將以下代碼增補至後台主題設置 自定義CSS
::-webkit-scrollbar{width: <span class="hljs-number">3px</span>;<span class="hljs-attribute">height</span>: <span class="hljs-number">16px</span>;<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">0</span>);}::-webkit-scrollbar-track{-webkit-box-shadow: inset <span class="hljs-number">0</span><span class="hljs-number">0</span><span class="hljs-number">6px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>);<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">0</span>);}::-webkit-scrollbar-thumb{border-radius: <span class="hljs-number">10px</span>;-webkit-<span class="hljs-attribute">box-shadow</span>: inset <span class="hljs-number">0</span><span class="hljs-number">0</span><span class="hljs-number">6px</span><span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,.<span class="hljs-number">3</span>);<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#555;::-webkit-scrollbar{ width: 3px; height: 16px; background-color: rgba(255,255,255,0);} ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 006pxrgba(0,0,0,0.3); border-radius: 10px; background-color: rgba(255,255,255,0);} ::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 006pxrgba(0,0,0,.3); background-color: #555;::-webkit-scrollbar{ width: 3px; height: 16px; background-color: rgba(255,255,255,0);} ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 006pxrgba(0,0,0,0.3); border-radius: 10px; background-color: rgba(255,255,255,0);} ::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 006pxrgba(0,0,0,.3); background-color: #555;
鼠標點擊特效
將以下代碼放在主題的handsome/component/footer.php中的之前即可 。
<span class="hljs-tag"><<span class="hljs-name">script</span><span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript"><span class="hljs-keyword">var</span> a_idx = <span class="hljs-number">0</span>;jQuery(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>)</span>{$(<span class="hljs-string">"body"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{<span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span><span class="hljs-built_in">Array</span>(<span class="hljs-string">"富強"</span>, <span class="hljs-string">"民主"</span>, <span class="hljs-string">"文明"</span>, <span class="hljs-string">"和諧"</span>, <span class="hljs-string">"自由"</span>, <span class="hljs-string">"平等"</span>, <span class="hljs-string">"公正"</span> ,<span class="hljs-string">"法治"</span>, <span class="hljs-string">"愛國"</span>, <span class="hljs-string">"敬業"</span>, <span class="hljs-string">"誠信"</span>, <span class="hljs-string">"友善"</span>);<span class="hljs-keyword">var</span> $i = $(<span class="hljs-string">""</span>).text(a[a_idx]);a_idx = (a_idx + <span class="hljs-number">1</span>) % a.length;<span class="hljs-keyword">var</span> x = e.pageX,y = e.pageY;$i.css({<span class="hljs-string">"z-index"</span>: <span class="hljs-number">999999999999999999999999999999999999999999999999999999999999999999999</span>,<span class="hljs-string">"top"</span>: y - <span class="hljs-number">20</span>,<span class="hljs-string">"left"</span>: x,<span class="hljs-string">"position"</span>: <span class="hljs-string">"absolute"</span>,<span class="hljs-string">"font-weight"</span>: <span class="hljs-string">"bold"</span>,<span class="hljs-string">"color"</span>: <span class="hljs-string">"#ff6651"</span>});$(<span class="hljs-string">"body"</span>).append($i);$i.animate({<span class="hljs-string">"top"</span>: y - <span class="hljs-number">180</span>,<span class="hljs-string">"opacity"</span>: <span class="hljs-number">0</span>},<span class="hljs-number">1500</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{$i.remove();});});});</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><scripttype="text/javascript">var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = newArray("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善"); var $i = $("").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); script><scripttype="text/javascript">var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = newArray("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善"); var $i = $("").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); script>
評論框特效
編輯主題文件handsome/component/footer.php ，在