优化博客园界面——添加正方体特效和音乐播放器，再加一个动态背景

一、准备工作

我们有些特效需要js代码，所以我们要首先获得js使用权

1、在博客原后台找到设置

 2、我是已经申请过了，没有申请的话这个红线位置有一个申请标志，点一下就可以

 二、展示效果

 

 三、代码实现

页面定制CSS代码：

/*动态背景*/
* {
      margin: 0;
      padding: 0;
    }

    body,html {
      height: 250%; /*改这里的话让js动态效果全局覆盖*/  
       100%;
    }
    

    #github-iframe {
      position: fixed;
      left: 32px;
      top: 32px;
    }

    #area-render {
      position: fixed;
       320px;
      height: 100px;
      right: 4px;
      bottom: 100px;
      border: dashed 1px #ccc;
    }
/* 定制公告栏音乐插件的样式 */
.aplayer {
    font-family: Arial,Helvetica,sans-serif;  /*音乐插件字体*/
    margin: 0px;  /*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
}
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116113119%E8%83%8C%E6%99%AF.jpg?a=1573904413500
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#home {
opacity: 0.80;
margin: 100px 100px 100px 100px;
}

/*最外层容器样式*/
        .wrap {
             100px;
            height: 100px;
            margin: 150px;
            position: relative;
        }
 
        /*包裹所有容器样式*/
        .cube {
             50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }
 
        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
             200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }
 
        /*定义所有图片样式*/
        .pic {
             200px;
            height: 200px;
        }
 
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
 
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
 
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
 
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
 
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
 
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
 
        /*定义小正方体样式*/
        .cube span {
            display: block;
             100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
 
        .cube .in_pic {
             100px;
            height: 100px;
        }
 
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
 
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
 
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
 
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
 
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
 
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
 
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
 
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
 
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
 
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
 
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
 
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }

博客侧边栏公告（支持HTML代码） （支持 JS 代码）：

<!-- 为博客底部添加音乐组件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,          <!-- 是否自动播放 -->
    showlrc: false,
    theme: '#FFFFE0',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    music: [{
            title: '故梦',
            author: '双笙',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/故梦.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
        },
        {
            title: '感谢你曾经来过',
            author: '阿涵',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/感谢你曾来过-阿涵_Ayo97-56628196.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: 'Another_day',
            author: '[韩]',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/Another_Day-《德鲁纳酒店》韩剧插曲-먼데이_키즈_Punch[韩]-72431812.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: 'YOU_(_l)',
            author: '[脸红思春期]',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/You_(_I)-脸红的思春期-55490604.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: 'YOU',
            author: 'Approaching',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/You-Approaching_Nirvana-49551169.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: '离岸',
            author: '苏晗',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/离岸-苏晗-72180883.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: '你就不要想起我',
            author: '田馥甄',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/你就不要想起我(CCTV音乐频道)-田馥甄-6840189.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: '你在孤独的风景',
            author: '本兮',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/你在看孤独的风景-本兮_单小源-2195301.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
{
            title: '你走以后',
            author: '尚士达',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/尚士达-你走以后.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
},
        {
            title: '心做',
            author: '双笙',
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/心做.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116065001%E7%8E%84%E8%A7%9E.jpg?a=1573887682645'
        }
    ]
});
ap.init();
</script>

<!-- 外层最大容器 -->
<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573956467368" class="pic">
</div>
<!--后面图片 -->
<div class="out_back">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116065001%E7%8E%84%E8%A7%9E.jpg?a=1573956467368" class="pic">
</div>
<!--左面图片 -->
<div class="out_left">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116113119%E8%83%8C%E6%99%AF.jpg?a=1573956467368" class="pic">
</div>
<!--右面图片 -->
<div class="out_right">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191117020840%E9%93%B6%E4%B8%B4.jpg" class="pic">
</div>
<!--上面图片 -->
<div class="out_top">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191117020852%E7%99%BD%E9%B9%BF.jpg" class="pic">
</div>
<!--下面图片 -->
<div class="out_bottom">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191117021107%E5%8F%8C%E7%AC%992.jpg" class="pic">
</div>

<!--小正方体 -->
<span class="in_front">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222271.jpg" class="in_pic">
</span>
<span class="in_back">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222332.jpg" class="in_pic">
</span>
<span class="in_left">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222393.jpg" class="in_pic">
</span>
<span class="in_right">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222464.jpg" class="in_pic">
</span>
<span class="in_top">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222535.jpg.png" class="in_pic">
</span>
<span class="in_bottom">
<img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170223006.jpg" class="in_pic">
</span>
</div>

</div>

页首 HTML 代码：

<div id="area">
<script type="text/javascript" color="255,255,224" pointColor="255,255,224" opacity='1' zIndex="10" count="450" src="https://files.cnblogs.com/files/kongbursi-2292702937/canvas-nest.js"></script>
</div>

1、对于音乐播放器你要改的就是：

{
            title: '感谢你曾经来过',   /*歌曲名字*/
            author: '阿涵',           /*歌手名字*/
            url: 'https://files.cnblogs.com/files/kongbursi-2292702937/感谢你曾来过-阿涵_Ayo97-56628196.ppt',   /*歌曲位置*/
            /*歌曲封面图片*/
            pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'  
},

对于图像就是：

 这个图片和歌曲的位置，我们可以先把歌曲和图片上传到博客园上，然后再引用它的地址(我采用的就是这个方式)

因为博客园后台不支持MP3格式上传，所以就对歌曲后缀名改一下(我改的ppt，只要歌曲内部编码不乱就行，到最后都是交给播放器，这是没有问题的)

博客园只支持上传文件，不能上传文件夹：

 上传完文件后，就要去拿文件链接：

 

 

 

 获取图片地址我用的谷歌浏览器，电脑自带浏览器没有这个选项(就鼠标移到图片上右键就可以了)

2、动态背景

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://files.cnblogs.com/files/kongbursi-2292702937/canvas-nest.js"></script>
color: 线条颜色，默认：‘0，0，0’；三个数字分别为(R,G,B),注意使用，分割(用的RGB颜色，上网搜就可以看各种颜色RGB值)
opacity: 线条透明度0~1,默认0.5
count: 线条总数量，默认150
zIndex: 背景的z-Index属性，css用于控制所在层的位置，默认-1

src那个属性中的地址就是动画库传送门

首先下载其中的canvas-nest.js,然后上传到博客园后台的文件，得到一个链接