增加烟花动效
parent
90f0f40207
commit
454e66451d
|
|
@ -448,14 +448,10 @@
|
|||
transform:scale(1.4,1.4);
|
||||
transform-origin:0rem 18.75rem;
|
||||
}
|
||||
40%{
|
||||
90%{
|
||||
transform:scale(1.4,1.4);
|
||||
transform-origin:100% 18.75rem;
|
||||
}
|
||||
70%{
|
||||
transform-origin:50% 50%;
|
||||
transform: scale(0.9,0.9);
|
||||
}
|
||||
100%{
|
||||
transform-origin:50% 50%;
|
||||
transform: scale(1,1);
|
||||
|
|
@ -540,3 +536,12 @@
|
|||
transform-origin:22px 60px;
|
||||
}
|
||||
}
|
||||
/*烟花*/
|
||||
@keyframes fireworks{
|
||||
from{
|
||||
display: none;
|
||||
}
|
||||
to{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,16 +131,29 @@ body{
|
|||
height: 100%;
|
||||
overflow: hidden;
|
||||
top:0px;
|
||||
animation: scale-body .6s linear infinite;
|
||||
|
||||
}
|
||||
.ground-bg{
|
||||
width: 100%;
|
||||
height: 101vh;
|
||||
position: absolute;
|
||||
background: url(../image/img_01.png) no-repeat;
|
||||
/* background: url(../image/img_0x.png) no-repeat; */
|
||||
}
|
||||
.scale-body{
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
/* transform: scale(0.9,0.9); */
|
||||
height: 101vh;
|
||||
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{
|
||||
position: fixed;
|
||||
|
|
@ -283,8 +296,8 @@ body{
|
|||
/*舞池*/
|
||||
.dance-floor-box{
|
||||
position: fixed;
|
||||
left: 220px;
|
||||
width:calc(100% - 440px);
|
||||
left: 150px;
|
||||
width:calc(100% - 300px);
|
||||
height: calc(100vh - 410px);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
|
|
|||
181
dancing.html
181
dancing.html
|
|
@ -9,156 +9,63 @@
|
|||
<script src="./js/custom.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="./js/handle.js" type="text/javascript" charset="utf-8"></script>
|
||||
<body>
|
||||
<div class="ground-bg">
|
||||
<!--灯光-->
|
||||
<div class="Lighting">
|
||||
</div>
|
||||
<!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
|
||||
|
||||
<!--地面灯光-->
|
||||
<div class="ground-light">
|
||||
<div class="ground-animate"></div>
|
||||
</div>
|
||||
<!--舞台背景-->
|
||||
<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 class=" ground-bg">
|
||||
<div class="scale-body">
|
||||
<!--灯光-->
|
||||
<div class="Lighting">
|
||||
</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 class="types">
|
||||
<!-- <div class="name">
|
||||
<p>送任意电池可获得荧光棒！<br />
|
||||
大航海排名前三可成为领舞!<br />
|
||||
领舞特权：切歌，镜头，统一动作”跳跃，旋转，向左，向右，向左抖腿，向右抖腿”，
|
||||
一起喊“任意文字”
|
||||
</p>
|
||||
</div> -->
|
||||
<!-- <div class="list">
|
||||
<p>1：最炫民族风</p>
|
||||
<p>2：爱情买卖</p>
|
||||
<p>3：两只蝴蝶</p>
|
||||
</div> -->
|
||||
</div>
|
||||
<!--舞池-->
|
||||
|
||||
<!--当前舞池动作： dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
|
||||
<div class="dance-floor-box">
|
||||
<!--舞台背景-->
|
||||
<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 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-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>
|
||||
<!--小纸片氛围js-->
|
||||
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
|
||||
<!--小纸片氛围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>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 61 MiB |
|
|
@ -24,6 +24,7 @@ let list = ['scale-left', 'scale-right', 'scale-bottom-left', 'scale-bottom-righ
|
|||
// 根据事件文字 获取事件名
|
||||
function getEvent(name) {
|
||||
let map = {
|
||||
'烟花':fireworks(),
|
||||
'切歌' : 'change_song',
|
||||
'跳' : 'dancing-down',
|
||||
'向左' : 'dancing-left',
|
||||
|
|
@ -41,6 +42,7 @@ function getEvent(name) {
|
|||
// 根据事件文字 获取领舞者事件名
|
||||
function getLeaderEvent(name) {
|
||||
let map = {
|
||||
'烟花':fireworks(),
|
||||
'切歌' : 'change_song',
|
||||
'一起跳' : 'dancing-down',
|
||||
'一起向左' : 'dancing-left',
|
||||
|
|
@ -59,7 +61,12 @@ function getLeaderEvent(name) {
|
|||
function scale() {
|
||||
return list[Math.floor(Math.random() * 3)];
|
||||
}
|
||||
|
||||
function fireworks() {
|
||||
// $('.lighting-bg').css('display','block');
|
||||
// setTimeout(()=>{
|
||||
// $('.lighting-bg').css('display','none');
|
||||
// },5000)
|
||||
}
|
||||
// 字符串包含的事件 （仅取第一个）
|
||||
function getFirstEventKeyword(name) {
|
||||
let event = ''
|
||||
|
|
|
|||
Loading…
Reference in New Issue