no message
parent
60e47f93df
commit
c6242d4681
|
@ -44,10 +44,10 @@
|
||||||
}
|
}
|
||||||
@keyframes scale{
|
@keyframes scale{
|
||||||
0%{
|
0%{
|
||||||
transform: scale(.9);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
100%{
|
100%{
|
||||||
transform: scale(.91);
|
transform: scale(1.02);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes blendmode{
|
@keyframes blendmode{
|
||||||
|
|
|
@ -137,20 +137,26 @@ body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 101vh;
|
height: 101vh;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: url(../image/img_01.png) no-repeat;
|
background: url(../image/img_01.png) no-repeat ;
|
||||||
|
background-size: 1920px 1080px;
|
||||||
|
background-position: 0 -3.125rem;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.scale-body{
|
.scale-body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 101vh;
|
height: 101vh;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: url(../image/img_01.png) no-repeat;
|
background: url(../image/img_01.png) no-repeat bottom;
|
||||||
|
background-size: 1920px 1080px;
|
||||||
|
background-position: 0 -3.125rem;
|
||||||
animation: scale-body .6s linear infinite;
|
animation: scale-body .6s linear infinite;
|
||||||
}
|
}
|
||||||
.lighting-bg{
|
.lighting-bg{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0.5rem;
|
top: 0rem;
|
||||||
mix-blend-mode: lighten;
|
mix-blend-mode: lighten;
|
||||||
display: none;
|
display: none;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.fireworks{
|
.fireworks{
|
||||||
display: block!important;
|
display: block!important;
|
||||||
|
@ -199,20 +205,21 @@ body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.stage .sound{
|
.stage .sound{
|
||||||
width:1178px;
|
width:770px;
|
||||||
height: 347px;
|
height: 190px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: -220px;
|
margin-top: -120px;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.stage .sound img{
|
.stage .sound img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: scale .4s linear infinite;
|
animation: scale .2s linear infinite;
|
||||||
}
|
}
|
||||||
.stage .leading{
|
.stage .leading{
|
||||||
width: 203px;
|
width: 356px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: -250px auto 0;
|
margin: -220px auto 0;
|
||||||
}
|
}
|
||||||
.stage .leading .leading-dancer{
|
.stage .leading .leading-dancer{
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
@ -224,7 +231,7 @@ body{
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.stage .leading .table{
|
.stage .leading .table{
|
||||||
margin-top: -25px;
|
margin-top: -35px;
|
||||||
}
|
}
|
||||||
.stage .leading .table img{
|
.stage .leading .table img{
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
@ -233,7 +240,7 @@ body{
|
||||||
color: #ffd800;
|
color: #ffd800;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: -36px;
|
margin-top: -66px;
|
||||||
}
|
}
|
||||||
.speak{
|
.speak{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -268,11 +275,12 @@ body{
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
margin: -78px auto 0;
|
margin: -78px auto 0;
|
||||||
display: none;
|
display: none;
|
||||||
min-width: 160px;
|
min-width: 356px;
|
||||||
}
|
}
|
||||||
.speak.speak-pink::after{
|
.speak.speak-pink::after{
|
||||||
background: url(../image/icon_03.png) no-repeat;
|
background: url(../image/icon_03.png) no-repeat;
|
||||||
left:60px;
|
left:60px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.types{
|
.types{
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
@ -297,9 +305,10 @@ body{
|
||||||
.dance-floor-box{
|
.dance-floor-box{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 150px;
|
left: 150px;
|
||||||
width:calc(100% - 300px);
|
width:calc(100% - 280px);
|
||||||
height: calc(100vh - 410px);
|
height: calc(100vh - 410px);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
bottom: 100px;
|
||||||
}
|
}
|
||||||
.dance-floor{
|
.dance-floor{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -469,4 +478,13 @@ body{
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(0,0,0,.2);
|
background: rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
.video-bg{
|
||||||
|
width: 1920px;
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.video-bg video{
|
||||||
|
width: 1920px;
|
||||||
}
|
}
|
13
dancing.html
13
dancing.html
|
@ -39,8 +39,8 @@
|
||||||
<img src="image/icon_02.png" />
|
<img src="image/icon_02.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="leading">
|
<div class="leading">
|
||||||
<div class="speak speak-pink"></div>
|
<div class="speak speak-pink" ></div>
|
||||||
<div class="leading-dancer dancing-wobble-right">
|
<div class="leading-dancer dancing-right">
|
||||||
<div class="stick stick-06 stick-swing-big "></div>
|
<div class="stick stick-06 stick-swing-big "></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table">
|
<div class="table">
|
||||||
|
@ -56,13 +56,16 @@
|
||||||
<!--当前舞池动作: dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
|
<!--当前舞池动作: dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
|
||||||
<div class="dance-floor-box">
|
<div class="dance-floor-box">
|
||||||
<div class="dance-floor">
|
<div class="dance-floor">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-->
|
||||||
|
<!--视频灯光-->
|
||||||
|
<div class="video-bg">
|
||||||
|
<video loop autoplay muted src="https://bili.scdxtc.cn/video/img-bg.mp4" ></video>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 72 KiB |
BIN
image/img_01.png
BIN
image/img_01.png
Binary file not shown.
Before Width: | Height: | Size: 331 KiB After Width: | Height: | Size: 87 KiB |
Loading…
Reference in New Issue