Skip to content

Commit

Permalink
基本完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnsonperl
johnsonperl committed Aug 11, 2016
1 parent 9aa5617 commit f222dd6
Show file tree
Hide file tree
Showing 3 changed files with 323 additions and 88 deletions.
51 changes: 51 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,57 @@
<img class="resizeform" src="static/images/1_2.png" id="anm1_2" style="bottom:0;left:0;width:calc(348rem/640)" />
<img class="resizeform" src="static/images/1_3.png" id="anm1_3" style="bottom:calc(79rem/640);right:0;width:calc(292rem/640)" />
</div>
<div class="section">
<img class="bg" src="static/images/2_bg.jpg" />
<img class="onlywidth" src="static/images/1_1.png" id="anm2_13" style="top:0;left:0;" />
<img class="resizeform" src="static/images/2_8.png" id="anm2_9" style="top:calc(725rem/640);left:0;width:calc(34rem/640)" />
<img class="resizeform" src="static/images/2_8.png" id="anm2_10" style="top:calc(567rem/640);left:0;width:calc(34rem/640)" />
<img class="resizeform" src="static/images/2_8.png" id="anm2_11" style="top:calc(410rem/640);left:0;width:calc(34rem/640)" />
<img class="resizeform" src="static/images/2_8.png" id="anm2_12" style="top:calc(252rem/640);left:0;width:calc(34rem/640)" />
<img class="resizeform" src="static/images/2_1.png" id="anm2_1" style="top:calc(210rem/640);left:calc(50rem/640);width:calc(277rem/640)" />
<img class="resizeform" src="static/images/2_2.png" id="anm2_2" style="top:calc(292rem/640);left:calc(50rem/640);width:calc(277rem/640)" />
<img class="resizeform" src="static/images/2_3.png" id="anm2_3" style="top:calc(381rem/640);left:calc(50rem/640);width:calc(441rem/640)" />
<img class="resizeform" src="static/images/2_4.png" id="anm2_4" style="top:calc(458rem/640);left:calc(50rem/640);width:calc(441rem/640)" />
<img class="resizeform" src="static/images/2_5.png" id="anm2_5" style="top:calc(532rem/640);left:calc(50rem/640);width:calc(256rem/640)" />
<img class="resizeform" src="static/images/2_6.png" id="anm2_6" style="top:calc(607rem/640);left:calc(50rem/640);width:calc(256rem/640)" />
<img class="resizeform" src="static/images/2_7.png" id="anm2_7" style="top:calc(696rem/640);left:calc(50rem/640);width:calc(340rem/640)" />
<img class="resizeform" src="static/images/2_9.png" id="anm2_8" style="top:calc(769rem/640);left:calc(50rem/640);width:calc(340rem/640)" />

</div>
<div class="section">
<div class="maskbox">
<img class="bg" src="static/images/2_bg.jpg" />
<img class="onlywidth" src="static/images/1_1.png" id="anm3_0" style="top:0;left:0;" />
<img class="onlywidth" src="static/images/3_1.png" id="anm3_1" style="top:calc(129rem/640);left:0;" />
<img class="onlywidth" src="static/images/3_2.png" id="anm3_2" style="top:calc(225rem/640);left:0;" />
<img class="onlywidth" src="static/images/3_3.png" id="anm3_3" style="top:calc(322rem/640);left:0;" />
<img class="resizeform rfsera" src="static/images/3_4.png" data-sc="1" id="anm3_4" style="top:calc(382rem/640);left:calc(123rem/640);width:calc(156rem/640)" />
<img class="resizeform rfsera" src="static/images/3_5.png" data-sc="2" id="anm3_5" style="top:calc(382rem/640);right:calc(123rem/640);width:calc(156rem/640)" />

<img class="resizeform rfsera" src="static/images/3_6.png" data-sc="3" id="anm3_6" style="top:calc(475rem/640);left:calc(123rem/640);width:calc(156rem/640)" />
<img class="resizeform rfsera" src="static/images/3_7.png" data-sc="4" id="anm3_7" style="top:calc(475rem/640);right:calc(123rem/640);width:calc(156rem/640)" />

<img class="resizeform rfsera" src="static/images/3_8.png" data-sc="5" id="anm3_8" style="top:calc(568rem/640);left:calc(123rem/640);width:calc(156rem/640)" />
<img class="resizeform rfsera" src="static/images/3_9.png" data-sc="6" id="anm3_9" style="top:calc(568rem/640);right:calc(123rem/640);width:calc(156rem/640)" />

<img class="resizeform rfsera" src="static/images/3_10.png" data-sc="7" id="anm3_10" style="top:calc(661rem/640);left:calc(123rem/640);width:calc(156rem/640)" />
<img class="resizeform rfsera" src="static/images/3_11.png" data-sc="8" id="anm3_11" style="top:calc(661rem/640);right:calc(123rem/640);width:calc(156rem/640)" />

<img class="resizeform rfsera" src="static/images/3_12.png" data-sc="9" id="anm3_12" style="top:calc(754rem/640);left:calc(123rem/640);width:calc(156rem/640)" />
<img class="resizeform rfsera" src="static/images/3_13.png" data-sc="10" id="anm3_13" style="top:calc(754rem/640);right:calc(123rem/640);width:calc(156rem/640)" />
<img class="onlywidth" src="static/images/3_14.png" id="anm3_14" style="bottom:calc(75rem/640);left:0;" />
</div>
<img class="onlywidth fsera" src="static/images/f_1.png" id="anmf_1" />
<img class="onlywidth fsera" src="static/images/f_2.png" id="anmf_2" />
<img class="onlywidth fsera" src="static/images/f_3.png" id="anmf_3" />
<img class="onlywidth fsera" src="static/images/f_4.png" id="anmf_4" />
<img class="onlywidth fsera" src="static/images/f_5.png" id="anmf_5" />
<img class="onlywidth fsera" src="static/images/f_6.png" id="anmf_6" />
<img class="onlywidth fsera" src="static/images/f_7.png" id="anmf_7" />
<img class="onlywidth fsera" src="static/images/f_8.png" id="anmf_8" />
<img class="onlywidth fsera" src="static/images/f_9.png" id="anmf_9" />
<img class="onlywidth fsera" src="static/images/f_10.png" id="anmf_10" />
</div>
</div>
<span class="tips fixed"></span>
<div class="music fixed center"><span></span></div>
Expand Down
132 changes: 132 additions & 0 deletions static/css/css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ img.bg{position:absolute;left:0;top:0;}


/*下面的样式根据具体项目添加*/
.fsera{bottom:0;left:0;}



@-webkit-keyframes fadeInDown {
from {
Expand Down Expand Up @@ -144,4 +147,133 @@ img.bg{position:absolute;left:0;top:0;}
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}
@-webkit-keyframes zoomDown {
from {
opacity: 0;
-webkit-transform: scale3d(3, 3, 3);
transform: scale3d(3, 3, 3);
}

50% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes zoomDown {
from {
opacity: 0;
-webkit-transform: scale3d(3, 3, 3);
transform: scale3d(3, 3, 3);
}

50% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}

to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}

to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
Loading

0 comments on commit f222dd6

Please sign in to comment.