创造魔法:用Python及Web技术打造六一晚会现场的互动体验

在这里插入图片描述
这个项目使用Python的Flask框架,结合HTML, CSS以及JavaScript,创建一个有动态星空背景、音乐播放和交互按钮的“六一晚会现场”网页。这个网页旨在庆祝儿童节,为用户提供一种独特且有趣的体验。

以下是实现这个项目的详细步骤:

1. 环境准备

首先,你需要安装Python和Flask。如果你还没有安装Flask,可以使用pip来安装:

pip install flask

2.创建一个基本的Flask应用

我们的Python代码(app.py)如下:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

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

这个代码创建了一个基本的Flask应用。当我们访问应用的主页(“/”)时,它会渲染并返回一个叫做"index.html"的HTML文件。

3.创建HTML页面

我们的HTML代码放在"templates"文件夹内,文件名为(index.html):

<!DOCTYPE html>
<html>
<head>
    <title>六一晚会现场</title>
    <link rel="stylesheet" type="text/css" href="{
     
     { url_for('static', filename='style.css') }}">
    <script src="{
     
     { url_for('static', filename='script.js') }}"></script>
</head>
<body>
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="content">
        <h1 class="glow">欢迎来到六一晚会现场!</h1>
        <button onclick="displayMessage()">点击这里,有惊喜哦!</button>
        <audio id="bgMusic" loop>
            <source src="{
     
     { url_for('static', filename='music.mp3') }}" type="audio/mpeg">
        </audio>
        <button onclick="controlMusic()">播放/暂停音乐</button>
    </div>
</body>
</html>

我们在页面中增加了一个audio元素来播放音乐,这个元素使用了一个source标签来指向音乐文件的位置。同时,我们也增加了一个按钮来控制音乐的播放和暂停。

4.创建CSS样式

我们的CSS文件,放在"static"文件夹内,文件名为(style.css):

@keyframes glow {
    
    
    0% {
    
     text-shadow: 0 0 10px #ff4500, 0 0 20px #ff4500, 0 0 30px #ff4500, 0 0 40px #ff4500; }
    100% {
    
     text-shadow: 0 0 20px #ff4500, 0 0 30px #ff4500, 0 0 40px #ff4500, 0 0 50px #ff4500, 0 0 60px #ff4500; }
}

@keyframes move-twink-back {
    
    
    from {
    
    background-position:0 0;}
    to {
    
    background-position:-10000px 5000px;}
}
@keyframes move-stars-back {
    
    
    from {
    
    background-position:0 0;}
    to {
    
    background-position:10000px 0;}
}

.stars, .twinkling {
    
    
    position:absolute;
    width:100%;
    height:100%;
    display:block;
    top:0;
    left:0;
    z-index:0;
}

.stars {
    
    
    background:#000 url(stars.png) repeat top center;
    z-index:1;
    animation:move-stars-back 200s linear infinite;
}

.twinkling{
    
    
    background:transparent url(twinkling.png) repeat top center;
    z-index:2;
    animation:move-twink-back 100s linear infinite;
}

.content {
    
    
    position:relative;
    z-index:3;
    text-align:center;
    color:#fff;
}

h1 {
    
    
    font-size: 3em;
    margin-top: 15%;
}

button {
    
    
    font-size: 1.5em;
    margin-top: 1em;
}

.glow {
    
    
    animation: glow 2s ease-in-out infinite alternate;
}

在CSS中,我们定义了一个星空动态背景效果,并且让标题有一个闪光的动画效果。

5.创建JavaScript代码

我们的JavaScript文件,放在"static"文件夹内,文件名为(script.js):

function displayMessage() {
    
    
    alert('祝所有的孩子们六一节快乐!');
}

function controlMusic() {
    
    
    var music = document.getElementById('bgMusic');
    if (music.paused) {
    
    
        music.play();
    } else {
    
    
        music.pause();
    }
}

在JavaScript中,我们定义了两个函数。displayMessage函数用于显示祝福信息,controlMusic函数用于控制音乐的播放和暂停。

6.运行应用

在你的本地环境中运行Python代码,然后在浏览器中输入"localhost:5000",你就可以看到你创建的网页了。

注意:确保你的项目文件夹结构如下:

/项目根目录
   |-- app.py
   |-- /templates
        |-- index.html
   |-- /static
        |-- style.css
        |-- script.js
        |-- music.mp3
        |-- stars.png
        |-- twinkling.png

这就是所有的代码和步骤了,希望这对你的项目有所帮助!

猜你喜欢

转载自blog.csdn.net/tuzajun/article/details/130980228