優化博客園界面——添加正方體特效和音樂播放器，再加一個動態背景

時間 2019-11-19

標籤優化博客界面添加正方體特效音樂播放再加一個動態背景简体版

原文原文鏈接

1、準備工做javascript

咱們有些特效須要js代碼，因此咱們要首先得到js使用權css

一、在博客原後臺找到設置html

二、我是已經申請過了，沒有申請的話這個紅線位置有一個申請標誌，點一下就能夠java

2、展現效果git

3、代碼實現github

頁面定製CSS代碼：web

  1 /*動態背景*/
  2 * {
  3       margin: 0;
  4       padding: 0;
  5     }
  6 
  7     body,html {
  8       height: 250%; /*改這裏的話讓js動態效果全局覆蓋*/  
  9       width: 100%;
 10     }
 11     
 12 
 13     #github-iframe {
 14       position: fixed;
 15       left: 32px;
 16       top: 32px;
 17     }
 18 
 19     #area-render {
 20       position: fixed;
 21       width: 320px;
 22       height: 100px;
 23       right: 4px;
 24       bottom: 100px;
 25       border: dashed 1px #ccc;
 26     }
 27 /* 定製公告欄音樂插件的樣式 */
 28 .aplayer {
 29     font-family: Arial,Helvetica,sans-serif;  /*音樂插件字體*/
 30     margin: 0px;  /*音樂插件與公告欄左邊的邊距，0px就是直接抵到公告欄左邊的邊上*/
 31     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);
 32     border-radius: 2px;
 33     overflow: hidden;
 34     -webkit-user-select: none;
 35     -moz-user-select: none;
 36     -ms-user-select: none;
 37     user-select: none;
 38     line-height: normal;
 39 }
 40 body {
 41 color: #000;
 42 background: url(https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116113119%E8%83%8C%E6%99%AF.jpg?a=1573904413500
 43 ) fixed;
 44 background-size: 100%;
 45 background-repeat: no-repeat;
 46 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 47 font-size: 12px;
 48 min-height: 101%;
 49 }
 50 #home {
 51 opacity: 0.80;
 52 margin: 100px 100px 100px 100px;
 53 }
 54 
 55 /*最外層容器樣式*/
 56         .wrap {
 57             width: 100px;
 58             height: 100px;
 59             margin: 150px;
 60             position: relative;
 61         }
 62  
 63         /*包裹全部容器樣式*/
 64         .cube {
 65             width: 50px;
 66             height: 50px;
 67             margin: 0 auto;
 68             transform-style: preserve-3d;
 69             transform: rotateX(-30deg) rotateY(-80deg);
 70             animation: rotate linear 20s infinite;
 71         }
 72  
 73         @-webkit-keyframes rotate {
 74             from {
 75                 transform: rotateX(0deg) rotateY(0deg);
 76             }
 77             to {
 78                 transform: rotateX(360deg) rotateY(360deg);
 79             }
 80         }
 81  
 82         .cube div {
 83             position: absolute;
 84             width: 200px;
 85             height: 200px;
 86             opacity: 0.8;
 87             transition: all .4s;
 88         }
 89  
 90         /*定義全部圖片樣式*/
 91         .pic {
 92             width: 200px;
 93             height: 200px;
 94         }
 95  
 96         .cube .out_front {
 97             transform: rotateY(0deg) translateZ(100px);
 98         }
 99  
100         .cube .out_back {
101             transform: translateZ(-100px) rotateY(180deg);
102         }
103  
104         .cube .out_left {
105             transform: rotateY(-90deg) translateZ(100px);
106         }
107  
108         .cube .out_right {
109             transform: rotateY(90deg) translateZ(100px);
110         }
111  
112         .cube .out_top {
113             transform: rotateX(90deg) translateZ(100px);
114         }
115  
116         .cube .out_bottom {
117             transform: rotateX(-90deg) translateZ(100px);
118         }
119  
120         /*定義小正方體樣式*/
121         .cube span {
122             display: block;
123             width: 100px;
124             height: 100px;
125             position: absolute;
126             top: 50px;
127             left: 50px;
128         }
129  
130         .cube .in_pic {
131             width: 100px;
132             height: 100px;
133         }
134  
135         .cube .in_front {
136             transform: rotateY(0deg) translateZ(50px);
137         }
138  
139         .cube .in_back {
140             transform: translateZ(-50px) rotateY(180deg);
141         }
142  
143         .cube .in_left {
144             transform: rotateY(-90deg) translateZ(50px);
145         }
146  
147         .cube .in_right {
148             transform: rotateY(90deg) translateZ(50px);
149         }
150  
151         .cube .in_top {
152             transform: rotateX(90deg) translateZ(50px);
153         }
154  
155         .cube .in_bottom {
156             transform: rotateX(-90deg) translateZ(50px);
157         }
158  
159         /*鼠標移入後樣式*/
160         .cube:hover .out_front {
161             transform: rotateY(0deg) translateZ(200px);
162         }
163  
164         .cube:hover .out_back {
165             transform: translateZ(-200px) rotateY(180deg);
166         }
167  
168         .cube:hover .out_left {
169             transform: rotateY(-90deg) translateZ(200px);
170         }
171  
172         .cube:hover .out_right {
173             transform: rotateY(90deg) translateZ(200px);
174         }
175  
176         .cube:hover .out_top {
177             transform: rotateX(90deg) translateZ(200px);
178         }
179  
180         .cube:hover .out_bottom {
181             transform: rotateX(-90deg) translateZ(200px);
182         }

View Code

