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

lrctz 发表于 2024-1-24 21:06

好精彩的一段代码！好多年没看到了。谢谢分享

劲松 发表于 2024-1-27 21:56

lrctz 发表于 2024-1-24 21:06
好精彩的一段代码！好多年没看到了。谢谢分享
老师好！菜鸟请问签名图片如何设置随帖子显示？敬请赐教，谢谢！



<div style="width:auto !important;min-width:0px;padding:10px;text-align:center;important;border:4px #6699ff solid;background-color:blue;">
<p>&nbsp;</p>
<p align="left">&emsp; &emsp;<MARQUEE style="BORDER-RIGHT: #cc0066 5px dotted; BORDER-TOP: #cc0066 5px dotted; BORDER-LEFT: #cc0066 5px dotted; WIDTH: 605px; BORDER-BOTTOM: #cc0066 5px dotted; HEIGHT: 87px"><FONT face=华文行楷 color=#ff0000 size=8 FONT>向老师学习-yourfellow</FONT></MARQUEE>

<p align="left"><span class="白">&nbsp; &nbsp; &nbsp; &nbsp;</span></p>

劲松 发表于 2024-2-3 22:58

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



老师，仿制发帖时有两个问题：1、那个光碟图标不转动；2、不显示歌词。请老师空闲时帮我看看28楼上面的代码，问题出在哪里，好吗？万分感谢！

劲松 发表于 2024-2-5 23:12

<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></td></tr></table>

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