squareDancing/dancing.html

167 lines
4.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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/custom.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/handle.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 id="music" data-song="顶级 Slow 气派炸街5.0.mp3" controls autoplay loop style="z-index: 999; position: fixed;display: none;">
<source src="http://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="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>