diff --git a/css/animate.css b/css/animate.css index 1013c38..e5bb134 100644 --- a/css/animate.css +++ b/css/animate.css @@ -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; + } +} diff --git a/css/style.css b/css/style.css index 74fc5b4..402752d 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/dancing.html b/dancing.html index a150407..797dfee 100644 --- a/dancing.html +++ b/dancing.html @@ -9,156 +9,63 @@ -
- -
-
- -
-
-
- -
-
- -
- - - - - -
- -
-
-
-
+
+
+ +
-
- -

当前领舞：

+ + +
+
-
-
- -
- - -
- - - -
+ +
+
+ +
+ + + + + +
+ +
+
+
+
+
+
+ +

当前领舞：

+
+
+
+ +
+ +
+ +
- - -
+
- - -
-
-
-
- - - diff --git a/image/img_01.gif b/image/img_01.gif new file mode 100644 index 0000000..f30b87e Binary files /dev/null and b/image/img_01.gif differ diff --git a/js/handle.js b/js/handle.js index 630528d..36ce580 100644 --- a/js/handle.js +++ b/js/handle.js @@ -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 = ''