squareDancing/dancing.html

165 lines
4.7 KiB
HTML
Raw Normal View History

2021-11-18 10:29:59 +00:00
<!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" />
2021-11-20 13:07:24 +00:00
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
2021-11-24 08:17:16 +00:00
<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>
2021-11-26 07:01:54 +00:00
<div class="ground-bg">
2021-11-18 10:29:59 +00:00
<!--灯光-->
<div class="Lighting">
</div>
<!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
2021-11-26 07:01:54 +00:00
2021-11-18 10:29:59 +00:00
<!--地面灯光-->
<div class="ground-light">
<div class="ground-animate"></div>
</div>
<!--舞台背景-->
<div class="stage">
2021-11-23 04:54:37 +00:00
<div class="video">
<video id="mousedown" loop autoplay muted src="image/vd.mp4" ></video>
2021-11-18 10:29:59 +00:00
</div>
<!--音乐-->
2021-11-23 04:54:37 +00:00
<audio id="music" data-song="顶级 Slow 气派炸街5.0.mp3" controls autoplay loop style="z-index: 999; position: fixed;display: none;">
2021-11-24 08:20:50 +00:00
<source src="https://bili.scdxtc.cn/music/顶级 Slow 气派炸街5.0.mp3" type="audio/mp3">
</audio>
<!--点击播放音乐-->
2021-11-18 10:29:59 +00:00
<script>
document.body.addEventListener('mousedown', function(){
2021-11-23 04:15:38 +00:00
$('#music')[0].play()
2021-11-18 10:29:59 +00:00
}, false);
</script>
<!---->
<div class="sound">
<img src="image/icon_02.png" />
</div>
<div class="leading">
2021-11-19 15:57:11 +00:00
<div class="speak speak-pink"></div>
<div class="leading-dancer dancing-wobble-right">
2021-11-18 10:29:59 +00:00
</div>
<div class="table">
<img src="image/icon_01.png" />
2021-11-19 15:57:11 +00:00
<p class="name">当前领舞:<span class="lingname"></span></p>
2021-11-18 10:29:59 +00:00
</div>
</div>
</div>
<!--大航海介绍-->
<div class="types">
<!-- <div class="name">
2021-11-20 13:07:24 +00:00
<p>送任意电池可获得荧光棒!<br />
大航海排名前三可成为领舞!<br />
领舞特权:切歌,镜头,统一动作”跳跃,旋转,向左,向右,向左抖腿,向右抖腿”,
一起喊“任意文字”
2021-11-18 10:29:59 +00:00
</p>
</div> -->
2021-11-19 15:57:11 +00:00
<!-- <div class="list">
2021-11-20 13:07:24 +00:00
<p>1最炫民族风</p>
<p>2爱情买卖</p>
<p>3两只蝴蝶</p>
2021-11-19 15:57:11 +00:00
</div> -->
2021-11-18 10:29:59 +00:00
</div>
<!--舞池-->
2021-11-20 13:07:24 +00:00
<!--当前舞池动作: dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
<div class="dance-floor-box">
2021-11-19 13:54:50 +00:00
<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>
2021-11-18 10:29:59 +00:00
</div>
2021-11-19 13:54:50 +00:00
</div> -->
<!-- <div class="dance-people" style="top: 30%; left: 20%;">
<div class="speak ">
切歌,镜头,统一动作”跳跃,旋转,向左,向右”,
2021-11-18 10:29:59 +00:00
</div>
2021-11-19 13:54:50 +00:00
<div class="people-img people-img01 dancing-left">
<div class="stick stick-01 ">
</div>
<div class="people-name ">
内有猛犬小心
</div>
2021-11-18 10:29:59 +00:00
</div>
</div>
2021-11-19 13:54:50 +00:00
<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>
2021-11-18 10:29:59 +00:00
</div>
</div>
2021-11-19 13:54:50 +00:00
<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>
2021-11-18 10:29:59 +00:00
</div>
2021-11-19 13:54:50 +00:00
</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>
2021-11-18 10:29:59 +00:00
</div>
</div>
2021-11-19 13:54:50 +00:00
<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>
2021-11-18 10:29:59 +00:00
</div>
</div>
2021-11-19 13:54:50 +00:00
<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>
2021-11-18 10:29:59 +00:00
</div>
2021-11-19 13:54:50 +00:00
</div>
2021-11-18 10:29:59 +00:00
</div>
2021-11-19 13:54:50 +00:00
<!--舞池 end-->
2021-11-20 13:07:24 +00:00
</div>
</div>
</div>
2021-11-18 10:29:59 +00:00
<!--小纸片氛围js-->
2021-11-23 13:25:27 +00:00
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
2021-11-18 10:29:59 +00:00
<!--小纸片氛围js-->
<!-- fireworks scripts -->
2021-11-23 10:04:02 +00:00
<div class="w3-agilefireworks">
<div class="agilefireworks-bg">
</div>
2021-11-23 10:04:02 +00:00
</div>
<script type="text/javascript" src="js/fireworks.js"></script>
<script>
</script>
<!-- //fireworks scripts -->
2021-11-18 10:29:59 +00:00
</body>
</html>