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

相约爱晚亭 发表于 2023-4-2 14:37

岚儿 发表于 2023-3-27 23:58
神了 棒棒哒欣赏佳作点赞支持

谢谢岚儿临帖支持鼓励！

岚儿 发表于 2023-4-2 15:47

相约爱晚亭 发表于 2023-4-2 14:37
谢谢岚儿临帖支持鼓励！

不客气 祝周末快乐

绿地水池 发表于 2023-4-2 23:44

相约爱晚亭 发表于 2023-4-2 14:36
谢谢绿地水池临帖支持鼓励！

相约爱晚亭朋友晚上好。

天涔 发表于 2023-5-30 14:47

点赞！

相约爱晚亭 发表于 2023-12-15 10:36

天涔 发表于 2023-5-30 14:47
点赞！

谢谢您的关注和点赞鼓励！

随意 发表于 2024-1-21 09:53

学学老师的代码，谢谢！！！<div><br></div><div><br><br></div>






<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2073974">
<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("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.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("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
10% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
30% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
50% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
70% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
90% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip2 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
10.5% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
30.5% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
50.5% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
70.5% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
90.5% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip3 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
11% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
31% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
51% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
71% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
91% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip4 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
11.5% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
31.5% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
51.5% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
71.5% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
91.5% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip5 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
12% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
32% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
52% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
72% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
92% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip6 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
12.5% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
32.5% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
52.5% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
72.5% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
92.5% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip7 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
13% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
33% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
53% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
73% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
93% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.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('http://tuku.link/imgs/2024/01/035dd36440aefdc0.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=502217701.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
</script></td></tr></table>

劲松 发表于 2024-1-23 20:09

好漂亮！菜鸟想学习一下，请问我在编辑预览的时候，怎么没有那个光碟开关，发帖后，那个光碟不转动？而且不出现歌词，麻烦您看看我下面的代码是不是正确，看看问题出在哪里？叩谢了！

劲松 发表于 2024-1-23 20:10

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2073974">
<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></td></tr></table>

劲松 发表于 2024-1-23 20:16

随意 发表于 2024-1-21 09:53
学学老师的代码，谢谢！！！



看到随意老师是刚制作不久的帖子，我是菜鸟一个，很想学习套用一下，我在编辑预览时没有那个光碟开关听不到声音，不知道问题出在哪里？想请教老师同时可否提供完整的代码？万分感谢！
我复制的代码如下：

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2073974">
<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("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.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("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
10% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
30% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
50% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
70% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
90% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip2 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
10.5% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
30.5% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
50.5% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
70.5% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
90.5% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip3 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
11% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
31% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
51% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
71% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
91% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip4 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
11.5% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
31.5% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
51.5% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
71.5% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
91.5% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip5 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
12% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
32% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
52% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
72% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
92% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip6 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
12.5% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
32.5% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
52.5% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
72.5% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
92.5% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip7 {
0% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.jpg?random=1");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
13% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("http://tuku.link/imgs/2024/01/36ce132a10bbdbd9.jpg?random=2");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
33% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("http://tuku.link/imgs/2024/01/e3640fa9d6937ad2.jpg?random=3");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
53% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("http://tuku.link/imgs/2024/01/fcc08548d05a16bd.jpg?random=4");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
73% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("http://tuku.link/imgs/2024/01/4398af0ee462b892.jpg?random=5");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
93% {
    background-image: url("http://tuku.link/imgs/2024/01/b87dace9c23e8db8.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('http://tuku.link/imgs/2024/01/035dd36440aefdc0.jpg')0 0/100%100%; text-align: center;">

<div id="hWindow">
<div class="gap"> </div>

<div class="book">
<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="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=502217701.mp3",
                        audioCtrl:'rdisk'
      };
      new lrcPlayer2(opts);
</script></td></tr></table></td></tr></table>


</div>
<div id="comment_2199979" class="cm">
</div>

<div id="post_rate_div_2199979"></div>
<div class="cm" id="feggdiv_2199979"></div></div>
</div>

劲松 发表于 2024-1-24 10:22

<audio src="http://music.163.com/song/media/outer/url?id=2094722141.mp3" autoplay="autoplay" loop="loop"></audio>

</div>
</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_261873">
<style>
#papa { margin: 0 0 0 calc(50% - 881px);
width: 1600px; height: 900px;
background: url('https://806447640.oss-cn-beijing.aliyuncs.com/21/sr/sr.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#vid {
    position: absolute;
    width: 110%;
    height: 120%;
                top:-80px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .56;
}
</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/67/72/63db21822b3d8.mp4" autoplay="" loop="" muted=""></video></div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=2094722141.mp3" autoplay="" loop=""></audio>
<script>
(function() {
let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);

    let geci = [

        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       


   

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