跳广场舞的大妈
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