【登陆注册】彻底完成
This commit is contained in:
戒酒的李白
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@@ -1,424 +1,471 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>微博舆情分析系统 | 登录</title>
|
||||
<link rel="icon" href="../../../static/原神启动/favicon.ico">
|
||||
</head>
|
||||
<link rel="icon" href="../../../static/原神启动/favicon.ico" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login,
|
||||
.register {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#video-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -3;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#video-background video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 100%;
|
||||
max-height: 110%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 100%;
|
||||
max-height: 110%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#black-hid {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0a0a0a;
|
||||
opacity: 0.6;
|
||||
z-index: -2;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0a0a0a;
|
||||
opacity: 0.6;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
width: 642.03px;
|
||||
height: 477.28px;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
top: 20%;
|
||||
border-radius: 0.1cm;
|
||||
|
||||
|
||||
position: relative;
|
||||
width: 642.03px;
|
||||
height: 477.28px;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
top: 20%;
|
||||
border-radius: 0.1cm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login_box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0px 0px 3px black;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0px 0px 3px black;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 612px;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 612px;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.QRcode img {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
|
||||
object-fit: unset;
|
||||
|
||||
/* 添加过渡效果 */
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
object-fit: unset;
|
||||
/* 添加过渡效果 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.QRcode {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.QRcode:hover>img {
|
||||
line-height: normal;
|
||||
|
||||
/* transform-origin: unset; */
|
||||
|
||||
.QRcode:hover > img {
|
||||
line-height: normal;
|
||||
/* transform-origin: unset; */
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 15px;
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 15px;
|
||||
transition: opacity 0.5s ease; /* 添加过渡效果 */
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
height: 150px;
|
||||
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
height: 150px;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 60px;
|
||||
width: 522px;
|
||||
margin-top: 25px;
|
||||
margin-left: 40px;
|
||||
|
||||
border: none;
|
||||
|
||||
|
||||
height: 60px;
|
||||
width: 522px;
|
||||
margin-top: 25px;
|
||||
margin-left: 40px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content input {
|
||||
height: 60px;
|
||||
width: 522px;
|
||||
|
||||
text-indent: 1em;
|
||||
font-size: 18px;
|
||||
letter-spacing: .2em;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: inset 0px 0px 2px rgb(207, 206, 206);
|
||||
box-shadow: 0px 0px 4px rgb(207, 206, 206);
|
||||
border-radius: 0.1cm;
|
||||
|
||||
height: 60px;
|
||||
width: 522px;
|
||||
text-indent: 1em;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.2em;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: inset 0px 0px 2px rgb(207, 206, 206);
|
||||
box-shadow: 0px 0px 4px rgb(207, 206, 206);
|
||||
border-radius: 0.1cm;
|
||||
}
|
||||
|
||||
.content input::placeholder {
|
||||
opacity: 0.4;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.register-text {
|
||||
position: absolute;
|
||||
width: 522px;
|
||||
height: 30px;
|
||||
top: 270px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
width: 522px;
|
||||
height: 30px;
|
||||
top: 270px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.register-text a {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
letter-spacing: .1em;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.a1 {
|
||||
color: #949292;
|
||||
color: #949292;
|
||||
}
|
||||
|
||||
|
||||
.a2 {
|
||||
color: #d6c194;
|
||||
color: #d6c194;
|
||||
}
|
||||
|
||||
.a2:hover {
|
||||
color: #d6a948;
|
||||
color: #d6a948;
|
||||
}
|
||||
|
||||
.a3:hover {
|
||||
color: #d6a948;
|
||||
color: #d6a948;
|
||||
}
|
||||
|
||||
.a3 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #d6c194;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #d6c194;
|
||||
}
|
||||
|
||||
.start {
|
||||
position: absolute;
|
||||
top: 320px;
|
||||
width: 612px;
|
||||
height: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
top: 320px;
|
||||
width: 612px;
|
||||
height: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.start button {
|
||||
position: absolute;
|
||||
width: 522px;
|
||||
height: 60px;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.1em;
|
||||
background-color: rgb(54, 54, 61);
|
||||
color: rgb(215, 210, 180);
|
||||
font-weight: 700;
|
||||
border-radius: .1cm;
|
||||
box-shadow: 0px 0px 3px 1px #969595;
|
||||
position: absolute;
|
||||
width: 522px;
|
||||
height: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.1em;
|
||||
background-color: rgb(54, 54, 61);
|
||||
color: rgb(215, 210, 180);
|
||||
font-weight: 700;
|
||||
border-radius: 0.1cm;
|
||||
box-shadow: 0px 0px 3px 1px #969595;
|
||||
}
|
||||
|
||||
.start button:hover {
|
||||
color: #d6c194;
|
||||
color: #d6c194;
|
||||
}
|
||||
|
||||
.exit {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.exit img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.other-login {
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
height: 80px;
|
||||
top: 400px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-left: 80px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
height: 80px;
|
||||
top: 400px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-left: 80px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.other-login a {
|
||||
color: rgb(15, 15, 15);
|
||||
color: rgb(15, 15, 15);
|
||||
}
|
||||
|
||||
.other-login span:first-child {
|
||||
margin-left: 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.other-login span:last-child {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 310px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #8d8c8b;
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 310px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #8d8c8b;
|
||||
}
|
||||
|
||||
.xieyi input {
|
||||
margin-left: 45px;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.yanzhengma:hover {
|
||||
color: #aa863e;
|
||||
color: #aa863e;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onclick="playAudio()">
|
||||
</style>
|
||||
|
||||
<body onclick="playAudio()">
|
||||
<audio id="audio-player" autoplay class="hide-player">
|
||||
<source src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"
|
||||
type="audio/mp3">
|
||||
<source
|
||||
src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"
|
||||
type="audio/mp3"
|
||||
/>
|
||||
</audio>
|
||||
|
||||
<div id="video-background">
|
||||
<video src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%A7%86%E9%A2%91.mp4" autoplay="autoplay" muted="muted" loop="loop"></video>
|
||||
<video
|
||||
src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%A7%86%E9%A2%91.mp4"
|
||||
autoplay="autoplay"
|
||||
muted="muted"
|
||||
loop="loop"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div id="black-hid">
|
||||
</div>
|
||||
<div id="black-hid"></div>
|
||||
|
||||
<form id="login" class="login show" method="POST" action="/user/login">
|
||||
<div class="login_box">
|
||||
<div class="title">
|
||||
<!-- <a class="QRcode" href=""><img src="login_resources/二维码 (1).png" alt=""></a> -->
|
||||
<a class="logo" href=""><img src="../../../static/原神启动/logo2.08ebb840.png" alt=""></a>
|
||||
<a class="exit" href=""><img src="../../../static/原神启动/关闭 (1).png" alt=""></a>
|
||||
</div>
|
||||
<div class="login_box">
|
||||
<div class="title">
|
||||
<a class="QRcode" href=""
|
||||
><img src="../../../static/原神启动/二维码.png" alt="二维码"
|
||||
/></a>
|
||||
<a class="logo" href=""
|
||||
><img src="../../../static/原神启动/logo2.08ebb840.png" alt=""
|
||||
/></a>
|
||||
<a class="exit" href=""
|
||||
><img src="../../../static/原神启动/关闭 (1).png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="input"><input type="text" name="username" placeholder="输入账号/原神"></div>
|
||||
<div class="input"><input type="password" name="password" placeholder="输入密码/始める！"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="input">
|
||||
<input type="text" name="username" placeholder="输入账号/原神" />
|
||||
</div>
|
||||
<div class="register-text">
|
||||
<span>
|
||||
<a href="" class="a1">没有账号？</a>
|
||||
<a href="" class="a2" id="register_btn">立即注册</a>
|
||||
</span>
|
||||
<span><a href="" class="a3">忘记密码</a></span>
|
||||
</div>
|
||||
<div class="start">
|
||||
<button>进入游戏</button>
|
||||
</div>
|
||||
<div class="other-login">
|
||||
<span><a href="" class="a4">手机快捷登录</a></span>
|
||||
<span><a href="" class="a5">TapTap</a></span>
|
||||
<div class="input">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="输入密码/始める！"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-text">
|
||||
<span>
|
||||
<a href="" class="a1">没有账号？</a>
|
||||
<a href="" class="a2" id="register_btn">立即注册</a>
|
||||
</span>
|
||||
<span><a href="" class="a3">忘记密码</a></span>
|
||||
</div>
|
||||
<div class="start">
|
||||
<button>进入游戏</button>
|
||||
</div>
|
||||
<div class="other-login">
|
||||
<span><a href="" class="a4">手机快捷登录</a></span>
|
||||
<span><a href="" class="a5">TapTap</a></span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<form id="register" class="register" method="POST" action="/user/register">
|
||||
<div class="login_box">
|
||||
<div class="title">
|
||||
<a class="logo" href=""><img src="../../../static/原神启动//logo2.08ebb840.png" alt=""></a>
|
||||
<a class="exit" href=""><img src="../../../static/原神启动//关闭 (1).png" alt=""></a>
|
||||
</div>
|
||||
<div class="login_box">
|
||||
<div class="title">
|
||||
<a class="logo" href=""
|
||||
><img src="../../../static/原神启动//logo2.08ebb840.png" alt=""
|
||||
/></a>
|
||||
<a class="exit" href=""
|
||||
><img src="../../../static/原神启动//关闭 (1).png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="input">
|
||||
<span
|
||||
style="display: inline-block;width: 60px;height: 60px;font-size: 21px;font-weight: 800;color: black;line-height: 60px;text-align: center; ">
|
||||
+86</span>
|
||||
<input style="width: 452px;float: right;" type="text" name="username" placeholder="输入要注册的账号">
|
||||
<a class="yanzhengma" href=""
|
||||
style="position: absolute; top: 43px;right: 60px;color: #d6c194;font-weight: 700;letter-spacing: 0.1em;">我是假按钮</a>
|
||||
</div>
|
||||
<div class="input"><input type="text" name="password" placeholder="设定密码"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="input">
|
||||
<span
|
||||
style="
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
color: black;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
+86</span
|
||||
>
|
||||
<input
|
||||
style="width: 452px; float: right"
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="输入要注册的账号"
|
||||
/>
|
||||
<a
|
||||
class="yanzhengma"
|
||||
href=""
|
||||
style="
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
right: 60px;
|
||||
color: #d6c194;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
"
|
||||
>我是假按钮</a
|
||||
>
|
||||
</div>
|
||||
<div class="xieyi">
|
||||
<input type="checkbox">
|
||||
<span>已同意《用户协议》和《隐私权益》</span>
|
||||
<div class="input">
|
||||
<input type="text" name="password" placeholder="设定密码" />
|
||||
</div>
|
||||
<div class="register-text">
|
||||
<span>
|
||||
<a href="" class="a2" id="login_btn">返回登录页面</a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="start" style="top: 370px;">
|
||||
<button>注册并登录</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="xieyi">
|
||||
<input type="checkbox" />
|
||||
<span>已同意《用户协议》和《隐私权益》</span>
|
||||
</div>
|
||||
<div class="register-text">
|
||||
<span>
|
||||
<a href="" class="a2" id="login_btn">返回登录页面</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="start" style="top: 370px">
|
||||
<button>注册并登录</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<script>
|
||||
//点击网页后，播放音乐
|
||||
function playAudio() {
|
||||
var audioPlayer = document.getElementById('audio-player');
|
||||
audioPlayer.play();
|
||||
};
|
||||
//点击网页后，播放音乐
|
||||
function playAudio() {
|
||||
var audioPlayer = document.getElementById("audio-player");
|
||||
audioPlayer.play();
|
||||
}
|
||||
|
||||
// 获取表单和链接的引用
|
||||
const loginForm = document.getElementById('login');
|
||||
const registerForm = document.getElementById('register');
|
||||
const registerLink = document.getElementById('register_btn');
|
||||
const loginLink = document.getElementById('login_btn');
|
||||
// 获取表单和链接的引用
|
||||
const loginForm = document.getElementById("login");
|
||||
const registerForm = document.getElementById("register");
|
||||
const registerLink = document.getElementById("register_btn");
|
||||
const loginLink = document.getElementById("login_btn");
|
||||
|
||||
// 点击"立即注册"链接时切换表单显示状态
|
||||
registerLink.addEventListener('click', function (event) {
|
||||
event.preventDefault(); // 阻止链接默认行为
|
||||
loginForm.classList.remove('show');
|
||||
registerForm.classList.add('show');
|
||||
});
|
||||
// 点击"立即注册"链接时切换表单显示状态
|
||||
registerLink.addEventListener("click", function (event) {
|
||||
event.preventDefault(); // 阻止链接默认行为
|
||||
loginForm.classList.remove("show");
|
||||
registerForm.classList.add("show");
|
||||
});
|
||||
|
||||
// 点击"返回登录界面"链接时切换表单显示状态
|
||||
loginLink.addEventListener('click', function (event) {
|
||||
event.preventDefault(); // 阻止链接默认行为
|
||||
registerForm.classList.remove('show');
|
||||
loginForm.classList.add('show');
|
||||
});
|
||||
// 点击"返回登录界面"链接时切换表单显示状态
|
||||
loginLink.addEventListener("click", function (event) {
|
||||
event.preventDefault(); // 阻止链接默认行为
|
||||
registerForm.classList.remove("show");
|
||||
loginForm.classList.add("show");
|
||||
});
|
||||
|
||||
// 在页面加载3秒后更改图片链接和文本内容
|
||||
setTimeout(function () {
|
||||
// 更改二维码图片链接
|
||||
const qrCode = document.querySelector(".QRcode img");
|
||||
qrCode.style.transition = "opacity 1s ease"; // 添加过渡效果
|
||||
qrCode.style.opacity = 0; // 渐隐
|
||||
|
||||
// 等待过渡效果完成后隐藏图片
|
||||
setTimeout(function () {
|
||||
qrCode.style.display = "none"; // 隐藏二维码图片
|
||||
}, 1000); // 1秒等于1000毫秒
|
||||
|
||||
// 更改logo为文本并添加样式
|
||||
const logo = document.querySelector(".logo");
|
||||
logo.style.transition = "opacity 1s ease"; // 添加过渡效果
|
||||
logo.style.opacity = 0; // 渐隐
|
||||
|
||||
// 等待过渡效果完成后更改内容并渐显
|
||||
setTimeout(function () {
|
||||
logo.innerHTML =
|
||||
'<div style="width:500px;height:50px;margin-left:-200px;display:flex;align-items:center;"><img style="width:150px;height:75px;margin-bottom:20px" src="../../../static/原神启动/微博logo.png" alt=""/><div style="font-size: 35px; font-weight: bold; color: black;">微博舆情分析系统</div></div>';
|
||||
logo.style.opacity = 1; // 渐显
|
||||
}, 1000); // 1秒等于1000毫秒
|
||||
}, 3000); // 3000 毫秒 等于 3 秒
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user