美化博客园样式

Posted 2022-06-01 qq628b229e2808e

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美化博客园样式相关的知识，希望对你有一定的参考价值。

鼠标样式

放置页面定制 CSS 代码

第一套：

body&nbsp;cursor:&nbsp;url(
  "),&nbsp;auto;

body&nbsp;cursor:&nbsp;url("https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/ayuda.cur"),&nbsp;auto;

body&nbsp;cursor:&nbsp;url("https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur"),&nbsp;auto;

p&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:&nbsp;1.5em;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/texto.cur),&nbsp;auto;

a&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;transparent;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration:&nbsp;none;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/ayuda.cur),&nbsp;auto;

第二套：

body&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/normal.cur),auto;

p,&nbsp;.highlight-wrap&nbsp;code,&nbsp;.highlight-wrap,&nbsp;.hljs-ln-code&nbsp;.hljs-ln-line&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/texto.cur),auto;

.botui-actions-buttons-button,&nbsp;.headertop-down&nbsp;i,&nbsp;.faa-parent.animated-hover:hover&gt;.faa-spin,&nbsp;.faa-spin.animated,&nbsp;.faa-spin.animated-hover:hover,&nbsp;i.iconfont.js-toggle-search.iconsearch,&nbsp;#waifu&nbsp;#live2d,&nbsp;.aplayer&nbsp;svg,&nbsp;.aplayer.aplayer-narrow&nbsp;.aplayer-body,&nbsp;.aplayer.aplayer-narrow&nbsp;.aplayer-pic,&nbsp;button.botui-actions-buttons-button,&nbsp;#emotion-toggle,&nbsp;.emoji-item,&nbsp;.emotion-box,&nbsp;.emotion-item,&nbsp;.on-hover,&nbsp;.tieba-container&nbsp;span,&nbsp;#moblieGoTop,&nbsp;#changskin&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/No_Disponible.cur),auto;

第三套：

body&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(//cdn.jsdelivr.net/gh/qinhua/halo-theme-joe2.0@master/source/cursor/simple_cursor/normal.cur),auto;

a&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;url(//cdn.jsdelivr.net/gh/qinhua/halo-theme-joe2.0@master/source/cursor/simple_cursor/link.cur),auto;

点击特效

放置博客侧边栏公告（支持html代码）（支持 JS 代码），因为无论什么页面都需要特效代码

&lt;!--点击特效--&gt;
&lt;script&nbsp;src=&quot;https://cdn.bootcdn.net/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
&lt;script&nbsp;src=&quot;https://cdn.bootcdn.net/ajax/libs/mo-js/0.265.6/mo.min.js"></script>
&lt;script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;burst&nbsp;=&nbsp;new&nbsp;mojs.Burst(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius:&nbsp;5:&nbsp;40,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;children:&nbsp;shape:&nbsp;&quot;circle&quot;,&nbsp;fill:&nbsp;[&quot;red&quot;,&nbsp;&quot;cyan&quot;,&nbsp;&quot;orange&quot;],&nbsp;fillOpacity:&nbsp;.8,&nbsp;radiusX:&nbsp;3.5,&nbsp;radiusY:&nbsp;3.5
&nbsp;&nbsp;&nbsp;&nbsp;);
&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;click&quot;,&nbsp;function&nbsp;(a)&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;burst.tune(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x:&nbsp;a.pageX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y:&nbsp;a.pageY
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;).generate().replay()
&nbsp;&nbsp;&nbsp;&nbsp;);
&lt;/script>

音乐播放器

放置页脚 HTML 代码
div 中的data-id 就是音乐用户的来源，配置为自己的即可
如何配置呢，进入网易云音乐官网登录进去，找到自己的歌单，获取自己用户的 id 填入即可如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src=""></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3231125886" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

美化博客园样式【二】_css

放置页面定制 CSS 代码
修改音乐播放器的样式，默认的我是觉得不行的

.aplayer&nbsp;.aplayer-lrc&nbsp;pfont-size:&nbsp;12px;color:&nbsp;#fe9600&nbsp;!important;line-height:&nbsp;16px!important;height:&nbsp;16px!important;padding:&nbsp;0!important;margin:&nbsp;0!important;transition:&nbsp;all&nbsp;.5s&nbsp;ease-out;opacity:&nbsp;.4;overflow:&nbsp;hidden;

放置页面定制 CSS 代码
修改自动隐藏和引入显示

.aplayer.aplayer-fixedz-index:&nbsp;0&nbsp;!important;
.aplayer.aplayer-fixed&nbsp;&nbsp;.aplayer-body&nbsp;left:&nbsp;-66px&nbsp;!important;
.aplayer.aplayer-fixed&nbsp;&nbsp;.aplayer-body:hover&nbsp;left:&nbsp;0&nbsp;!important;

以上是关于美化博客园样式的主要内容，如果未能解决你的问题，请参考以下文章