Ce projet utilise le framework Flask de Python, combiné avec HTML, CSS et JavaScript, pour créer une page Web "Six Day Party Live" avec un fond de ciel étoilé dynamique, une lecture de musique et des boutons interactifs. Cette page vise à célébrer la Journée des enfants et à offrir aux utilisateurs une expérience unique et amusante.
Voici les étapes détaillées pour mettre en œuvre ce projet :
1. Préparation de l'environnement
Tout d'abord, vous devez installer Python et Flask. Si Flask n'est pas installé, vous pouvez utiliser pip pour l'installer :
pip install flask
2. Créer une application Flask de base
Notre code Python (app.py) est le suivant :
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)
Ce code crée une application Flask de base. Lorsque nous visitons la page d'accueil de l'application ("/"), elle affiche et renvoie un fichier HTML appelé "index.html".
3. Créez des pages HTML
Notre code HTML est placé dans le dossier "templates", et le nom du fichier est (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>
Nous avons ajouté un élément audio à la page pour jouer de la musique, et cet élément utilise une balise source pour pointer vers l'emplacement du fichier musical. En même temps, nous avons également ajouté un bouton pour contrôler la lecture et la pause de la musique.
4. Créez des styles CSS
Notre fichier CSS, placé dans le dossier "static", se nomme (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;
}
En CSS, nous définissons un effet de fond dynamique de ciel étoilé et donnons au titre un effet d'animation flash.
5. Créez du code JavaScript
Notre fichier JavaScript, placé dans le dossier "static", se nomme (script.js) :
function displayMessage() {
alert('祝所有的孩子们六一节快乐！');
}
function controlMusic() {
var music = document.getElementById('bgMusic');
if (music.paused) {
music.play();
} else {
music.pause();
}
}
En JavaScript, nous définissons deux fonctions. La fonction displayMessage est utilisée pour afficher le message de bénédiction, et la fonction controlMusic est utilisée pour contrôler la lecture et la pause de la musique.
6. Exécutez l'application
Exécutez le code Python dans votre environnement local, puis entrez "localhost:5000" dans le navigateur, et vous pourrez voir la page Web que vous avez créée.
REMARQUE : Assurez-vous que la structure du dossier de votre projet est la suivante :
/项目根目录
|-- app.py
|-- /templates
|-- index.html
|-- /static
|-- style.css
|-- script.js
|-- music.mp3
|-- stars.png
|-- twinkling.png
C'est tout le code et les étapes, j'espère que cela aidera votre projet !