Python打发无聊时光：9.使用flask框架创建简易科幻风网页

最新推荐文章于 2024-06-14 09:50:01 发布

nnerddboy

最新推荐文章于 2024-06-14 09:50:01 发布

阅读量426

点赞数 11

分类专栏： Python打发无聊时光文章标签： python flask 开发语言

本文链接：https://blog.csdn.net/qq_53529450/article/details/136335020

版权

Python打发无聊时光专栏收录该内容

14 篇文章 1 订阅

订阅专栏

为了方便大家移植，我把HTML与CSS直接嵌入到一个py文件，若还需增加一些交互性，可以使用JavaScript来添加动态行为。

一、装flask库

在终端输入:

pip install flask

二、复制代码

from flask import Flask, Response

app = Flask(__name__)

@app.route('/')
def home():
    html = """
    <html>
    <head>
    <title>秦岚之家</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

        body {
            background-color: #101010;
            color: #33ff49;
            font-family: 'Orbitron', sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
            overflow: hidden;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }
        h1 {
            font-size: 4em;
            margin: 0.67em 0;
            animation: neon 1.5s ease-in-out infinite alternate;
            text-shadow: 0 0 5px #33ff49, 0 0 10px #33ff49; /* Updated text-shadow */
        }
        p {
            font-size: 1.5em;
        }
        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #0c0c0c;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
        #welcomeButton {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1.2em;
            background-color: #1c1c1c;
            border: none;
            border-radius: 5px;
            color: #33ff49;
            cursor: pointer;
            transition: background-color 0.3s;
            animation: pulse 2s infinite;
        }
        #welcomeButton:hover {
            background-color: #262626;
        }
        #welcomeText {
            display: none;
            transition: opacity 0.5s;
        }
        @keyframes neon {
            from {
                text-shadow: 0 0 3px #33ff49, 0 0 5px #33ff49; /* Updated text-shadow */
            }
            to {
                text-shadow: 0 0 5px #33ff49, 0 0 8px #33ff49; /* Updated text-shadow */
            }
        }
        @keyframes pulse {
            from {
                box-shadow: 0 0 0 0px rgba(51, 255, 73, 0.7);
            }
            to {
                box-shadow: 0 0 0 10px rgba(51, 255, 73, 0);
            }
        }
    </style>
    </head>
    <body>
    <div class="container">
        <h1>赛博朋克4399</h1>
        <button id="welcomeButton">登录</button>
        <p id="welcomeText">欢迎来到秦岚之家。</p>
    </div>
    <footer>
        <p>© 2121 Galactic Federation. All rights reserved.</p>
    </footer>
    <script>
        document.getElementById('welcomeButton').onclick = function() {
            var welcomeText = document.getElementById('welcomeText');
            welcomeText.style.display = welcomeText.style.display === 'block' ? 'none' : 'block';
            welcomeText.style.opacity = welcomeText.style.opacity === '1' ? '0' : '1';
        };
    </script>
    </body>
    </html>
    """
    return Response(html, mimetype='text/html')

if __name__ == '__main__':
    app.run(debug=True)