html + css +js:仿原神游戏登录页面（初步）

article/2025/10/24 18:46:41

效果图：

html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原神登录页面</title><link rel="stylesheet" href="./css/index.css">
</head><body style="overflow: hidden;"><div id="login"><video src="./img//原神Genshin Impact 四时登录界面 白昼 1080P 60FPS.mp4" autoplay="autoplay" loop="loop"></video><div class="wrap"><div id="Greeting"><img src="./img/opacity.png" alt="" class="mi">173****0357,欢迎进入游戏</div></div><img src="./img/16+.png" alt="" class="r16"><img src="./img/切换公司.png" alt="" class="cut1" id="cut"><p id="text">CNRELWin2.8.0_R9182063_S9770078_D9770078</p></div><div id="shutdown"></div><script src="./js/index.js"></script>
</body></html>

css：

* {padding: 0;margin: 0;box-sizing: border-box;
}video {object-fit: cover;
}.wrap {width: 100%;display: flex;justify-content: center;
}#Greeting {position: absolute;top: -110px;height: 106px;width: 560px;background: white;border-radius: 5px;line-height: 106px;margin: 0 auto;text-align: center;font-size: 25px;animation: move 5s ; font-family: "ys";display: flex;align-items: center;justify-content: center;
}
.mi{border-radius: 50%;border: 1px rgba(128, 128, 128,0.2) solid;margin-right: 15px;
}
/* 问候动画 */
@font-face {font-family: "ys";src: url(../font-family/ys/zh-cn.ttf);
}@keyframes move {0% {top: -110px;}60% {top: 70px;}100% {top: -110px;}
}
/* 切换图片 */
.cut1 {position: absolute;right: 2%;bottom: 2%;width: 80px;cursor: pointer;transform: rotate(0deg);transition: all 2s;
}.cut2 {position: absolute;right: 2%;bottom: 2%;width: 80px;cursor: pointer;transform: rotate(720deg);transition: all 2s;
}/* 16+ */
.r16{position: absolute;top: 5%;right: 4%;border-radius: 5px;border: 1px solid black;width: 82px;height: 104px;cursor: pointer;
}
#shutdown{position: absolute;bottom: 5%;left: 3%;background-image: url(../img/关机.png);background-size:cover;background-position-y:-1px ;width: 40px;height: 40px;background-color: white;border:5px white solid;border-radius: 50%;box-shadow:0px 0px 10px rgba(0, 0, 0,  0.5);cursor: pointer;
}
#text{position: absolute;left: 3%;bottom: 1%;font-family: "ys";color: white;text-shadow:0px 0px 5px rgba(0, 0, 0,  0.5);
}

JavaScript：

let date = new Date();
let hour = date.getHours();
let greet = document.querySelector("#Greeting");
let video = document.querySelector("video");
let cut = document.querySelector("#cut");
let order = 0; //顺序
if (hour >= 5 && hour < 9) {video.src = "./img//原神Genshin Impact 四时登录界面 清晨 1080P 60FPS.mp4";order = 1;
} else if (hour >= 9 && hour < 16) {video.src = "./img//原神Genshin Impact 四时登录界面 白昼 1080P 60FPS.mp4";order = 2;
} else if (hour >= 16 && hour <= 18) {video.src = "./img//原神Genshin Impact 四时登录界面 黄昏 1080P 60FPS.mp4";order = 3;
} else {video.src = "./img//原神Genshin Impact 四时登录界面 夜晚 1080P 60FPS.mp4";order = 4;
}
let cycle = 720;
cut.onclick = function () {cut.style.transform = "rotate(" + cycle + "deg)";cycle += 720;switch (order) {case 1: {video.src = "./img//原神Genshin Impact 四时登录界面 白昼 1080P 60FPS.mp4";order++;break;}case 2: {video.src = "./img//原神Genshin Impact 四时登录界面 黄昏 1080P 60FPS.mp4";order++;break;}case 3: {video.src = "./img//原神Genshin Impact 四时登录界面 夜晚 1080P 60FPS.mp4";order++;break;}case 4: {video.src = "./img//原神Genshin Impact 四时登录界面 清晨 1080P 60FPS.mp4";order = 1;break;}}
};