chen
/
squareDancing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改镜头特效 

Signed-off-by: milo <zwesy@qq.com>
master
milo 2021-11-19 11:04:56 +08:00
parent fbdca13ce8
commit 662cc1ab83
5 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/animate.css vendored
View File

@ -18,6 +18,7 @@
opacity: 0; opacity: 0;
} }
} }
/*全屏抖动*/
@keyframes scale-body{ @keyframes scale-body{
0%{ 0%{
transform: scale(1); transform: scale(1);
@ -441,72 +442,80 @@
@keyframes scale-left{ @keyframes scale-left{
0{ 0{
transform:scale(1,1); transform:scale(1,1);
transform-origin:left 90%; transform-origin:0rem 18.75rem;
} }
10%{ 1%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:left 90%; transform-origin:0rem 18.75rem;
} }
90%{ 40%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:right 90%; transform-origin:100% 18.75rem;
}
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
} }
100%{ 100%{
transform-origin:right 90%; transform-origin:50% 50%;
transform: scale(1,1); transform: scale(1,1);
} }
} }
@keyframes scale-right{ @keyframes scale-right{
0{ 0{
transform:scale(1,1); transform:scale(1,1);
transform-origin:right 90%; transform-origin:100% 18.75rem;
} }
10%{ 1%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:right 90%; transform-origin:100% 18.75rem;
} }
90%{ 90%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:left 90%; transform-origin:0 18.75rem;
} }
100%{ 100%{
transform-origin:left 90%; transform-origin:0 18.75rem;
transform:scale(1,1); transform:scale(1,1);
} }
} }
@keyframes scale-bottom-right{ @keyframes scale-bottom-right{
0{ 0{
transform:scale(1,1); transform:scale(1,1);
transform-origin:right 200%; transform-origin:100% 43.75rem;
} }
10%{ 1%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:right 200%; transform-origin:100% 43.75rem;
} }
90%{ 40%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:left 200%; transform-origin:0 43.75rem;
}
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
} }
100%{ 100%{
transform-origin:left 200%; transform-origin:50% 50%;
transform: scale(1,1); transform: scale(1,1);
} }
} }
@keyframes scale-bottom-left{ @keyframes scale-bottom-left{
0{ 0{
transform:scale(1,1); transform:scale(1,1);
transform-origin:left 200%; transform-origin:0 43.75rem;
} }
10%{ 1%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:left 200%; transform-origin:0 43.75rem;
} }
90%{ 90%{
transform:scale(1.4,1.4); transform:scale(1.4,1.4);
transform-origin:right 200%; transform-origin:100% 43.75rem;
} }
100%{ 100%{
transform-origin:right 200%; transform-origin:100% 43.75rem;
transform:scale(1,1); transform:scale(1,1);
} }
} }

10
css/style.css
View File

@ -139,13 +139,13 @@ input, textarea, select {
} }
/*镜头拉近*/ /*镜头拉近*/
.scale-left{ .scale-left{
animation: scale-left 8s linear normal; animation: scale-left 12s linear normal;
} }
.scale-right{ .scale-right{
animation: scale-right 8s linear normal; animation: scale-right 8s linear normal;
} }
.scale-bottom-right{ .scale-bottom-right{
animation: scale-bottom-right 8s linear normal; animation: scale-bottom-right 12s linear normal;
} }
.scale-bottom-left{ .scale-bottom-left{
animation: scale-bottom-left 8s linear normal; animation: scale-bottom-left 8s linear normal;
@ -161,6 +161,12 @@ body{
position: absolute; position: absolute;
} }
.ground-bg{
background: url(../image/img_0x.png) no-repeat;
width: 100%;
height: 100%;
/* transform: scale(0.9,0.9); */
}
.Lighting{ .Lighting{
position: fixed; position: fixed;
z-index: 99; z-index: 99;

13
dancing.html
View File

@ -8,10 +8,12 @@
<link rel="stylesheet" type="text/css" href="css/style-jq.css" /> <link rel="stylesheet" type="text/css" href="css/style-jq.css" />
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <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/custom.js" type="text/javascript" charset="utf-8"></script>
<body class=""><!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right --> <body>
<!--灯光--> <!--灯光-->
<div class="Lighting"> <div class="Lighting">
</div> </div>
<!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
<div class=" scale-bottom-right ground-bg">
<!--地面灯光--> <!--地面灯光-->
<div class="ground-light"> <div class="ground-light">
<div class="ground-animate"></div> <div class="ground-animate"></div>
@ -22,7 +24,7 @@
<video id="mousedown" loop autoplay muted src="image/vd.mp4" ></video> <video id="mousedown" loop autoplay muted src="image/vd.mp4" ></video>
</div> </div>
<!--音乐--> <!--音乐-->
<audio controls autoplay muted style="z-index: 999; position: fixed;display: none;"> <audio controls autoplay loop muted style="z-index: 999; position: fixed;display: none;">
<source src="muz/829094.mp3" type="audio/mpeg"> <source src="muz/829094.mp3" type="audio/mpeg">
</audio> </audio>
<!--点击播放音乐--> <!--点击播放音乐-->
@ -40,7 +42,7 @@
<div class="speak speak-pink"> <div class="speak speak-pink">
一起：起来嗨！ 一起：起来嗨！
</div> </div>
<div class="leading-dancer dancing-right"> <div class="leading-dancer dancing-Wobble-right">
</div> </div>
<div class="table"> <div class="table">
<img src="image/icon_01.png" /> <img src="image/icon_01.png" />
@ -51,7 +53,7 @@
<!--大航海介绍--> <!--大航海介绍-->
<div class="types"> <div class="types">
<!-- <div class="name"> <!-- <div class="name">
<p>送任意电池可获得荧光棒！<br /> 大航海排名前三可成为领舞!<br /> 领舞特权：切歌，镜头，统一动作”跳跃，旋转，向左，向右”， 一起喊“任意文字”，一起嗨:会下纸片 <p>送任意电池可获得荧光棒！<br /> 大航海排名前三可成为领舞!<br /> 领舞特权：切歌，镜头，统一动作”跳跃，旋转，向左，向右，向左抖腿，向右抖腿”， 一起喊“任意文字”
</p> </p>
</div> --> </div> -->
<div class="list"> <div class="list">
@ -136,8 +138,9 @@
</div> </div>
</div> </div>
<!--舞池 end--> <!--舞池 end-->
</div>
<!--小纸片氛围js--> <!--小纸片氛围js-->
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--小纸片氛围js--> <!--小纸片氛围js-->

BIN
image/img_0x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 469 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

4
js/custom.js
View File

@ -102,11 +102,11 @@ $(function(){
var sayIndex = Math.floor(Math.random()*sayArr.length); var sayIndex = Math.floor(Math.random()*sayArr.length);
var actionIndex = Math.floor(Math.random()*actionArr.length); var actionIndex = Math.floor(Math.random()*actionArr.length);
num++; num++;
if(num==300){ if(num==200){
clearInterval(timer); clearInterval(timer);
} else { } else {
peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex]); peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex]);
} }
},000) },0)
}) })