论坛 › 【代码图腾】 › 软翻书（套用亚伦源码）

相约爱晚亭 发表于 2022-11-11 12:32

软翻书（套用亚伦源码）

<style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;text-align:center;font-size:2.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:15%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 11}#rdisk{position:absolute;left:20px;bottom:10px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;z-index: 11}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
       

#hWindow {
        width:1200px;
                height:620px;
               
                bbbackground-size:cover;
               
               
                position: relative;
                margin:0px0px;
                overflow:hidden;
                z-index: 9;
        }

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 0;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 0;
}

#hWindow:hover #mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}
#hWindow:hover #mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}

@keyframes fly {0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 30% 1600%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% -1600%;
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}

.book {
position: relative;
perspective: 730px;
perspective-origin: center 50px; top: -80px;
transform: scale(1.5,1.7);
filter: drop-shadow(0px 5px 5px #cccccc);
}

.page {
width: 210px;
height: 300px;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 50%;
transform-origin: 100% 100%;
border: solid #555555 0.4px;
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;
}
.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: 0px;
right: 0%;
transform-origin: center;
transform: rotateY(180deg);
   animation: nextPage 25s -20s infinite steps(1);
background-size: 420px 300px;
background-position: 100% -2px;
}

@keyframes nextPage {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.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%;
-webkit-animation: flip1 5s infinite ease-in-out;
          animation: flip1 5s infinite ease-in-out;
border-width: 1px 1px 1px 0;
}
.flip.flip1::after {
-webkit-animation: nextFlip1 25s -20s infinite steps(1);
          animation: nextFlip1 25s -20s infinite steps(1);
}
.flip:not(.flip1) {
right: calc(100% - 2px);
top: -2px;
transform-origin: right;
-webkit-animation: flip2 5s ease-in-out infinite;
          animation: flip2 5s ease-in-out infinite;
}
.flip.flip2::after {
-webkit-animation: nextFlip2 25s -20s infinite steps(1);
          animation: nextFlip2 25s -20s infinite steps(1);
}
.flip.flip3::after {
-webkit-animation: nextFlip3 25s -20s infinite steps(1);
          animation: nextFlip3 25s -20s infinite steps(1);
}
.flip.flip4::after {
-webkit-animation: nextFlip4 25s -20s infinite steps(1);
          animation: nextFlip4 25s -20s infinite steps(1);
}
.flip.flip5::after {
-webkit-animation: nextFlip5 25s -20s infinite steps(1);
          animation: nextFlip5 25s -20s infinite steps(1);
}
.flip.flip6::after {
-webkit-animation: nextFlip6 25s -20s infinite steps(1);
          animation: nextFlip6 25s -20s infinite steps(1);
}
.flip.flip7::after {
-webkit-animation: nextFlip7 25s -20s infinite steps(1);
          animation: nextFlip7 25s -20s infinite steps(1);
}
.flip.flip7 {
width: 30px;
border-width: 1px 0px 1px 1px;
}
.flip.flip7::after {
-webkit-animation: nextFlip7 25s -20s infinite steps(1);
          animation: nextFlip7 25s -20s infinite steps(1);
}

