增加舰长专属巨型光剑

master
cp 2021-11-29 19:16:23 +08:00
parent 6c99084bd7
commit 15041d3fad
4 changed files with 91 additions and 14 deletions

53
css/animate.css vendored
View File

@ -537,18 +537,59 @@
transform-origin:22px 60px; transform-origin:22px 60px;
} }
} }
@keyframes stickgo{ @keyframes Wobble-big{
0{ from{
transform:rotate(0deg); transform:rotate(0deg);
top:0px; transform-origin:36px 139px;
}
25%{
transform:rotate(30deg);
transform-origin:36px 139px;
} }
50%{ 50%{
transform:rotate(1440deg); transform:rotate(0deg);
top: -150px; transform-origin:36px 139px;
}
75%{
transform:rotate(-30deg);
transform-origin:36px 139px;
} }
100%{ 100%{
transform:rotate(0deg); 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);
} }
} }
/*烟花*/ /*烟花*/

View File

@ -356,6 +356,12 @@ body{
.stick-swing{ .stick-swing{
animation: Wobble 2s linear infinite; 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{ .stick-go{
animation: stickgo 2s linear infinite; animation: stickgo 2s linear infinite;
} }
@ -402,10 +408,42 @@ body{
top: -3px; top: -3px;
right: -15px; right: -15px;
} }
.leading-dancer .stick{ /*大荧光棒*/
top: 3px; .stick.stick-swing-big,.stick.stick-swing-big-tow{
right: -30px; 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{ .paper-canvas{
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@ -41,7 +41,7 @@
<div class="leading"> <div class="leading">
<div class="speak speak-pink"></div> <div class="speak speak-pink"></div>
<div class="leading-dancer dancing-wobble-right"> <div class="leading-dancer dancing-wobble-right">
<div class="stick stick-06 stick-swing"></div> <div class="stick stick-06 stick-swing-big"></div>
</div> </div>
<div class="table"> <div class="table">
<img src="image/icon_01.png" /> <img src="image/icon_01.png" />
@ -60,8 +60,6 @@
</div> </div>
</div> </div>
</div>
</div>
<!--小纸片氛围js--> <!--小纸片氛围js-->
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--小纸片氛围js--> <!--小纸片氛围js-->

View File

@ -174,11 +174,11 @@ function peopleObj(name,uid,say,action,active_time){
<div id="${comment.uid}" data-time="${comment.active_time}" class="dance-people data${peopleId}" style="top: ${comment.top}; left: ${comment.left};"> <div id="${comment.uid}" data-time="${comment.active_time}" class="dance-people data${peopleId}" style="top: ${comment.top}; left: ${comment.left};">
<div class="speak ">${comment.say}</div> <div class="speak ">${comment.say}</div>
<div class="people-img ${comment.peopleImg} ${comment.dancin}"> <div class="people-img ${comment.peopleImg} ${comment.dancin}">
<div class="stick stick-swing ${comment.ying_guang}"></div> <div class="stick stick-swing stick-swing-big-tow ${comment.ying_guang}"></div>
<div class="people-name ">${comment.name}</div> <div class="people-name ">${comment.name}</div>
</div> </div>
</div>` </div>`
}); });//如果是舰长需要加上stick-swing-big-tow
$('.dance-floor').prepend(yspHtml); $('.dance-floor').prepend(yspHtml);
moveEv(uid); moveEv(uid);
// 随机舞 // 随机舞