Handome主题美化全攻略 ：圆角化+悬停特效+滚动条自定义_和平精英科技直装
游戏攻略 2026-07-22 07:24:22
0
安鹿分享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); 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，在