diff --git a/css/animate.css b/css/animate.css index 2d47d60..099a492 100644 --- a/css/animate.css +++ b/css/animate.css @@ -537,18 +537,59 @@ transform-origin:22px 60px; } } -@keyframes stickgo{ - 0{ +@keyframes Wobble-big{ + from{ transform:rotate(0deg); - top:0px; + transform-origin:36px 139px; + } + 25%{ + transform:rotate(30deg); + transform-origin:36px 139px; } 50%{ - transform:rotate(1440deg); - top: -150px; + transform:rotate(0deg); + transform-origin:36px 139px; + } + 75%{ + transform:rotate(-30deg); + transform-origin:36px 139px; } 100%{ transform:rotate(0deg); - top:0px; + transform-origin:36px 139px; + } +} +@keyframes Wobble-big-tow{ + from{ + transform:rotate(0deg); + transform-origin:43px 120px; + } + 25%{ + transform:rotate(30deg); + transform-origin:43px 120px; + } + 50%{ + transform:rotate(0deg); + transform-origin:43px 120px; + } + 75%{ + transform:rotate(-30deg); + transform-origin:43px 120px; + } + 100%{ + transform:rotate(0deg); + transform-origin:43px 120px; + } +} +@keyframes stickgo{ + 0{ + transform:translateY(0) rotate(0deg); + } + 50%{ + transform:translateY(-150px) rotate(1440deg); + } + 100%{ + transform:translateY(0) rotate(0deg); } } /*烟花*/ diff --git a/css/style.css b/css/style.css index afaa333..d9c8b86 100644 --- a/css/style.css +++ b/css/style.css @@ -356,6 +356,12 @@ body{ .stick-swing{ animation: Wobble 2s linear infinite; } +.stick-swing-big{ + animation: Wobble-big 2s linear infinite; +} +.stick-swing-big-tow { + animation: Wobble-big-tow 2s linear infinite; +} .stick-go{ animation: stickgo 2s linear infinite; } @@ -402,10 +408,42 @@ body{ top: -3px; right: -15px; } -.leading-dancer .stick{ - top: 3px; - right: -30px; +/*大荧光棒*/ +.stick.stick-swing-big,.stick.stick-swing-big-tow{ + background-size: 114px 162px; + background-repeat: no-repeat; + width: 114px ; + height: 162px; } +.leading-dancer .stick{ + top: -70px; + right: -70px; +} +.dance-people .people-img01 .stick.stick-swing-big-tow{ + top: -43px; + right: -40px; +} +.dance-people .people-img02 .stick.stick-swing-big-tow{ + top: -61px; + right: 0px; +} +.dance-people .people-img03 .stick.stick-swing-big-tow{ + top: -67px; + right: -57px; +} +.dance-people .people-img04 .stick.stick-swing-big-tow{ + top: -57px; + right: -50px; +} +.dance-people .people-img05 .stick.stick-swing-big-tow{ + top: -68px; + right: -55px; +} +.dance-people .people-img06 .stick.stick-swing-big-tow{ + top: -55px; + right: -10px; +} +/*大荧光棒*/ .paper-canvas{ width: 100%; height: 100%; diff --git a/dancing.html b/dancing.html index 6498587..8935916 100644 --- a/dancing.html +++ b/dancing.html @@ -41,7 +41,7 @@
-
+
@@ -60,8 +60,6 @@
- - diff --git a/js/custom.js b/js/custom.js index 9cf3f9e..ef4b5cf 100644 --- a/js/custom.js +++ b/js/custom.js @@ -174,11 +174,11 @@ function peopleObj(name,uid,say,action,active_time){
${comment.say}
-
+
${comment.name}
` - }); + });//如果是舰长需要加上stick-swing-big-tow $('.dance-floor').prepend(yspHtml); moveEv(uid); // 随机舞