利用HTML自制鬼灭之刃动态壁纸

先上效果图

 

 

 

实现思路：

先写好一个HTML网页，其中包括：

1. 左边定时的自制闹钟（什么素材都不需要，存手打代码，耗时最多的一部分）
2. 等大的壁纸图片（最好比桌面还大一点，这样可以实现壁纸浮动）
3. 调好自己喜欢的配色
4. 使用Wallpaper打开该HTML文件，Wallpaper的版本可以根据自己喜好下载

代码过多，下面只放上Js 页面控制代码，若有需要的朋友，下方评论我就好了

Js 代码

$(function(){
    //旋转表盘上的数字
    rotateZ(".secend",60);
    rotateZ(".minute",60);
    rotateZ(".hour",24);
    rotateZ(".luanma",72);
    
    //获取当前时间并创建动画
    getTimer();

    //背景图片切换
    nextBackground(5000);

    //背景浮动(图片大小都为2400 x 1350)
    moveBackground(90);
});

//旋转表盘上的数字
function rotateZ(selector,num){
    var $selects = $(selector);
    for(i=0;i<num;i++){
        $selects[i].style.transform = "rotateZ("+ (-i*(360/num)) +"deg)";
    }
}

//获取当前时间并创建动画
function getTimer(){
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var secend = date.getSeconds();
    var secendKeyframes = "@keyframes secendRotate{"+
        "from{"+
            "transform: rotateZ("+ (-1+6*secend) +"deg);"+
        "}"+
        "to{"+
            "transform: rotateZ("+ (-1+6*secend+360) +"deg);"+
        "}"+
    "}";
    var minuteKeyframes = "@keyframes minuteRotate{"+
        "from{"+
            "transform: rotateZ("+ (-2.5+6*minute) +"deg);"+
        "}"+
        "to{"+
            "transform: rotateZ("+ (-2.5+6*minute+360) +"deg);"+
        "}"+
    "}";    
    var hourKeyframes = "@keyframes hourRotate{"+
        "from{"+
            "transform: rotateZ("+ (-7+15*hour) +"deg);"+
        "}"+
        "to{"+
            "transform: rotateZ("+ (-7+15*hour+360) +"deg);"+
        "}"+
    "}";
    document.styleSheets[1].insertRule(secendKeyframes,0);
    document.styleSheets[1].insertRule(minuteKeyframes,0);
    document.styleSheets[1].insertRule(hourKeyframes,0); 
}

//背景浮动(图片大小都为2400 x 1350)
function moveBackground(frequency){
    var top = 0;
    var left = 0;
    var toward_1 = "down";
    var toward_2 = "right";
    setInterval(function(){
        $("body")[0].style.backgroundPosition = -left+"px "+ (-top) +"px";
        //垂直浮动
        if(toward_1=="down"){
            top++;
            if(top == 242){
                toward_1="up";
            }
        }else if(toward_1=="up"){
            top--;
            if(top == 0){
                toward_1="down";
            }
        }
        //水平
        if(toward_2 == "right"){
            left++;
            if(left == 432){
                toward_2 = "left";
            }
        }else if(toward_2 = "left"){
            left--;
            if(left == 0){
                toward_2 = "right";
            }
        }
    },frequency)
}

//背景图片切换
function nextBackground(frequency){
    var backgrounds = ["image/甘露寺1.jpg","image/善逸1.jpg","image/炭治郎1.jpg","image/蝴蝶忍2.jpg","image/炭治郎2.jpg",
                        "image/善逸3.jpg","image/炭治郎3.jpg","image/炭治郎4.jpg","image/善逸5.jpg"];
    var shodawColors = ["rgb(16, 14, 34)","#f3ff8b","rgb(255, 0, 43)","rgb(107, 88, 120)",
                        "rgb(0,0,0)","rgb(112,59,62)","rgb(193, 43, 52)","rgb(0, 0, 0)","#f3ff8b"];
    var number = 0;
    var images = [];

    //图片预加载
    for(i=0;i<backgrounds.length;i++){
        images[i] = new Image();
        images[i].src = backgrounds[i];
    }

    setInterval(function(){
        $("body")[0].style.backgroundImage = "url('"+images[number].src+"')";
        document.documentElement.style.setProperty('--shadowColor', shodawColors[number]);
        number = (number+1)%backgrounds.length;
    },frequency);
}

注意事项：

1. 利用Js 动态获取系统当前时间，然后动态旋转自制的时钟表盘，然后插入这一动画

   //以秒为例，获取当前时间，初始化动画开始的位置
   var secendKeyframes = "@keyframes secendRotate{"+
           "from{"+
               "transform: rotateZ("+ (-1+6*secend) +"deg);"+
           "}"+
           "to{"+
               "transform: rotateZ("+ (-1+6*secend+360) +"deg);"+
           "}"+
       "}";
   
   //插入动画
   document.styleSheets[1].insertRule(secendKeyframes,0);

        2.  利用数组存储壁纸的路径与时钟颜色的 rbg指数 ，然后利用 Js 为 Css 文件中设置的变量附上指定的颜色变量。

 

 以上就是博客的全部内容了，自己实现动态壁纸确实很爽，大家可以去试试