167 lines
4.7 KiB
HTML
167 lines
4.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title></title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="css/animate.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|||
|
|
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script src="./js/handle2.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<body>
|
|||
|
|
<!--灯光-->
|
|||
|
|
<div class="Lighting">
|
|||
|
|
</div>
|
|||
|
|
<!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
|
|||
|
|
<div class=" ground-bg">
|
|||
|
|
<!--地面灯光-->
|
|||
|
|
<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 controls autoplay loop muted style="z-index: 999; position: fixed;display: none;">
|
|||
|
|
<source src="muz/829094.mp3" type="audio/mpeg">
|
|||
|
|
</audio>
|
|||
|
|
<!--点击播放音乐-->
|
|||
|
|
<script>
|
|||
|
|
document.body.addEventListener('mousedown', function(){
|
|||
|
|
var vdo = $("audio")[0]; //jquery
|
|||
|
|
vdo.muted = false;
|
|||
|
|
}, 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="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="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>
|
|||
|
|
<!--小纸片氛围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>
|
|||
|
|
setTimeout(function() {
|
|||
|
|
$('.w3-agilefireworks').fireworks();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<!-- //fireworks scripts -->
|
|||
|
|
</body>
|
|||
|
|
</html>
|