1、給自己的博客添加背景音樂
- 打開網易云音樂網頁版
- 搜索自己喜歡的歌曲
- 點擊生成外鏈播放器（VIP歌曲受著作權保護不可生成）
- 復制編輯器中的代碼
- 將代碼中的iframe標簽名替換為embed
- 將更改好的代碼放入博客側邊欄公告（需要提前申請JS）
- 效果如下：
2、給博客頁面添加雪花特效
將以下代碼復制到頁腳HTML代碼編輯器中，代碼如下：
<script src="https://files.cnblogs.com/files/nthforsth/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script type="text/javascript">
window.onload = function () {
var minSize = 10; //最小字體
var maxSize = 30;//最大字體
var newOne = 400; //生成雪花間隔
var flakColor = "#ffffff"; //雪花顏色
var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定義一個雪花
var dhight = $(window).height(); //定義視圖高度
var dw =$(window).width()-80; //定義視圖寬度
setInterval(function(){
var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花
var startLeft = Math.random()*dw; //雪花生成是隨機的left值
var startOpacity = 0.7+Math.random()*0.3; //隨機透明度
var endTop= dhight-100; //雪花停止top的位置
var endLeft= Math.random()*dw; //雪花停止的left位置
var durationfull = 5000+Math.random()*3000; //雪花飄落速度不同
flak.clone().appendTo($("body")).css({
"left":startLeft ,
"opacity":startOpacity,
"font-size":sizeflak,
"color":flakColor
}).animate({
"top":endTop,
"left":endLeft,
"apacity":0.1
},durationfull,function(){
$(this).remove()
});
},newOne);
}
</script>
可以根據代碼中的注釋，由自己的喜好變更雪花符號、頻率、顏色、大小等等
- 效果如圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/230236.html
標籤：Html/Css