跳广场舞的大妈
commit
1fd6c25055
|
|
@ -0,0 +1,585 @@
|
||||||
|
@keyframes degs{
|
||||||
|
0%{
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: rotate(720deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*灯光闪烁*/
|
||||||
|
@keyframes Lighting{
|
||||||
|
0%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scale-body{
|
||||||
|
0%{
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scale{
|
||||||
|
0%{
|
||||||
|
transform: scale(.9);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: scale(.91);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes blendmode{
|
||||||
|
0%{
|
||||||
|
mix-blend-mode: color-dodge;
|
||||||
|
}
|
||||||
|
33%{
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
66%{
|
||||||
|
mix-blend-mode: luminosity;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
mix-blend-mode: color-dodge;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**/
|
||||||
|
@keyframes dancing-left{
|
||||||
|
0%{
|
||||||
|
left: -50px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
5%{
|
||||||
|
left: -40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
left: -30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
15%{
|
||||||
|
left: -20px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
20%{
|
||||||
|
left: -10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
25%{
|
||||||
|
left: 0px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
30%{
|
||||||
|
left: 10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
35%{
|
||||||
|
left: 20px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
left: 30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
45%{
|
||||||
|
left: 40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
left: 50px;
|
||||||
|
top:0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
55%{
|
||||||
|
left: 40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
left: 30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
65%{
|
||||||
|
left: 20px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
70%{
|
||||||
|
left: 10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
left: 0px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
left: -10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
85%{
|
||||||
|
left: -20px;
|
||||||
|
top:10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
left: -30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
95%{
|
||||||
|
left: -40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
left: -50px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes dancing-right{
|
||||||
|
0%{
|
||||||
|
right: -50px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
5%{
|
||||||
|
right: -40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
right: -30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
15%{
|
||||||
|
right: -20px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
20%{
|
||||||
|
right: -10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
25%{
|
||||||
|
right: 0px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
30%{
|
||||||
|
right: 10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
35%{
|
||||||
|
right: 20px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
right: 30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
45%{
|
||||||
|
right: 40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
right: 50px;
|
||||||
|
top:0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
55%{
|
||||||
|
right: 40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
right: 30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
65%{
|
||||||
|
right: 20px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
70%{
|
||||||
|
right: 10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
right: 0px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
right: -10px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
85%{
|
||||||
|
right: -20px;
|
||||||
|
top:10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
right: -30px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
95%{
|
||||||
|
right: -40px;
|
||||||
|
top: 10px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
right: -50px;
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes dancing-down{
|
||||||
|
0%{
|
||||||
|
top: -20px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
25%{
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
top: -20px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
top: -100px;
|
||||||
|
transform:rotateY(720deg);
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
top: -20px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
top: 0px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
top: -20px;
|
||||||
|
transform:rotateY(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes dancing-Wobble{
|
||||||
|
from{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:rotate(-20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
20%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
30%{
|
||||||
|
transform:rotate(-20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform:rotate(-20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
70%{
|
||||||
|
transform:rotate(-20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:rotate(-20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes dancing-Wobble-right{
|
||||||
|
from{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:rotate(20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
20%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
30%{
|
||||||
|
transform:rotate(20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform:rotate(20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
70%{
|
||||||
|
transform:rotate(20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:rotate(20deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:79px 108px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes dancing-UP{
|
||||||
|
from{
|
||||||
|
transform:scale(1,1)
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:scale(1.1,1.1)
|
||||||
|
}
|
||||||
|
20%{
|
||||||
|
transform:scale(1,1)
|
||||||
|
}
|
||||||
|
30%{
|
||||||
|
transform:scale(1.1,1.1)
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
transform:scale(1,1)
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform:scale(1.1,1.1)
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
transform:scale(1,1)
|
||||||
|
}
|
||||||
|
70%{
|
||||||
|
transform:scale(1.1,1.1)
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
transform:scale(1,1)
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:scale(1.1,1.1)
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform:scale(1,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*镜头拉近*/
|
||||||
|
@keyframes scale-left{
|
||||||
|
0{
|
||||||
|
transform:scale(1,1);
|
||||||
|
transform-origin:left 90%;
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:left 90%;
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:right 90%;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform-origin:right 90%;
|
||||||
|
transform:scale(1,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scale-right{
|
||||||
|
0{
|
||||||
|
transform:scale(1,1);
|
||||||
|
transform-origin:right 90%;
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:right 90%;
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:left 90%;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform-origin:left 90%;
|
||||||
|
transform:scale(1,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scale-bottom-right{
|
||||||
|
0{
|
||||||
|
transform:scale(1,1);
|
||||||
|
transform-origin:right 200%;
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:right 200%;
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:left 200%;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform-origin:left 200%;
|
||||||
|
transform:scale(1,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scale-bottom-left{
|
||||||
|
0{
|
||||||
|
transform:scale(1,1);
|
||||||
|
transform-origin:left 200%;
|
||||||
|
}
|
||||||
|
10%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:left 200%;
|
||||||
|
}
|
||||||
|
90%{
|
||||||
|
transform:scale(1.4,1.4);
|
||||||
|
transform-origin:right 200%;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform-origin:right 200%;
|
||||||
|
transform:scale(1,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes Wobble{
|
||||||
|
from{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:22px 60px;
|
||||||
|
}
|
||||||
|
25%{
|
||||||
|
transform:rotate(30deg);
|
||||||
|
transform-origin:right bottom;
|
||||||
|
transform-origin:22px 60px;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:right bottom;
|
||||||
|
transform-origin:22px 60px;
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
transform:rotate(-30deg);
|
||||||
|
transform-origin:right bottom;
|
||||||
|
transform-origin:22px 60px;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
transform-origin:22px 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*人物行走*/
|
||||||
|
@keyframes run-right-bottom{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(300px,100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-left-bottom{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(-300px,100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-right-top{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(300px,-100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-left-top{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(-300px,-100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-right{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(300px,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-left{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(-300px,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-top{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(0px,-100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run-bottom{
|
||||||
|
from{
|
||||||
|
transform:translate(0,0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:translate(0px,100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,402 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
/* CSS Document */
|
||||||
|
/*公用代码*/
|
||||||
|
html, body {
|
||||||
|
background: none repeat scroll 0 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
color: black;
|
||||||
|
font: 12px arial,verdana;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, button {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
label input {
|
||||||
|
text-shadow: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
*{
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
transition: all .5s;
|
||||||
|
-moz-transition: all .5s;
|
||||||
|
-webkit-transition: all .5s;
|
||||||
|
}
|
||||||
|
a:link, a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
a:hover, a:active,a:focus,*:hover{
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: none;
|
||||||
|
transition: all .5s;
|
||||||
|
-moz-transition: all .5s;
|
||||||
|
-webkit-transition: all .5s;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border: 0 none;
|
||||||
|
max-width:100%;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
list-style: none outside none;
|
||||||
|
}
|
||||||
|
input, textarea, select {
|
||||||
|
outline: medium none;
|
||||||
|
}
|
||||||
|
.f-l{
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.f-r{
|
||||||
|
float: right;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.t-l{
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.t-c{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.t-r{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.top10{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.top20{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.top30 {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.top40 {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.top50{
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
.top60{
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.top70{
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
.top80 {
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
/*人物动作*/
|
||||||
|
.dancing-left{
|
||||||
|
animation:dancing-left 2s linear infinite forwards;
|
||||||
|
}
|
||||||
|
.dancing-right{
|
||||||
|
animation:dancing-right 2s linear infinite forwards;
|
||||||
|
}
|
||||||
|
.dancing-down{
|
||||||
|
animation:dancing-down 2s linear infinite forwards;
|
||||||
|
}
|
||||||
|
.dancing-Wobble{
|
||||||
|
animation:dancing-Wobble 1s linear infinite forwards;
|
||||||
|
}
|
||||||
|
.dancing-Wobble-right{
|
||||||
|
animation:dancing-Wobble-right 1s linear infinite forwards;
|
||||||
|
}
|
||||||
|
.dancing-UP{
|
||||||
|
animation:dancing-UP 1s linear infinite forwards;
|
||||||
|
}
|
||||||
|
/*人物行走*/
|
||||||
|
.run-right{
|
||||||
|
animation:run-right 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-left{
|
||||||
|
animation:run-left 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-top{
|
||||||
|
animation:run-top 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-bottom{
|
||||||
|
animation:run-bottom 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-right-bottom{
|
||||||
|
animation:run-right-bottom 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-left-bottom{
|
||||||
|
animation:run-left-bottom 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-right-top{
|
||||||
|
animation:run-right-top 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
.run-left-top{
|
||||||
|
animation:run-left-top 2s linear normal forwards;
|
||||||
|
}
|
||||||
|
/*镜头拉近*/
|
||||||
|
.scale-left{
|
||||||
|
animation: scale-left 8s linear normal;
|
||||||
|
}
|
||||||
|
.scale-right{
|
||||||
|
animation: scale-right 8s linear normal;
|
||||||
|
}
|
||||||
|
.scale-bottom-right{
|
||||||
|
animation: scale-bottom-right 8s linear normal;
|
||||||
|
}
|
||||||
|
.scale-bottom-left{
|
||||||
|
animation: scale-bottom-left 8s linear normal;
|
||||||
|
}
|
||||||
|
/**/
|
||||||
|
body{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../image/img_01.png) no-repeat;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.Lighting{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
background-image: url(../image/img_03.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
top: 0;
|
||||||
|
animation: Lighting .3s linear infinite;
|
||||||
|
}
|
||||||
|
.ground-light{
|
||||||
|
z-index: 1;
|
||||||
|
position: fixed;
|
||||||
|
top:-100px;
|
||||||
|
left: 50%;
|
||||||
|
width:1440px;
|
||||||
|
height: 1440px;
|
||||||
|
transform:rotateX(69deg) scale(1.3,1.3);
|
||||||
|
margin-left: -720px;
|
||||||
|
animation:blendmode 20s linear infinite;
|
||||||
|
transform:
|
||||||
|
}
|
||||||
|
.ground-light .ground-animate{
|
||||||
|
background-image: url(../image/img_02.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
width:1440px;
|
||||||
|
height: 1440px;
|
||||||
|
animation: degs 6s linear infinite;
|
||||||
|
}
|
||||||
|
/*舞台*/
|
||||||
|
.stage .video{
|
||||||
|
width: 450px;
|
||||||
|
height: 252px;
|
||||||
|
margin: 20px auto 0;
|
||||||
|
background-color: #000;
|
||||||
|
border: 4px solid #bab6ba;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.stage .video video{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.stage .sound{
|
||||||
|
width:1178px;
|
||||||
|
height: 347px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
margin-top: -220px;
|
||||||
|
}
|
||||||
|
.stage .sound img{
|
||||||
|
width: 100%;
|
||||||
|
animation: scale .4s linear infinite;
|
||||||
|
}
|
||||||
|
.stage .leading{
|
||||||
|
width: 203px;
|
||||||
|
position: relative;
|
||||||
|
margin: -250px auto 0;
|
||||||
|
}
|
||||||
|
.stage .leading .leading-dancer{
|
||||||
|
width: 120px;
|
||||||
|
height: 155px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: url(../image/img_04.png) no-repeat center;
|
||||||
|
background-size: 120px 155px;
|
||||||
|
z-index: 8;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.stage .leading .table{
|
||||||
|
margin-top: -25px;
|
||||||
|
}
|
||||||
|
.stage .leading .table img{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.stage .leading .table .name{
|
||||||
|
color: #ffd800;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -45px;
|
||||||
|
}
|
||||||
|
.speak{
|
||||||
|
position: fixed;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin: -48px auto 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 2px solid #000000;
|
||||||
|
z-index: 9;
|
||||||
|
min-width:80px;
|
||||||
|
}
|
||||||
|
.speak::after{
|
||||||
|
background: url(../image/icon_04.png) no-repeat;
|
||||||
|
background-size: 18px ;
|
||||||
|
width: 37px;
|
||||||
|
height: 28px;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left:30px;
|
||||||
|
margin-left: 0px;
|
||||||
|
bottom: -27px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.speak.speak-pink{
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
font-size: 24px;
|
||||||
|
background: #ff0084;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: -78px auto 0;
|
||||||
|
}
|
||||||
|
.speak.speak-pink::after{
|
||||||
|
background: url(../image/icon_03.png) no-repeat;
|
||||||
|
left:60px;
|
||||||
|
}
|
||||||
|
.types{
|
||||||
|
font-size: 24px;
|
||||||
|
width: 700px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 101;
|
||||||
|
left: 30px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.types .name{
|
||||||
|
font-weight: bolder;
|
||||||
|
color: #ffd800;
|
||||||
|
-webkit-text-stroke: 0.5px black;
|
||||||
|
}
|
||||||
|
.types .list{
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bolder;
|
||||||
|
color: #ff0084;
|
||||||
|
-webkit-text-stroke: 0.5px black;
|
||||||
|
}
|
||||||
|
/*舞池*/
|
||||||
|
.dance-floor{
|
||||||
|
width:100% ;
|
||||||
|
height: calc(100vh - 410px);
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
animation: scale-body .4s linear infinite;
|
||||||
|
}
|
||||||
|
.dance-people{
|
||||||
|
position: absolute;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.dance-people .people-img{
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background-size: 90px 90px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-top: 90px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dance-people .people-img01{
|
||||||
|
background-image: url(../image/img_05.png);
|
||||||
|
}
|
||||||
|
.dance-people .people-img02{
|
||||||
|
background-image: url(../image/img_06.png);
|
||||||
|
}
|
||||||
|
.dance-people .people-img03{
|
||||||
|
background-image: url(../image/img_07.png);
|
||||||
|
}
|
||||||
|
.dance-people .people-img04{
|
||||||
|
background-image: url(../image/img_08.png);
|
||||||
|
}
|
||||||
|
.dance-people .people-img05{
|
||||||
|
background-image: url(../image/img_09.png);
|
||||||
|
}
|
||||||
|
.dance-people .people-img06{
|
||||||
|
background-image: url(../image/img_10.png);
|
||||||
|
}
|
||||||
|
.dance-people .people-name{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffd800;
|
||||||
|
-webkit-text-stroke: 0.5px black;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/*荧光棒*/
|
||||||
|
.stick{
|
||||||
|
background-size: 57px 81px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: absolute;
|
||||||
|
height:81px;
|
||||||
|
width:57px;
|
||||||
|
animation: Wobble 2s linear infinite;
|
||||||
|
}
|
||||||
|
.stick.stick-01{
|
||||||
|
background-image: url(../image/img_11.png);
|
||||||
|
}
|
||||||
|
.stick.stick-02{
|
||||||
|
background-image: url(../image/img_12.png);
|
||||||
|
}
|
||||||
|
.stick.stick-03{
|
||||||
|
background-image: url(../image/img_13.png);
|
||||||
|
}
|
||||||
|
.stick.stick-04{
|
||||||
|
background-image: url(../image/img_14.png);
|
||||||
|
}
|
||||||
|
.stick.stick-05{
|
||||||
|
background-image: url(../image/img_15.png);
|
||||||
|
}
|
||||||
|
/*荧光棒定位*/
|
||||||
|
.dance-people .people-img01 .stick{
|
||||||
|
top: 14px;
|
||||||
|
right: -3px;
|
||||||
|
}
|
||||||
|
.dance-people .people-img02 .stick{
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.dance-people .people-img03 .stick{
|
||||||
|
top: -10px;
|
||||||
|
right: -27px;
|
||||||
|
}
|
||||||
|
.dance-people .people-img04 .stick{
|
||||||
|
top: 0px;
|
||||||
|
right: -22px;
|
||||||
|
}
|
||||||
|
.dance-people .people-img05 .stick{
|
||||||
|
top: -8px;
|
||||||
|
right: -20px;
|
||||||
|
}
|
||||||
|
.dance-people .people-img06 .stick{
|
||||||
|
top: -3px;
|
||||||
|
right: -15px;
|
||||||
|
}
|
||||||
|
.paper-canvas{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.dn{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/animate.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style-jq.css" />
|
||||||
|
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="./js/custom.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<body class=""><!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
|
||||||
|
<!--灯光-->
|
||||||
|
<div class="Lighting">
|
||||||
|
</div>
|
||||||
|
<!--地面灯光-->
|
||||||
|
<div class="ground-light">
|
||||||
|
<div class="ground-animate"></div>
|
||||||
|
</div>
|
||||||
|
<!--舞台背景-->
|
||||||
|
<div class="stage">
|
||||||
|
<div class="video" >
|
||||||
|
<video id="mousedown" autoplay muted src="image/vd.mp4" ></video>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.body.addEventListener('mousedown', function(){
|
||||||
|
var vdo = $("video")[0]; //jquery
|
||||||
|
vdo.muted = false;
|
||||||
|
}, false);
|
||||||
|
</script>
|
||||||
|
<!---->
|
||||||
|
<div class="sound">
|
||||||
|
<img src="image/icon_02.png" />
|
||||||
|
</div>
|
||||||
|
<div class="leading">
|
||||||
|
<div class="speak speak-pink">
|
||||||
|
一起：起来嗨！
|
||||||
|
</div>
|
||||||
|
<div class="leading-dancer dancing-right">
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<img src="image/icon_01.png" />
|
||||||
|
<p class="name">当前领舞：9527</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--大航海介绍-->
|
||||||
|
<div class="types">
|
||||||
|
<!-- <div class="name">
|
||||||
|
<p>送任意电池可获得荧光棒！<br />
大航海排名前三可成为领舞!<br />
领舞特权：切歌，镜头，统一动作”跳跃，旋转，向左，向右”，
一起喊“任意文字”，一起嗨:会下纸片
|
||||||
|
</p>
|
||||||
|
</div> -->
|
||||||
|
<div class="list">
|
||||||
|
<p>1：最炫民族风</p>
<p>2：爱情买卖</p>
<p>3：两只蝴蝶</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--舞池-->
|
||||||
|
|
||||||
|
<!--当前移动动作：run-right，run-left,run-right-top,run-left-top,run-right-bottom,run-left-bottom-->
|
||||||
|
<!--当前舞池动作： dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
|
||||||
|
<div class="dance-floor">
|
||||||
|
<!-- <div class="dance-people" style="top: 40%; left: 50%;">
|
||||||
|
<div class="people-img people-img02 dancing-UP">
|
||||||
|
<div class="stick stick-02">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="dance-people" style="top: 30%; left: 20%;">
|
||||||
|
<div class="speak ">
|
||||||
|
切歌，镜头，统一动作”跳跃，旋转，向左，向右”，
|
||||||
|
</div>
|
||||||
|
<div class="people-img people-img01 dancing-left">
|
||||||
|
<div class="stick stick-01 ">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name ">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dance-people" style="top: 40%; left: 50%;">
|
||||||
|
<div class="people-img people-img02 dancing-down">
|
||||||
|
<div class="stick stick-02">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dance-people" style="top: 20%; left: 40%;">
|
||||||
|
<div class="people-img people-img03 dancing-right">
|
||||||
|
<div class="stick stick-03">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="dance-people" style="top: 26%; left: 60%;">
|
||||||
|
<div class="people-img people-img04 dancing-UP">
|
||||||
|
<div class="stick stick-04">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dance-people" style="top: 56%; left: 60%;">
|
||||||
|
<div class="people-img people-img05 dancing-Wobble">
|
||||||
|
<div class="stick stick-05">
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dance-people" style="top: 55%; left: 30%;">
|
||||||
|
<div class="people-img people-img06 dancing-Wobble-right">
|
||||||
|
<div class="stick stick-01">
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--舞池 end-->
|
||||||
|
<!--小纸片氛围js-->
|
||||||
|
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<!--小纸片氛围js-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 579 B |
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 671 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 469 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,106 @@
|
||||||
|
// 总条数
|
||||||
|
var num = 0;
|
||||||
|
var timer = null;
|
||||||
|
var actionTimer = null;
|
||||||
|
// 粉丝的昵称
|
||||||
|
var nameArr = ['鹅鹅鹅鹅鹅鹅','打嗝','旋风腿儿','霹雳腿儿','老寒腿儿','哇咔咔蹦跶'];
|
||||||
|
// 粉丝说的话
|
||||||
|
var sayArr = ['没人','内容','空空风','美女姐姐','小阔爱','老阔爱'];
|
||||||
|
// 动作
|
||||||
|
var actionArr = ['dancing-left','dancing-right','dancing-down','dancing-UP','dancing-Wobble','dancing-Wobble-right'];
|
||||||
|
var peopleId = 0;
|
||||||
|
// 集体舞
|
||||||
|
function allDancing(){
|
||||||
|
actionArr.forEach((item,index)=>{
|
||||||
|
var chooseIdex = Math.floor(Math.random()*num);
|
||||||
|
var haveDan = $(`.people-img`).is(`.${item}`);
|
||||||
|
if(haveDan){
|
||||||
|
$(`.people-img`).removeClass(item);
|
||||||
|
$(`.people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
console.log('关闭集体舞');
|
||||||
|
clearInterval(actionTimer);
|
||||||
|
},3000)
|
||||||
|
}
|
||||||
|
// 随机舞
|
||||||
|
function randomDancing(){
|
||||||
|
actionTimer = setInterval(()=>{
|
||||||
|
var len = $('.dance-people').length;
|
||||||
|
for (var i = 0; i < num; i++) {
|
||||||
|
actionArr.forEach((item,index)=>{
|
||||||
|
// var chooseIdex = Math.floor(Math.random()*num);
|
||||||
|
var haveDan = $(`.data${i} .people-img`).is(`.${item}`);
|
||||||
|
if(haveDan){
|
||||||
|
$(`.data${i} .people-img`).removeClass(item);
|
||||||
|
$(`.data${i} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},3000)
|
||||||
|
}
|
||||||
|
// 关闭说话
|
||||||
|
function closeSay(index){
|
||||||
|
$(`.data${index} .speak`).addClass("dn");
|
||||||
|
}
|
||||||
|
// 开启说话
|
||||||
|
function sayIng(index){
|
||||||
|
$(`.data${index} .speak`).removeClass("dn");
|
||||||
|
setTimeout(()=>{
|
||||||
|
closeSay(index);
|
||||||
|
},3000)
|
||||||
|
}
|
||||||
|
function peopleObj(name,say,action){
|
||||||
|
// 开始说话
|
||||||
|
sayIng(peopleId);
|
||||||
|
let yspHtml = '';
|
||||||
|
let yspData = [
|
||||||
|
{
|
||||||
|
id:peopleId++,
|
||||||
|
top:`${Math.random()*80+1}%`,
|
||||||
|
left:`${Math.random()*90+1}%`,
|
||||||
|
name:name,//用户名
|
||||||
|
say:say,//说话内容
|
||||||
|
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
|
||||||
|
ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒
|
||||||
|
dancin:action
|
||||||
|
}
|
||||||
|
]
|
||||||
|
$.each(yspData, function (commentIndex, comment) {
|
||||||
|
yspHtml += `
|
||||||
|
<div class="dance-people data${comment.id}" style="top: ${comment.top}; left: ${comment.left};">
|
||||||
|
<div class="speak ">${comment.say}${comment.id}</div>
|
||||||
|
<div class="people-img ${comment.peopleImg} ${comment.dancin}">
|
||||||
|
<div class="stick ${comment.ying_guang}"></div>
|
||||||
|
<div class="people-name ">${comment.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
});
|
||||||
|
$('.dance-floor').prepend(yspHtml);
|
||||||
|
setTimeout(()=>{
|
||||||
|
closeSay(num);
|
||||||
|
},3000);
|
||||||
|
}
|
||||||
|
$(function(){
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// console.log('开始集体舞');
|
||||||
|
// allDancing();
|
||||||
|
// },50000)
|
||||||
|
setTimeout(()=>{
|
||||||
|
console.log('开启随机舞')
|
||||||
|
randomDancing();
|
||||||
|
},4000)//需要2s的倍数
|
||||||
|
timer = setInterval(()=>{
|
||||||
|
var nameIndex = Math.floor(Math.random()*nameArr.length);
|
||||||
|
var sayIndex = Math.floor(Math.random()*sayArr.length);
|
||||||
|
var actionIndex = Math.floor(Math.random()*actionArr.length);
|
||||||
|
num++;
|
||||||
|
if(num==300){
|
||||||
|
clearInterval(timer);
|
||||||
|
} else {
|
||||||
|
peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex]);
|
||||||
|
}
|
||||||
|
},1000)
|
||||||
|
|
||||||
|
})
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,170 @@
|
||||||
|
/*纸屑特效*/
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
var Progress = function () {
|
||||||
|
function Progress() {
|
||||||
|
var param = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||||
|
|
||||||
|
_classCallCheck(this, Progress);
|
||||||
|
|
||||||
|
this.timestamp = null;
|
||||||
|
this.duration = param.duration || Progress.CONST.DURATION;
|
||||||
|
this.progress = 0;
|
||||||
|
this.delta = 0;
|
||||||
|
this.progress = 0;
|
||||||
|
this.isLoop = !!param.isLoop;
|
||||||
|
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
Progress.prototype.reset = function reset() {
|
||||||
|
this.timestamp = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
Progress.prototype.start = function start(now) {
|
||||||
|
this.timestamp = now;
|
||||||
|
};
|
||||||
|
|
||||||
|
Progress.prototype.tick = function tick(now) {
|
||||||
|
if (this.timestamp) {
|
||||||
|
this.delta = now - this.timestamp;
|
||||||
|
this.progress = Math.min(this.delta / this.duration, 1);
|
||||||
|
|
||||||
|
if (this.progress >= 1 && this.isLoop) {
|
||||||
|
this.start(now);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.progress;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_createClass(Progress, null, [{
|
||||||
|
key: "CONST",
|
||||||
|
get: function get() {
|
||||||
|
return {
|
||||||
|
DURATION: 1000
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return Progress;
|
||||||
|
}();
|
||||||
|
|
||||||
|
var Confetti = function () {
|
||||||
|
function Confetti(param) {
|
||||||
|
_classCallCheck(this, Confetti);
|
||||||
|
|
||||||
|
this.parent = param.elm || document.body;
|
||||||
|
this.canvas = document.createElement("canvas");
|
||||||
|
this.canvas.classList.add("paper-canvas");
|
||||||
|
this.ctx = this.canvas.getContext("2d");
|
||||||
|
this.width = param.width || this.parent.offsetWidth;
|
||||||
|
this.height = param.height || this.parent.offsetHeight;
|
||||||
|
this.length = param.length || Confetti.CONST.PAPER_LENGTH;
|
||||||
|
this.yRange = param.yRange || this.height * 2;
|
||||||
|
this.progress = new Progress({
|
||||||
|
duration: param.duration,
|
||||||
|
isLoop: true
|
||||||
|
});
|
||||||
|
this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange : 10;
|
||||||
|
this.speedRange = typeof param.speedRange === "number" ? param.speedRange : 10;
|
||||||
|
this.sprites = [];
|
||||||
|
|
||||||
|
this.canvas.style.cssText = ["display: block", "position: absolute", "top: 0", "left: 0", "pointer-events: none"].join(";");
|
||||||
|
|
||||||
|
this.render = this.render.bind(this);
|
||||||
|
|
||||||
|
this.build();
|
||||||
|
|
||||||
|
this.parent.append(this.canvas);
|
||||||
|
this.progress.start(performance.now());
|
||||||
|
|
||||||
|
requestAnimationFrame(this.render);
|
||||||
|
}
|
||||||
|
|
||||||
|
Confetti.prototype.build = function build() {
|
||||||
|
for (var i = 0; i < this.length; ++i) {
|
||||||
|
var canvas = document.createElement("canvas"),
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
canvas.width = Confetti.CONST.SPRITE_WIDTH;
|
||||||
|
canvas.height = Confetti.CONST.SPRITE_HEIGHT;
|
||||||
|
|
||||||
|
canvas.position = {
|
||||||
|
initX: Math.random() * this.width,
|
||||||
|
initY: -canvas.height - Math.random() * this.yRange
|
||||||
|
};
|
||||||
|
|
||||||
|
canvas.rotation = this.rotationRange / 2 - Math.random() * this.rotationRange;
|
||||||
|
canvas.speed = this.speedRange / 2 + Math.random() * (this.speedRange / 2);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.fillStyle = Confetti.CONST.COLORS[Math.random() * Confetti.CONST.COLORS.length | 0];
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
this.sprites.push(canvas);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Confetti.prototype.render = function render(now) {
|
||||||
|
var progress = this.progress.tick(now);
|
||||||
|
|
||||||
|
this.canvas.width = this.width;
|
||||||
|
this.canvas.height = this.height;
|
||||||
|
|
||||||
|
for (var i = 0; i < this.length; ++i) {
|
||||||
|
this.ctx.save();
|
||||||
|
this.ctx.translate(this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress, this.sprites[i].position.initY + progress * (this.height + this.yRange));
|
||||||
|
this.ctx.rotate(this.sprites[i].rotation);
|
||||||
|
this.ctx.drawImage(this.sprites[i], -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2, -Confetti.CONST.SPRITE_HEIGHT / 2, Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)), Confetti.CONST.SPRITE_HEIGHT);
|
||||||
|
this.ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(this.render);
|
||||||
|
};
|
||||||
|
|
||||||
|
_createClass(Confetti, null, [{
|
||||||
|
key: "CONST",
|
||||||
|
get: function get() {
|
||||||
|
return {
|
||||||
|
SPRITE_WIDTH: 9,
|
||||||
|
SPRITE_HEIGHT: 16,
|
||||||
|
PAPER_LENGTH: 100,
|
||||||
|
DURATION: 8000,
|
||||||
|
ROTATION_RATE: 50,
|
||||||
|
COLORS: ["#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0", "#42A5F5", "#29B6F6", "#26C6DA", "#26A69A", "#66BB6A", "#9CCC65", "#D4E157", "#FFEE58", "#FFCA28", "#FFA726", "#FF7043", "#8D6E63", "#BDBDBD", "#78909C"]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return Confetti;
|
||||||
|
}();
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var DURATION = 8000,
|
||||||
|
LENGTH = 120;
|
||||||
|
|
||||||
|
new Confetti({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
length: LENGTH,
|
||||||
|
duration: DURATION
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
new Confetti({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
length: LENGTH,
|
||||||
|
duration: DURATION
|
||||||
|
});
|
||||||
|
}, DURATION / 2);
|
||||||
|
})();
|
||||||
|
/*纸屑特效 end*/
|
||||||
Loading…
Reference in New Issue