本文里面涉及到python，HTML ，css,JavaScript的知識，是基于python的flask框架做的一個小型網(wǎng)站，里面可以實現(xiàn)跳轉(zhuǎn)功能，怎么配置flask的環(huán)境變量，去官方文檔看就好了，里面寫的很詳細
這個是我們的一個總的框架
注意：需要圖片代碼的關(guān)注私信回復(fù)“代碼 ”
其中static是用來存放我們的動態(tài)文件包括css,js,圖片，音頻等等，templates是用來存放html文件的，然后py文件是我們的后端，用來實現(xiàn)頁面的跳轉(zhuǎn)功能
#先設(shè)置一個變量，方便我們跳轉(zhuǎn)注意：注意：
@app.route('/<int:id>', methods=['GET','POST'])
@app.route('/', methods=('GET','POST'))
def index(id=None):? ? global name, login? ? #然后發(fā)起一個post請求ifrequest.method =='POST':
#判斷請求的賬戶和密碼，如果判斷成功，那么跳到下一個頁面去ifrequest.form.get('account') =='admin'and request.form.get('pwd') =='admin':
login ='success'
name ='admin'
returnrender_template('1.html', name=name, login=login)
else:
login ='fail'
#到第二個頁面，如果當檢測出來post請求是520的話，后面跳到下一個頁面，這樣實現(xiàn)層層跳轉(zhuǎn)
ifid ==520:
returnrender_template('index.html')
ifid ==1314:
returnrender_template('3.html')
returnrender_template('hellow.html')
1234567891011121314151617181920
這些就是后端的知識就那么多，然后接下來就是我們的登錄界面，先看看效果圖
注意：需要圖片代碼的關(guān)注私信回復(fù)“代碼 ”
設(shè)置賬戶和密碼是在后端設(shè)置的，
具體代碼如下：
ifrequest.form.get('account') =='admin'and request.form.get('pwd') =='admin':
1
在成功輸入賬號和密碼之后點擊click me就是跳轉(zhuǎn)到下一個頁面了，這時候第二個頁面的音樂播放器會被觸發(fā)，就有背景音樂了，選對好路徑，剩下就是往voice文件里面放歌，就可以隨便切換自己想要的歌曲了
src="../static/voice/環(huán)游星空.mp3">
1234
第二個頁面如下：
注意：需要圖片代碼的關(guān)注私信回復(fù)“代碼 ”
這頁面就是大家發(fā)揮你們的文化功底的時候了，各種土味情話直接往上面懟就好了
在1.html里面這個地方改你們想要的文字就好了
一輩子很短，如白駒過隙，轉(zhuǎn)瞬即逝
可這種心情很長，如高山大川，延綿不絕
21歲，祝你生日快樂，天天快樂
1234567891011
然后繼續(xù)點擊按鈕，跳轉(zhuǎn)到第三個頁面如下：
注意：需要圖片代碼的關(guān)注私信回復(fù)“代碼 ”
這里是一個動態(tài)圖冊來的，需要注意的是，要有12張圖片，分別為6張100**100像素的和*
6張400*400像素的，不然的尺寸不一樣，就不好看了，用ps軟件剪快一點
然后修改圖片的位置如下：
123456789101112131415
.minboxli:nth-child(1){
background:url(../images/01.jpg) no-repeat00;
-webkit-transform:translateZ(50px);
}.minboxli:nth-child(2){
background:url(../images/02.jpg) no-repeat00;
-webkit-transform:rotateX(180deg)translateZ(50px);
}.minboxli:nth-child(3){
background:url(../images/03.jpg) no-repeat00;
-webkit-transform:rotateX(-90deg)translateZ(50px);
}.minboxli:nth-child(4){
background:url(../images/04.jpg) no-repeat00;
-webkit-transform:rotateX(90deg)translateZ(50px);
}.minboxli:nth-child(5){
background:url(../images/05.jpg) no-repeat00;
-webkit-transform:rotateY(-90deg)translateZ(50px);
}.minboxli:nth-child(6){
background:url(../images/06.jpg) no-repeat00;
-webkit-transform:rotateY(90deg)translateZ(50px);
}.maxboxli:nth-child(1){
background:url(../images/1.jpg) no-repeat00;
-webkit-transform:translateZ(50px);
}.maxboxli:nth-child(2){
background:url(../images/2.jpg) no-repeat00;
-webkit-transform:translateZ(50px);
}.maxboxli:nth-child(3){
background:url(../images/3.jpg) no-repeat00;
-webkit-transform:rotateX(-90deg)translateZ(50px);
}.maxboxli:nth-child(4){
background:url(../images/4.jpg) no-repeat00;
-webkit-transform:rotateX(90deg)translateZ(50px);
}.maxboxli:nth-child(5){
background:url(../images/5.jpg) no-repeat00;
-webkit-transform:rotateY(-90deg)translateZ(50px);
}.maxboxli:nth-child(6){
background:url(../images/6.jpg) no-repeat00;
-webkit-transform:rotateY(90deg)translateZ(50px);
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
最后差不多的時候就是我們的重頭戲了
注意：需要圖片代碼的關(guān)注私信回復(fù)“代碼 ”
在氣氛渲染的不錯的時候，最后就是我們的煙花重頭戲了，這個煙花是動態(tài)煙花來的，用的是js來寫的，還附帶爆炸音效，讓你的女朋友徹底感動，差不多就是這樣了。
