整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
圖3
圖4
就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
家好，今天我們來分享一下一般網(wǎng)站登錄頁面的簡(jiǎn)單實(shí)現(xiàn)方法，首先我們來看一下效果圖：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
下面是HTML結(jié)構(gòu)
下面是CSS樣式
個(gè)登錄界面可能有一點(diǎn)點(diǎn)。。。[黑線]
源碼放著了，要自己拿去吧[奸笑]
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #000;
color: #fff;
text-align: center;
padding-top: 100px;
font-family: 'Courier New', Courier, monospace;
}
h1 {
font-size: 50px;
margin-bottom: 30px;
color: #ff0000;
text-shadow: 0 0 10px #ff0000;
}
table {
margin: 0 auto;
width: 400px;
}
th,
td {
padding: 10px;
}
input[type="text"],
input[type="date"] {
width: 300px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ff0000;
background-color: #000;
color: #ff0000;
}
input[type="submit"] {
margin-top: 20px;
padding: 10px;
background-color: #ff0000;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
animation: pulseEffect 1s infinite;
}
input[type="submit"]:hover {
background-color: #ff6666;
animation: none;
}
.success-message {
margin-top: 30px;
display: none;
animation: fadeInEffect 2s;
}
.checkbox-option {
margin-top: 20px;
animation: slideInEffect 2s;
}
.contact-info {
margin-top: 40px;
animation: bounceEffect 1.5s infinite;
}
/* Animations */
@keyframes pulseEffect {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes fadeInEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInEffect {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes bounceEffect {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
</style>
<script>
window.onload = function () {
document.querySelector('form').addEventListener('submit', function (event) {
event.preventDefault();
var successMessage = document.getElementById('successMessage');
successMessage.style.display = 'block';
successMessage.style.animation = 'fadeInEffect 2s forwards';
var submitButton = document.getElementById('submitButton');
submitButton.disabled = true;
});
document.getElementById('closeButton').addEventListener('click', function () {
var successMessage = document.getElementById('successMessage');
successMessage.style.display = 'none';
});
}
</script>
</head>
<body>
<h1>死亡協(xié)議</h1>
<form>
<table>
<tr>
<th>受害者姓名</th>
<td><input type="text"></td>
</tr>
<tr>
<th>身份證號(hào)碼</th>
<td><input type="text"></td>
</tr>
<tr>
<th>iphone</th>
<td><input type="text"></td>
</tr>
<tr>
<th>郵箱</th>
<td><input type="text"></td>
</tr>
<tr>
<th>預(yù)定日期</th>
<td><input type="date"></td>
</tr>
</table>
<input id="submitButton" type="submit" value="簽署協(xié)議">
</form>
<div id="successMessage" class="success-message">
<p>最近自殺人數(shù)較多，可能會(huì)延期</p>
<button id="closeButton">關(guān)閉</button>
</div>
<div class="checkbox-option">
<input type="checkbox" id="agreementCheckbox">
<label for="agreementCheckbox">我同意所有要求</label>
</div>
<div class="contact-info">
<p>客服：LHTZ173@163.com</p>
</div>
</body>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
