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

效果图：

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;}}
};

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

原神—薄樱初绽时（html+css+js仿原神2.5首页，前端课设）
文章目录一.运行效果图二.项目结构三.html 四.css 五.JS 六.总结链接:https://pan.baidu.com/s/1uaRCJXyIrY56NXabau4wjw?pwd=LD ...
HTML+CSS+JS实现原神官网静态页面
1. 需求概述客户需要一份能够吸引玩家的官网页面 1.1 术语解释 HTML:HTML是超文本标记语言,(英语:HyperText Markup Language,简称:HTML),是一种用来创建网 ...
火影忍者网页设计html,html+css+js实现火影背景切换登录页面
1.效果图(代码往下滑) 2.html代码 3.css代码 *{ margin:0px; padding:0px; } /* *号是全部的都外边距和内边距都为0,而body只是主题的外边距和内边距都为 ...
css+js模拟用户注册和登录页面
制作一个注册页面用户名不能为空并且(6-20位英文字母数字下划线) 密码重复密码 6位以上英文字母数字下划线密码和重复密码必须一致身份证号:旧身份证号为15位数字新身份证号为18位数字, 或1 ...
CSS+JS仿QQ面板风格的多级折叠下拉菜单
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style ty ...
AI全自动钓鱼，原神游戏沦陷！（硬核开源）
开发者(KaiFaX) 面向全栈工程师的开发者专注于前端.Java/Python/Go/PHP的技术社区作者 | Jack Cui 来源 | Jack Cui 最近逛 B 站,看到了一个有意思的东 ...
使用JS的promise实现前端登录页面和后端的交互
使用JS的promise实现前端登录页面和后端的交互个人认为JS的promise的作用和ajax差不多,形式上也是相似,接下来一起来看看 1.布局一个简单的前端登录页面,不要求细致,能看就问题不大. ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...

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

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

最新文章

热门文章