init

app/admin/forms.py

@@ -0,0 +1 @@
+# -*- coding: utf8 -*-

app/home/views.py

@@ -47,4 +47,17 @@ def comments():
 def moviecol():
     return render_template("home/moviecol.html")
 
-
+# 轮播动画页面
+@home.route("/animation/")
+def animation():
+    return render_template("home/animation.html")
+
+# 搜索
+@home.route("/search/")
+def search():
+    return render_template("home/search.html")
+
+# 搜索
+@home.route("/play/")
+def play():
+    return render_template("home/play.html")

app/static/anim/css/style.css

@@ -0,0 +1,110 @@
+/*首页样式（音乐馆样式）*/
+html,body,header,nav,footer,div,ul,ol,li,p,form,input,a,span,em,i,strong,b,font,img{
+		margin:0; padding:0; list-style:none; border:none;}
+body{font-family:"微软雅黑"; font-size:14px;}
+a{text-align:center; text-decoration:none; outline:none;}
+input{outline:none;}
+em{font-style:normal;}
+
+/*轮播图 开始*/
+.main_banner{width:100%; height:375px;}
+.main_banner_wrap{
+	width:1180px; height:375px; position:relative; background:#112233/*333D46*/;
+	margin:0 auto; overflow:hidden;  box-shadow: 0px 1px 2px #c5c5c5;
+}
+#myCanvas {
+	position: absolute;
+	z-index: 13;
+	opacity: 0.8;
+	cursor: pointer;
+	-webkit-animation: roll 3s;
+	animation: roll 3s;
+}
+@-webkit-keyframes roll {
+	from{-webkit-transform:rotate(120deg);opacity:0;}
+	to{-webkit-transform:rotate(0deg);opacity:0.8;}
+}
+@keyframes roll {
+	from{transform:rotate(120deg);opacity:0;}
+	to{transform:rotate(0deg);opacity:0.8;}
+}
+.banner_btn{ 	/*a 标签 按钮*/
+		width:255px; height:240px; position:absolute;
+		display:block; z-index:9; top:20px;
+}
+.btn_next{right:20px;}
+.banner_btn span{width:50px; height:100px; display:block; position:absolute;
+		left:110px; top:70px; opacity:0; transition:0.5s;
+		background:url(../images/bannerBtn.png) no-repeat 0 0;}
+.btn_next span{background-position:-50px 0;}
+.main_banner_box:hover .banner_btn_arrow{opacity:0.6;}
+.banner_btn span i{width:50px; height:100px; display:block;
+		background:url(../images/bannerBtn.png) no-repeat 0 0;}
+.btn_next span i{background-position:-50px 0;}
+.banner_btn:hover i{
+		-webkit-animation:arrow 0.5s infinite alternate ease-in-out;
+		-moz-animation:arrow 0.5s infinite alternate ease-in-out;
+}
+@-webkit-keyframes arrow{
+	from{-webkit-transform:scale(1); opacity:1;}
+	to{-webkit-transform:scale(1.5); opacity:0.2;}
+}
+@-moz-keyframes arrow{
+	from{-moz-transform:scale(1); opacity:1;}
+	to{-moz-transform:scale(1.5); opacity:0.2;}
+}
+
+.main_banner_box{
+	width:1200px; height:280px; margin:40px auto 0; position:relative; z-index:0;
+	/*-webkit-倒影样式*/
+	-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
+}
+/*火狐倒影图层样式*/
+.main_banner_box p#rflt{width:1200px; height:280px; position:absolute; left:0; top:280px;
+		background:-moz-element(#m_box) no-repeat; -moz-transform:scaleY(-1); opacity:0.2;
+}/*火狐倒影图层样式*/
+.main_banner li{
+		position:absolute; background:#000; overflow:hidden;
+		box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);
+}
+/*给每张图片初始设置不同宽高，层级，位置*/
+.main_banner li#imgCard0{
+		width:670px; height:280px; z-index:5;
+		left:255px; top:0px; opacity:1; background:#333d46;
+}
+.main_banner li#imgCard1{
+		width:580px; height:240px; z-index:1;
+		left:600px; top:20px; opacity:1; background:#333d46;
+}
+.main_banner li#imgCard2{/*初始在背后，透明度为0*/
+		width:450px; height:180px; z-index:1;
+		left:0px; top:60px; opacity:0; background:#333d46;
+}
+.main_banner li#imgCard3{/*初始在背后，透明度为0*/
+		width:450px; height:180px; z-index:1;
+		left:0px; top:60px; opacity:0; background:#333d46;
+}
+.main_banner li#imgCard4{
+		width:580px; height:240px; z-index:2;
+		left:0px; top:20px; opacity:1; background:#333d46;
+}
+.main_banner li img{width:100%; height:100%;}
+.main_banner li span{/*遮罩层*/
+		width:100%; height:100%; position:absolute; top:0; left:0;
+		z-index:1; background:#000; opacity:0; filter:alpha(opacity=0);
+		color:#fff; font-size:30px; line-height:120px; text-align:center;
+}
+.main_banner li p{width:100%; height:50px; position:absolute;
+		left:0; bottom:-50px; background:rgba(0,0,0,0.7); color:#fff;
+		text-indent:38px; line-height:50px; font-size:25px;
+}
+
+/*指示器按钮*/
+.btn_list{text-align:center; position:relative; left:0; top:6px; z-index:10;}
+.btn_list span{
+		width:15px; height:15px; display:inline-block; margin:15px 5px;
+		background:#787d82; border-radius:50%; cursor:pointer;
+}
+.btn_list span.curr{background:#FFAE00;}
+
+/*轮播图 结束*/