博客側邊欄公告（支持HTML代碼）（支持 JS 代碼）：canvas

  1 <!-- 爲博客底部添加音樂組件 -->
  2 <div id="player"  class="aplayer"></div>
  3 <link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
  4 <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 
  5 
  6 <script type="text/javascript">
  7 var ap = new APlayer({
  8     element: document.getElementById('player'),
  9     narrow: false,
 10     autoplay: false,          <!-- 是否自動播放 -->
 11     showlrc: false,
 12     theme: '#FFFFE0',      <!-- 插件背景顏色，建議和你的公告欄背景色同樣，這樣融爲一體的感受 -->
 13     music: [{
 14             title: '故夢',
 15             author: '雙笙',
 16             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/故夢.ppt',
 17             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 18         },
 19         {
 20             title: '感謝你曾經來過',
 21             author: '阿涵',
 22             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/感謝你曾來過-阿涵_Ayo97-56628196.ppt',
 23             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 24 },
 25 {
 26             title: 'Another_day',
 27             author: '[韓]',
 28             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/Another_Day-《德魯納酒店》韓劇插曲-먼데이_키즈_Punch[韓]-72431812.ppt',
 29             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 30 },
 31 {
 32             title: 'YOU_(_l)',
 33             author: '[臉紅思春期]',
 34             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/You_(_I)-臉紅的思春期-55490604.ppt',
 35             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 36 },
 37 {
 38             title: 'YOU',
 39             author: 'Approaching',
 40             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/You-Approaching_Nirvana-49551169.ppt',
 41             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 42 },
 43 {
 44             title: '離岸',
 45             author: '蘇晗',
 46             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/離岸-蘇晗-72180883.ppt',
 47             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 48 },
 49 {
 50             title: '你就不要想起我',
 51             author: '田馥甄',
 52             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/你就不要想起我(CCTV音樂頻道)-田馥甄-6840189.ppt',
 53             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 54 },
 55 {
 56             title: '你在孤獨的風景',
 57             author: '本兮',
 58             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/你在看孤獨的風景-本兮_單小源-2195301.ppt',
 59             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 60 },
 61 {
 62             title: '你走之後',
 63             author: '尚士達',
 64             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/尚士達-你走之後.ppt',
 65             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'
 66 },
 67         {
 68             title: '心作',
 69             author: '雙笙',
 70             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/心作.ppt',
 71             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116065001%E7%8E%84%E8%A7%9E.jpg?a=1573887682645'
 72         }
 73     ]
 74 });
 75 ap.init();
 76 </script>
 77 
 78 <!-- 外層最大容器 -->
 79 <div class="wrap">
 80 <!--包裹全部元素的容器-->
 81 <div class="cube">
 82 <!--前面圖片 -->
 83 <div class="out_front">
 84 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573956467368" class="pic">
 85 </div>
 86 <!--後面圖片 -->
 87 <div class="out_back">
 88 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116065001%E7%8E%84%E8%A7%9E.jpg?a=1573956467368" class="pic">
 89 </div>
 90 <!--左面圖片 -->
 91 <div class="out_left">
 92 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116113119%E8%83%8C%E6%99%AF.jpg?a=1573956467368" class="pic">
 93 </div>
 94 <!--右面圖片 -->
 95 <div class="out_right">
 96 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191117020840%E9%93%B6%E4%B8%B4.jpg" class="pic">
 97 </div>
 98 <!--上面圖片 -->
 99 <div class="out_top">
100 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191117020852%E7%99%BD%E9%B9%BF.jpg" class="pic">
101 </div>
102 <!--下面圖片 -->
103 <div class="out_bottom">
104 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191117021107%E5%8F%8C%E7%AC%992.jpg" class="pic">
105 </div>
106 
107 <!--小正方體 -->
108 <span class="in_front">
109 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222271.jpg" class="in_pic">
110 </span>
111 <span class="in_back">
112 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222332.jpg" class="in_pic">
113 </span>
114 <span class="in_left">
115 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222393.jpg" class="in_pic">
116 </span>
117 <span class="in_right">
118 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222464.jpg" class="in_pic">
119 </span>
120 <span class="in_top">
121 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170222535.jpg.png" class="in_pic">
122 </span>
123 <span class="in_bottom">
124 <img src="https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_1911170223006.jpg" class="in_pic">
125 </span>
126 </div>
127 
128 </div>

View Code

頁首 HTML 代碼：瀏覽器

1 <div id="area">
2 <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>
3 </div>

View Code

一、對於音樂播放器你要改的就是：ide

1 {
2             title: '感謝你曾經來過',   /*歌曲名字*/
3             author: '阿涵',           /*歌手名字*/
4             url: 'https://files.cnblogs.com/files/kongbursi-2292702937/感謝你曾來過-阿涵_Ayo97-56628196.ppt',   /*歌曲位置*/
5             /*歌曲封面圖片*/
6             pic: 'https://images.cnblogs.com/cnblogs_com/kongbursi-2292702937/1592155/t_191116064929%E5%8F%8C%E7%AC%99.jpg?a=1573887682645'  
7 },

對於圖像就是：

這個圖片和歌曲的位置，咱們能夠先把歌曲和圖片上傳到博客園上，而後再引用它的地址(我採用的就是這個方式)

由於博客園後臺不支持MP3格式上傳，因此就對歌曲後綴名改一下(我改的ppt，只要歌曲內部編碼不亂就行，到最後都是交給播放器，這是沒有問題的)

博客園只支持上傳文件，不能上傳文件夾：

上傳完文件後，就要去拿文件連接：

獲取圖片地址我用的谷歌瀏覽器，電腦自帶瀏覽器沒有這個選項(就鼠標移到圖片上右鍵就能夠了)

二、動態背景

<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