亚伦影音工作室 发表于 2024-3-5 10:15

音乐控制软翻书【2】配同步歌词

<style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a135734b876572fb7045d994fc5ea156.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:150px;margin-left: -300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
#mplayer { width: 120px;
    height: 120px;
    position: absolute;z-index: 50;
   left: 30px;
    top: 480px;
background:url(https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png)no-repeat center/cover;
    cursor: pointer;
    animation: rot 5s linear infinite ;
}
@keyframes rot { to { transform: rotate(360deg); } }
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:40px; transform: translate(-50%, 0px);font:normal 2.5em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%); filter: drop-shadow( 2px 2px 0px #ffffff);z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 40%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 20px; height: 0;} to { width: 100%;height: 300%;} }
@keyframes cover2 {0% { width: 100%;letter-spacing: 20px; height: 0;color:#000090;}100% { width: 100%; height: 300%; } }
.book {
position: relative;
perspective: 640px;
perspective-origin: center 50px; top: -240px;
transform: rotate(20deg)scale(1.5);
filter: drop-shadow(0px 5px 5px #333333);
}

.page {
width: 210px;
height: 300px;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 50%;
transform-origin: 100% 100%;
border: solid #555555 0.5px;
background-size: 420px 300px;
background-position: center;
transform-style: preserve-3d;
}
.page:nth-child(1) {
transform: rotateX(60deg) rotateY(3deg);
}
.page:nth-child(2) {
transform: rotateX(60deg) rotateY(4.5deg);
}
.page:nth-child(3) {
transform: rotateX(60deg) rotateY(6deg);
animation: nextPage 25s infinite -24s steps(1);
background-size: 420px 300px;
background-position: -2px -2px;
}

.stop .page:nth-child(3){animation-play-state: paused;}
.page:nth-child(4) {
transform: rotateX(60deg) rotateY(177deg);
}
.page:nth-child(5) {
transform: rotateX(60deg) rotateY(175.5deg);
}
.page:nth-child(6) {
transform: rotateX(60deg) rotateY(174deg);
overflow: hidden;
}
.page:nth-child(6)::after {
content: "";
width: 210px;
height: 300px;
position: absolute;
top: 0;
right: 0;
transform-origin: center;
transform: rotateY(180deg);
   animation: nextPage 25s -20s infinite steps(1);
background-size: 420px 300px;
background-position: 100% -2px;
}

.stop .page:nth-child(6)::after{animation-play-state: paused;}
@keyframes nextPage {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
}
}

.gap {
width: 10px;
height: 300px;
background: none;
transform: rotateX(60deg);
transform-origin: bottom;
position: absolute;
top: 0px;
left: calc(50% - 5px);
}
.gap::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
background-color: #555555;
width: 10px;
height: 5px;
border-radius: 50%;
}

.pages, .flips {
transform-style: preserve-3d;
}

.flip {
width: 32px;
height: 300px;
position: absolute;
top: 0px;
transform-origin: 100% 100%;
right: 100%;
border: solid #555555 ;
border-width: 2px 0px;
perspective: 8200px;
perspective-origin: center;
transform-style: preserve-3d;
background-size: 420px 300px;
}
.flip::after {
content: "";
position: absolute;
top: 0px;
right: 0%;
width: 100%;
height: 100%;
transform-origin: center;
background-size: 420px 300px;
}
.flip.flip1 {
right: 50%;
animation: flip1 5s infinite ease-in-out;
border-width: 1px 1px 1px 0;
}
.stop .flip.flip1{animation-play-state: paused;}

.flip.flip1::after {
animation: nextFlip1 25s -20s infinite steps(1);
}
.stop .flip.flip1::after{animation-play-state: paused;}

.flip:not(.flip1) {
right: calc(100% - 2px);
top: -2px;
transform-origin: right;
animation: flip2 5s ease-in-out infinite;
}
.stop .flip:not(.flip1){animation-play-state: paused;}

.flip.flip2::after {
animation: nextFlip2 25s -20s infinite steps(1);
}
.stop .flip.flip2::after{animation-play-state: paused;}
.flip.flip3::after {
animation: nextFlip3 25s -20s infinite steps(1);
}
.stop .flip.flip3::after{animation-play-state: paused;}
.flip.flip4::after {
animation: nextFlip4 25s -20s infinite steps(1);
}
.stop .flip.flip4::after{animation-play-state: paused;}
.flip.flip5::after {
animation: nextFlip5 25s -20s infinite steps(1);
}
.stop .flip.flip5::after{animation-play-state: paused;}
.flip.flip6::after {
animation: nextFlip6 25s -20s infinite steps(1);
}
.stop .flip.flip6::after{animation-play-state: paused;}
.flip.flip7::after {animation: nextFlip7 25s -20s infinite steps(1);
}
.stop .flip.flip7::after{animation-play-state: paused;}
.flip.flip7 {
width: 30px;
border-width: 2px 0px 2px 2px;
}
.flip.flip7::after {
animation: nextFlip7 25s -20s infinite steps(1);
}
.stop .flip.flip7::after{animation-play-state: paused;}
@keyframes flip1 {
0%, 20% {
    transform: rotateX(60deg) rotateY(6deg);
}
80%, 100% {
    transform: rotateX(60deg) rotateY(174deg);
}
}

@keyframes flip2 {
0%, 20% {
    transform: rotateY(0deg) translateY(0px);
}
50% {
    transform: rotateY(-15deg) translateY(0px);
}
}


@keyframes nextFlip1 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
10% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
30% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
50% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
70% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
90% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip2 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
10.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
30.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
50.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
70.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
90.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip3 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
11% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
31% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
51% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
71% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
91% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip4 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
11.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
31.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
51.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
71.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
91.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip5 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
12% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
32% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
52% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
72% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
92% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip6 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
12.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
32.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
52.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
72.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
92.5% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip7 {
0% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
13% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
33% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
53% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
73% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
93% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
}
</style>

<div id="papa">

<div class="book" id="testImg">

   <div class="gap"></div>
    <div class="pages">
      <div class="page"></div>
      <div class="page"></div>
      <div class="page"></div>
      <div class="page"></div>
      <div class="page"></div>
      <div class="page"></div>
    </div>
    <div class="flips">
      <div class="flip flip1">
      <div class="flip flip2">
          <div class="flip flip3">
            <div class="flip flip4">
            <div class="flip flip5">
                <div class="flip flip6">
                  <div class="flip flip7"></div>
                </div>
            </div>
            </div>
          </div>
      </div>
      </div>
   </div>
</div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
<divid="mplayer" title="暂停/播放"></div>
<audioid="aud" loop >
<source src="https://mp3.t57.cn:7087/kwlink_d.php?id=338020228" type="audio/mp3" /></audio>
</div>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

mplayer.onclick = () => aud.paused ? (aud.play()): (aud.pause());
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>
<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `春泥 - 半吨兄弟
作词Lyrics：伊能静
作曲Composer：庾澄庆
漫天的话语
纷乱落在耳际
你我沉默不回应
牵你的手
你却哭红了眼睛
路途漫长无止尽
多想提起勇气
好好地呵护你
不让你受委屈
苦也愿意
那些痛的记忆
落在春的泥土里
滋养了大地
开出下一个花季
风中你的泪滴
滴滴落在回忆里
让我们取名叫做珍惜
迷雾散尽
一切终于变清晰
爱与痛都成回忆
遗忘过去
繁花灿烂在天际
等待已有了结局
我会提起勇气
好好地呵护你
不让你受委屈
苦也愿意
那些痛的记忆
落在春的泥土里
滋养了大地
开出下一个花季
风中你的泪滴
滴滴落在回忆里
让我们取名叫做珍惜
漫天纷飞的花雨
落在春的泥土里
滋养了大地
开出下一个花季
风中你的泪滴
滴滴落在回忆里
让我们取名叫做珍惜
落在春的泥土里
滋养了大地
开出下一个花季
风中你的泪滴
滴滴落在回忆里
让我们取名叫做珍惜
让我们懂得学会珍惜
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       

樵歌 发表于 2024-3-5 14:40

哇，全是不食人间烟火的娇娃{:4_189:}

小辣椒 发表于 2024-3-5 19:51

亚伦这个代码出错了，画面变形了，有时间加不了分

红影 发表于 2024-3-5 22:05

制作很漂亮，但是代码貌似和论坛程序有冲突呢{:4_187:}
页: [1]
查看完整版本: 音乐控制软翻书【2】配同步歌词