一个html《登录界面》

最新推荐文章于 2024-06-13 10:31:50 发布

纵享孤独

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量383

点赞数 10

文章标签： html 前端

本文链接：https://blog.csdn.net/ReiLH/article/details/135037517

版权

emm。。。。

这是一个有一点点黑暗的“登录界面”

html源码

<!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>死亡协议</h1>
    <form>
        <table>
            <tr>
                <th>受害者姓名</th>
                <td><input type="text"></td>
            </tr>
            <tr>
                <th>身份证号码</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>预定日期</th>
                <td><input type="date"></td>
            </tr>
        </table>
        <input id="submitButton" type="submit" value="签署协议">
    </form>
    <div id="successMessage" class="success-message">
        <p>最近自杀人数较多，可能会延期</p>
        <button id="closeButton">关闭</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>