@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://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
10% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
30% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
50% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
70% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
90% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip2 {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
10.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
30.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
50.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
70.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
90.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip3 {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
11% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
31% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
51% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
71% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
91% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip4 {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
11.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
31.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
51.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
71.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
91.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip5 {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
12% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
32% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
52% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
72% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
92% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip6 {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
12.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
32.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
52.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
72.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
92.5% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip7 {
0% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
13% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90SoR.jpg?random=2");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
33% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90kQO.jpg?random=3");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
53% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90ewd.jpg?random=4");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
73% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z90mTA.jpg?random=5");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
93% {
    background-image: url("https://s1.ax1x.com/2022/11/10/z9wXyF.jpg?random=1");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
}


</style>

<div style="z-index: 127;width: 1200px; height: 620px; margin-top:150px; margin-left:-180px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 12px #0000FF; overflow: hidden;transform:rotate(0deg);background:url('https://s1.ax1x.com/2022/11/10/z9cRbT.jpg')0 0/100%100%; text-align: center;">

<div id="hWindow">
<div class="gap">&nbsp;</div>

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

       <imgid="mpic"style="width: 100%; height: 100%;background: url('https://pic.imgdb.cn/item/62892d8509475431297febe8.gif')0 0/50% 50%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url('https://pic.imgdb.cn/item/62892d8509475431297febe8.gif')0 0/40% 40%" >
    <div id="rdisk" style="width:80px;height:80px;border: 2px solid #000000;
        background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
    <div id="LRCShow" style="position:absolute;left:15%;bottom:10px;" >
            <div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp">《同一首歌》
</div>
      </div>

</div>

</div>

<textarea id="lrc_content" style="visibility: hidden;">
                        《同一首歌》
演唱：北京市少年宫合唱团
作词 : 陈哲/胡迎节
作曲 : 孟卫东
LRC制作：相约爱晚亭
鲜花曾告诉我 你怎样走过
大地知道你心中的每一个角落
甜蜜的梦啊 谁都不会错过
终于迎来今天的这欢聚时刻
水千条 山万座 我们曾走过
每一次相逢和笑脸都彼此铭刻
在阳光灿烂欢乐的日子里
我们手拉手想说的太多
星光撒满了所有的童年
风雨走遍了世间的角落
同样的感受 给了我们同样的渴望
同样的欢乐 给了我们同一首歌
阳光下渗透所有的语言
春天把友好的故事传说
同样的感受 给了我们同样的渴望
同样的欢乐 给了我们同一首歌
同一首歌
</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}
</script>

<script type="text/javascript">
var imgSet =[];
var keyFrames =
        [];

var EffectTiming = {duration: 8000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;


        function initTrun()        {
                imgBlock = document.getElementById('hWindow');
                curp = document.getElementById('curp');
               
                aniObj = curp.animate(keyFrames, EffectTiming);
                aniObj.pause();
                aniObj.onfinish = chg_cur_pic;
                chg_cur_pic();        //my_audio.play();
        }
        function chg_cur_pic()        {
                imgBlock.style.backgroundSize = "cover";
                imgBlock.style.backgroundImage = "url(" + imgSet + ")";
                curp.style.backgroundImage = "url(" + imgSet + ")";
               
                lastIdx = imgIdx;
                imgIdx++;
                imgIdx %= imgSet.length;
               
                aniObj.play();
        }
       
        initTrun();

        var opts = {
                        //        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://music.163.com/song/media/outer/url?id=1985364630.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
</script>

巫荣云师 发表于 2022-11-11 20:09

欣赏收藏老师的[软翻书] 好看又好听，点赞！

蓝魔 发表于 2022-11-11 22:15

欣赏一下，谢谢。

非常开心 发表于 2022-11-12 09:07

欣赏楼主的新作，点赞多谢分享！

相约爱晚亭 发表于 2022-11-12 13:52

巫荣云师 发表于 2022-11-11 20:09
欣赏收藏老师的[软翻书] 好看又好听，点赞！

谢谢您的支持和鼓励！

相约爱晚亭 发表于 2022-11-12 13:53

蓝魔 发表于 2022-11-11 22:15
欣赏一下，谢谢。

谢谢您的关注和支持！

相约爱晚亭 发表于 2022-11-12 13:53

非常开心 发表于 2022-11-12 09:07
欣赏楼主的新作，点赞多谢分享！

谢谢您的支持和鼓励！

午老虎 发表于 2022-12-5 17:30

欣赏了 谢谢

相约爱晚亭 发表于 2022-12-5 19:37

午老虎 发表于 2022-12-5 17:30
欣赏了 谢谢

谢谢您的关注和支持！

红枫 发表于 2022-12-12 18:49

问好相约爱晚亭好友，欣赏佳作！

纯的《软翻书》原码应是出自这儿的：
http://www.yinhuabbs.cn/forum.php?mod=viewthread&tid=235034

查看完整版本: 软翻书（套用亚伦源码）