chen
/
squareDancing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加烟花动效

master
cp 2021-11-26 19:50:04 +08:00
parent 90f0f40207
commit 454e66451d
5 changed files with 81 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/animate.css vendored
View File

@ -448,14 +448,10 @@
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:0rem 18.75rem; transform-origin:0rem 18.75rem;
} }
40%{ 90%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:100% 18.75rem; transform-origin:100% 18.75rem;
} }
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
}
100%{ 100%{
transform-origin:50% 50%; transform-origin:50% 50%;
transform: scale(1,1); transform: scale(1,1);
@ -540,3 +536,12 @@
transform-origin:22px 60px; transform-origin:22px 60px;
} }
} }
/*烟花*/
@keyframes fireworks{
from{
display: none;
}
to{
display: block;
}
}

25
css/style.css
View File

@ -131,16 +131,29 @@ body{
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
top:0px; top:0px;
animation: scale-body .6s linear infinite;
} }
.ground-bg{ .ground-bg{
width: 100%;
height: 101vh;
position: absolute; position: absolute;
background: url(../image/img_01.png) no-repeat; background: url(../image/img_01.png) no-repeat;
/* background: url(../image/img_0x.png) no-repeat; */ }
.scale-body{
width: 100%; width: 100%;
height: 110%; height: 101vh;
/* transform: scale(0.9,0.9); */ position: absolute;
background: url(../image/img_01.png) no-repeat;
animation: scale-body .6s linear infinite;
}
.lighting-bg{
position: fixed;
top: 0.5rem;
mix-blend-mode: lighten;
display: none;
}
.fireworks{
display: block;
} }
.Lighting{ .Lighting{
position: fixed; position: fixed;
@ -283,8 +296,8 @@ body{
/*舞池*/ /*舞池*/
.dance-floor-box{ .dance-floor-box{
position: fixed; position: fixed;
left: 220px; left: 150px;
width:calc(100% - 440px); width:calc(100% - 300px);
height: calc(100vh - 410px); height: calc(100vh - 410px);
z-index: 9999; z-index: 9999;
} }

181
dancing.html
View File

@ -9,156 +9,63 @@
<script src="./js/custom.js" type="text/javascript" charset="utf-8"></script> <script src="./js/custom.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/handle.js" type="text/javascript" charset="utf-8"></script> <script src="./js/handle.js" type="text/javascript" charset="utf-8"></script>
<body> <body>
<div class="ground-bg">
<!--灯光-->
<div class="Lighting">
</div>
<!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right --> <!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
<!--地面灯光--> <div class=" ground-bg">
<div class="ground-light"> <div class="scale-body">
<div class="ground-animate"></div> <!--灯光-->
</div> <div class="Lighting">
<!--舞台背景-->
<div class="stage">
<div class="video">
<video id="mousedown" loop autoplay muted src="image/vd.mp4" ></video>
</div>
<!--音乐-->
<audio id="music" data-song="顶级 Slow 气派炸街5.0.mp3" controls autoplay loop style="z-index: 999; position: fixed;display: none;">
<source src="https://bili.scdxtc.cn/music/顶级 Slow 气派炸街5.0.mp3" type="audio/mp3">
</audio>
<!--点击播放音乐-->
<script>
document.body.addEventListener('mousedown', function(){
$('#music')[0].play()
}, 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-wobble-right">
</div> </div>
<div class="table">
<img src="image/icon_01.png" /> <!--地面灯光-->
<p class="name">当前领舞：<span class="lingname"></span></p> <div class="ground-light">
<div class="ground-animate"></div>
</div> </div>
</div> <!--舞台背景-->
</div> <div class="stage">
<!--大航海介绍--> <div class="video">
<div class="types"> <video id="mousedown" loop autoplay muted src="image/vd.mp4" ></video>
<!-- <div class="name"> </div>
<p>送任意电池可获得荧光棒！<br /> <!--音乐-->
大航海排名前三可成为领舞!<br /> <audio id="music" data-song="顶级 Slow 气派炸街5.0.mp3" controls autoplay loop style="z-index: 999; position: fixed;display: none;">
领舞特权：切歌，镜头，统一动作”跳跃，旋转，向左，向右，向左抖腿，向右抖腿”， <source src="https://bili.scdxtc.cn/music/顶级 Slow 气派炸街5.0.mp3" type="audio/mp3">
一起喊“任意文字” </audio>
</p> <!--点击播放音乐-->
</div> --> <script>
<!-- <div class="list"> document.body.addEventListener('mousedown', function(){
<p>1：最炫民族风</p> $('#music')[0].play()
<p>2：爱情买卖</p> }, false);
<p>3：两只蝴蝶</p> </script>
</div> --> <!---->
</div> <div class="sound">
<!--舞池--> <img src="image/icon_02.png" />
</div>
<!--当前舞池动作： dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right--> <div class="leading">
<div class="dance-floor-box"> <div class="speak speak-pink"></div>
<div class="leading-dancer dancing-wobble-right">
</div>
<div class="table">
<img src="image/icon_01.png" />
<p class="name">当前领舞：<span class="lingname"></span></p>
</div>
</div>
</div>
<!--舞池-->
<div class="lighting-bg">
<img src="image/img_01.gif" />
</div>
<!--当前舞池动作： dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
<div class="dance-floor-box">
<div class="dance-floor"> <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-->
</div> </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-->
<!-- fireworks scripts -->
<div class="w3-agilefireworks">
<div class="agilefireworks-bg">
</div>
</div>
<script type="text/javascript" src="js/fireworks.js"></script>
<script>
</script>
<!-- //fireworks scripts -->
</body> </body>
</html> </html>

BIN
image/img_01.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 MiB

9
js/handle.js
View File

@ -24,6 +24,7 @@ let list = ['scale-left', 'scale-right', 'scale-bottom-left', 'scale-bottom-righ
// 根据事件文字 获取事件名 // 根据事件文字 获取事件名
function getEvent(name) { function getEvent(name) {
let map = { let map = {
'烟花':fireworks(),
'切歌' : 'change_song', '切歌' : 'change_song',
'跳' : 'dancing-down', '跳' : 'dancing-down',
'向左' : 'dancing-left', '向左' : 'dancing-left',
@ -41,6 +42,7 @@ function getEvent(name) {
// 根据事件文字 获取领舞者事件名 // 根据事件文字 获取领舞者事件名
function getLeaderEvent(name) { function getLeaderEvent(name) {
let map = { let map = {
'烟花':fireworks(),
'切歌' : 'change_song', '切歌' : 'change_song',
'一起跳' : 'dancing-down', '一起跳' : 'dancing-down',
'一起向左' : 'dancing-left', '一起向左' : 'dancing-left',
@ -59,7 +61,12 @@ function getLeaderEvent(name) {
function scale() { function scale() {
return list[Math.floor(Math.random() * 3)]; return list[Math.floor(Math.random() * 3)];
} }
function fireworks() {
// $('.lighting-bg').css('display','block');
// setTimeout(()=>{
// $('.lighting-bg').css('display','none');
// },5000)
}
// 字符串包含的事件 （仅取第一个） // 字符串包含的事件 （仅取第一个）
function getFirstEventKeyword(name) { function getFirstEventKeyword(name) {
let event = '' let event = ''