剑来动效

master
cp 2021-11-29 13:57:02 +08:00
parent d6e69b73bc
commit 8cdc648d7e
5 changed files with 40 additions and 3 deletions

15
css/animate.css vendored
View File

@ -511,6 +511,7 @@
transform:scale(1,1); transform:scale(1,1);
} }
} }
/*荧光棒*/
@keyframes Wobble{ @keyframes Wobble{
from{ from{
transform:rotate(0deg); transform:rotate(0deg);
@ -536,6 +537,20 @@
transform-origin:22px 60px; transform-origin:22px 60px;
} }
} }
@keyframes stickgo{
0{
transform:rotate(0deg);
top:0px;
}
50%{
transform:rotate(1440deg);
top: -150px;
}
100%{
transform:rotate(0deg);
top:0px;
}
}
/*烟花*/ /*烟花*/
@keyframes fireworks{ @keyframes fireworks{
from{ from{

View File

@ -351,8 +351,13 @@ body{
position: absolute; position: absolute;
height:81px; height:81px;
width:57px; width:57px;
}
.stick-swing{
animation: Wobble 2s linear infinite; animation: Wobble 2s linear infinite;
} }
.stick-go{
animation: stickgo 2s linear infinite;
}
.stick.stick-01{ .stick.stick-01{
background-image: url(../image/img_11.png); background-image: url(../image/img_11.png);
} }

View File

@ -41,6 +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-01"></div> -->
</div> </div>
<div class="table"> <div class="table">
<img src="image/icon_01.png" /> <img src="image/icon_01.png" />

View File

@ -174,7 +174,7 @@ 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 ${comment.ying_guang}"></div> <div class="stick stick-swing ${comment.ying_guang}"></div>
<div class="people-name ">${comment.name}</div> <div class="people-name ">${comment.name}</div>
</div> </div>
</div>` </div>`

View File

@ -27,6 +27,7 @@ let firTimes = 0;
function getEvent(name) { function getEvent(name) {
let map = { let map = {
'烟花':'fireworks', '烟花':'fireworks',
'剑来':'stickgo',
'切歌' : 'change_song', '切歌' : 'change_song',
'跳' : 'dancing-down', '跳' : 'dancing-down',
'向左' : 'dancing-left', '向左' : 'dancing-left',
@ -45,6 +46,7 @@ function getEvent(name) {
function getLeaderEvent(name) { function getLeaderEvent(name) {
let map = { let map = {
'烟花':'fireworks', '烟花':'fireworks',
'剑来':'stickgo',
'切歌' : 'change_song', '切歌' : 'change_song',
'一起跳' : 'dancing-down', '一起跳' : 'dancing-down',
'一起向左' : 'dancing-left', '一起向左' : 'dancing-left',
@ -146,8 +148,8 @@ function receiveMessage(event)
let dataList = JSON.parse(event.data) let dataList = JSON.parse(event.data)
let data = dataList.dm let data = dataList.dm
// 目前硬编码大航海列表 // 目前硬编码大航海列表
// let adminList = dataList.admin let adminList = dataList.admin
adminList = ['流域_墨绿绿']; // adminList = ['流域_墨绿绿'];
// adminList = ['内有猛犬小心']; // adminList = ['内有猛犬小心'];
if (data.length <= 0) { if (data.length <= 0) {
@ -292,6 +294,20 @@ function receiveMessage(event)
},5000) },5000)
} }
} }
if(leader.text==="剑来"){
if(firTimes==0){
firTimes++;
$('.stick').removeClass('stick-swing');
$('.stick').addClass('stick-go');
setTimeout(()=>{
$('.stick').removeClass('stick-go');
$('.stick').addClass('stick-swing');
firTimes = 0;
},6000)
}
}
// 领舞喊一起喊 // 领舞喊一起喊
if (leader.text.length >= 4) { if (leader.text.length >= 4) {
if(leader.text.slice(0,4)=="一起喊:" || leader.text.slice(0,4)=="一起喊:"){ if(leader.text.slice(0,4)=="一起喊:" || leader.text.slice(0,4)=="一起喊:"){