Handome主題美化全攻略：圓角化+懸停特效+滾動條自定義

2026-09-03 15:01:42 [內部] 来源：狗頭發卡網

安鹿分享Handsome主題的主自定美化代碼，涵蓋多項視覺優化：首頁文章版式圓角化、题美停特圖片懸停放大、化全化悬頭像轉動放大及自動旋轉、攻略標題居中、圆角义文明重启外挂钢枪视频陰影效果，效滚王牌战争卡网科技還包括自定義滾動條樣式、动条鼠標點擊特效和評論框特效。主自定

所有修改通過後台自定義CSS或編輯主題文件實現，题美停特代碼簡潔易操作，化全化悬可晉升網站美觀度與交互體驗，攻略適合WordPress站長參考。圆角义

首頁文章版式圓角化

本項修改的效滚星际文明类的科幻小说是首頁文章版式，包括圖片使其四個角由方形變成圓角形狀。动条將以下代碼增補至後台主題設置自定義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。末日之城活动顺序表


<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)!important;    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}

首頁頭像放大並自動旋轉

本項修改的是首頁頭像，效果就是热血细胞破解版將首頁頭像放大，並使其自動旋轉。將以下代碼增補至後台主題設置自定義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 ，在後麵增補以下代碼。


<span class="hljs-tag"><<span class="hljs-name">script</span><span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span><span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.gmit.vip/blog/js/commentTyping.j
<scripttype="text/javascript"src="https://cdn.gmit.vip/blog/js/commentTyping.j
<scripttype="text/javascript"src="https://cdn.gmit.vip/blog/js/commentTyping.j