打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
如何简单美化自己的博客(一)——背景音乐及雪花特效

1、给自己的博客添加背景音乐

  1. 打开网易云音乐网页版
  2. 搜索自己喜欢的歌曲
  3. 点击生成外链播放器(VIP歌曲受版权保护不可生成)
  4. 复制编辑器中的代码
  5. 将代码中的iframe标签名替换为embed
  6. 将更改好的代码放入博客侧边栏公告(需要提前申请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>

可以根据代码中的注释,由自己的喜好变更雪花符号、频率、颜色、大小等等

  • 效果如图:
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
博客首页背景音乐代码
博客代码
网易博客特效代码汇总
博客特效代码大全-11
用HTML实现简单的下雪特效
打开网页自动最大化的JavaScript代码特效
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服