美化博客园样式

【美化博客园样式】博观而约取,厚积而薄发。这篇文章主要讲述美化博客园样式相关的知识,希望能为你提供帮助。
鼠标样式



  • 放置??页面定制 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=https://www.songbingjia.com/android/& quot; https://cdn.bootcdn.net/ajax/libs/jquery/1.12.0/jquery.min.js"> < /script>
& lt; script& nbsp; src=https://www.songbingjia.com/android/& 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="http://img.readke.com/220601/121623O54-1.jpg"> < /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 代码??
  • 修改音乐播放器的样式,默认的我是觉得不行的


.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;



    推荐阅读