在 Flask 中,要實現復雜的動畫效果,可以使用 JavaScript 和 CSS。這里我們將使用一個名為 Spinner 的 JavaScript 庫來創建動畫效果。
pip install Flask
mkdir flask_spinner
cd flask_spinner
touch app.py
app.py
文件,添加以下內容:from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
templates
的文件夾,并在其中創建一個名為 index.html
的文件。將以下內容添加到該文件中:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Spinner</title>
<style>
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
在這個例子中,我們創建了一個簡單的 CSS 動畫,它將一個圓形的 div 旋轉 360 度。你可以根據需要修改樣式和動畫效果。
python app.py
http://127.0.0.1:5000/
,你將看到一個旋轉的 Spinner 動畫。這只是一個簡單的示例,你可以使用更復雜的 JavaScript 庫(如 Spin.js)或自定義 CSS 動畫來實現更復雜的動畫效果。