Handome主题美化全攻略：圆角化+悬停特效+滚动条自定义

当前位置：首页 >科技 >Handome主题美化全攻略：圆角化+悬停特效+滚动条自定义_三角洲资透辅助器

Handome主题美化全攻略：圆角化+悬停特效+滚动条自定义_三角洲资透辅助器

发布时间：2026-07-22 14:26:54 来源：辅助科技网作者：安卓直装科技

安鹿分享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

上一篇：我要热血传奇全部的游戏功略(热血传奇第27集攻略)
下一篇：愚蠢的僵尸人气热度：18℃