API地址

https://api.wxcsz.top

动态PPT背景

  • https://api.wxcsz.top/html/ppt.html
  • https://api.wxcsz.top/html/ppt2.html
  • https://api.wxcsz.top/html/ppt3.html
    分别对应了普通，樱花，雪花三种模式
    小妹在此感谢二次寒树大佬的图片以及樱道随机图片的思路

动态背景的调用

有两种调用方式

way1：修改网页头部

在网站有一个统一的header头部文件时，使用该方法把下面代码插入后即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<style>
    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div id="dynamic-background" style="width: 100%; height: 100%; position: fixed;z-index: -1;">
    <script>
        window.addEventListener("load", function(e){
            document.getElementById("dynamic-background").innerHTML = '<iframe src="https://api.wxcsz.top/html/ppt.html" width="100%" height="100%" style="border: 0;"></iframe>';
               });
</script>
</div>
</body>

way 2：在网页任意位置添加js代码

使用该方法只需把下方js代码放在网页任意位置（放在html里时注意添加script标签），甚至放在全局js文件里都行。

1
2
3
4
5
6
7
window.addEventListener("load", function(e){
    var obj = document.createElement("div");
    obj.style = "width:100%; height:100%; position:fixed; z-index:-1;";
    obj.innerHTML= '<iframe src="https://api.wxcsz.top/html/ppt.html" width="100%" height="100%" style="border: 0;"></iframe>';
    var first = document.body.firstChild; // 得到页面的第一个元素
    document.body.insertBefore(obj,first); // 在得到的第一个元素之前插入
});