论坛 › 欢乐水吧 › 音乐控制软翻书【1】

亚伦影音工作室 发表于 2024-3-4 16:36

音乐控制软翻书【1】

本帖最后由 亚伦影音工作室 于 2024-3-5 09:09 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://img-baofun.zhhainiao.com/fs/f876bac65d7c5e74b3a0e04db7dc1077.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: 180px;
    height: 180px;
    position: absolute;z-index: 50;
    right: 20px;
    top: 20px;
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); } }

.book {
position: relative;
perspective: 800px;
perspective-origin: center 50px; top: -260px;
transform: scale(1.8);
filter: drop-shadow(0px 5px 5px #eeeeee);
}

.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;

}
.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">&nbsp;</div>

<div class="page">&nbsp;</div>

<div class="page">&nbsp;</div>

<div class="page">&nbsp;</div>

<div class="page">&nbsp;</div>

<div class="page">&nbsp;</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>
       

<divid="mplayer" title="暂停/播放"></div>
<audioid="aud" loop >
<source src="https://mp3.t57.cn:7087/kwlink_d.php?id=342883965" 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>

朵拉 发表于 2024-3-4 20:23

好看 好听{:4_204:}~~

马黑黑 发表于 2024-3-4 20:26

欣赏精美作品

红影 发表于 2024-3-4 23:54

好漂亮的翻页效果。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-3-5 20:39

欣赏亚伦精彩的制作，这个翻页效果和后面那个差不多就没有歌词出来

小辣椒 发表于 2024-3-5 20:39

谢谢亚伦精彩的分享{:4_187:}

查看完整版本: 音乐控制软翻书【1】