先上效果图
实现思路:
先写好一个HTML网页,其中包括:
- 左边定时的自制闹钟(什么素材都不需要,存手打代码,耗时最多的一部分)
- 等大的壁纸图片(最好比桌面还大一点,这样可以实现壁纸浮动)
- 调好自己喜欢的配色
- 使用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);
}
注意事项:
- 利用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 文件中设置的变量附上指定的颜色变量。
以上就是博客的全部内容了,自己实现动态壁纸确实很爽,大家可以去试试