本篇文章给大家谈谈女朋友生日惊喜创意,以及定制生日礼物创意礼品的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置flask的环境变量,去官方文档看就好了,里面写的很详细
这个是我们的一个总的框架
注意:需要图片代码的关注私信回复“代码 ”
其中static是用来存放我们的动态文件包括css,js,图片,音频等等,templates是用来存放html文件的,然后py文件是我们的后端,用来实现页面的跳转功能
#先设置一个变量,方便我们跳转注意:注意: @app.route('/<int:id>', methods=['GET', 'POST']) @app.route('/', methods=('GET', 'POST')) def index(id=None): global name, login #然后发起一个post请求 if request.method == 'POST': #判断请求的账户和密码,如果判断成功,那么跳到下一个页面去 if request.form.get('account') == 'admin' and request.form.get('pwd') == 'admin': login = 'success' name = 'admin' return render_template('1.html', name=name, login=login) else: login = 'fail' #到第二个页面,如果当检测出来post请求是520的话,后面跳到下一个页面,这样实现层层跳转 if id ==520: return render_template('index.html') if id ==1314: return render_template('3.html') return render_template('hellow.html') 12345678910111281920
这些就是后端的知识就那么多,然后接下来就是我们的登录界面,先看看效果图
注意:需要图片代码的关注私信回复“代码 ”
设置账户和密码是在后端设置的,
具体代码如下:
if request.form.get('account') == 'admin' and request.form.get('pwd') == 'admin': 1
在成功输入账号和密码之后点击click me就是跳转到下一个页面了,这时候第二个页面的音乐播放器会被触发,就有背景音乐了,选对好路径,剩下就是往voice文件里面放歌,就可以随便切换自己想要的歌曲了
<audio autoplay="autoplay" loop="loop" preload="auto" src="../static/voice/环游星空.mp3"></audio> <a href="#" οnclick="delayURL('../SecondLucky/LuckyEvertime.html',1500)"> 1234
第二个页面如下:
注意:需要图片代码的关注私信回复“代码 ”
这页面就是大家发挥你们的文化功底的时候了,各种土味情话直接往上面怼就好了
在1.html里面这个地方改你们想要的文字就好了
<div class="pyro"> <div class="before"></div> <div class="after"></div> </div> <h1>一辈子很短,如白驹过隙,转瞬即逝</h1> <h2>可这种心情很长,如高山大川,延绵不绝</h2> <span>21岁,祝你生日快乐,天天快乐</span> <div class="candle"> <div id="flame" class="lit"></div> </div> 1234567891011
然后继续点击按钮,跳转到第三个页面如下:
注意:需要图片代码的关注私信回复“代码 ”
这里是一个动态图册来的,需要注意的是,要有12张图片,分别为6张100**100像素的和*
6张400*400像素的,不然的尺寸不一样,就不好看了,用ps软件剪快一点
然后修改图片的位置如下:
<ul class="minbox"> <li><img src="../static/images/01.jpg" width="100" height="100"></li> <li><img src="../static/images/02.jpg" width="100" height="100"></li> <li><img src="../static/images/03.jpg" width="100" height="100"></li> <li><img src="../static/images/04.jpg" width="100" height="100"></li> <li><img src="../static/images/05.jpg" width="100" height="100"></li> <li><img src="../static/images/06.jpg" width="100" height="100"></li> </ul> <ol class="maxbox"> <li><img src="../static/images/1.jpg" width="400" height="400"></li> <li><img src="../static/images/2.jpg" width="400" height="400"></li> <li><img src="../static/images/3.jpg" width="400" height="400"></li> <li><img src="../static/images/4.jpg" width="400" height="400"></li> <li><img src="../static/images/5.jpg" width="400" height="400"></li> <li><img src="../static/images/6.jpg" width="400" height="400"></li> 123456789101112131415
.minbox li:nth-child(1){ background: url(../images/01.jpg) no-repeat 0 0; -webkit-transform:translateZ(50px); } .minbox li:nth-child(2){ background: url(../images/02.jpg) no-repeat 0 0; -webkit-transform:rotateX(180deg) translateZ(50px); } .minbox li:nth-child(3){ background: url(../images/03.jpg) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px); } .minbox li:nth-child(4){ background: url(../images/04.jpg) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .minbox li:nth-child(5){ background: url(../images/05.jpg) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px); } .minbox li:nth-child(6){ background: url(../images/06.jpg) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px); } .maxbox li:nth-child(1){ background: url(../images/1.jpg) no-repeat 0 0; -webkit-transform:translateZ(50px); } .maxbox li:nth-child(2){ background: url(../images/2.jpg) no-repeat 0 0; -webkit-transform:translateZ(50px); } .maxbox li:nth-child(3){ background: url(../images/3.jpg) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px); } .maxbox li:nth-child(4){ background: url(../images/4.jpg) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .maxbox li:nth-child(5){ background: url(../images/5.jpg) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px); } .maxbox li:nth-child(6){ background: url(../images/6.jpg) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px); } 1234567891011128425262728293033738394044748
最后差不多的时候就是我们的重头戏了
注意:需要图片代码的关注私信回复“代码 ”
在气氛渲染的不错的时候,最后就是我们的烟花重头戏了,这个烟花是动态烟花来的,用的是js来写的,还附带爆炸音效,让你的女朋友彻底感动,差不多就是这样了。
引用地址:https://cmd5.cc/202411/18592.html
tags: