这个项目使用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
这就是所有的代码和步骤了,希望这对你的项目有所帮助!