论坛 › 动画音画 › 最真的梦[代码复杂，谨慎模仿]

亚伦影音工作室 发表于 2022-11-9 21:05

最真的梦[代码复杂，谨慎模仿]

本帖最后由 亚伦影音工作室 于 2023-10-29 07:04 编辑 <br /><br /><style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2.2em悟空大字库, sans-serif; transition:.3s all ease;}
.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;bottom:10px;width:100%;height:100px;margin:16px 80px ;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: -50px;
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://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
}
}

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

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

.flip {
width: 32px;
height: 300px;
position: absolute;
top: 0px;
transform-origin: 100% 100%;
right: 100%;
border: solid #555555;
border-width: 2px 0px;
perspective: 8200px;
perspective-origin: center;
transform-style: preserve-3d;
background-size: 420px 300px;
}
.flip::after {
content: "";
position: absolute;
top: 0px;
right: 0%;
width: 100%;
height: 100%;
transform-origin: center;
background-size: 420px 300px;
}
.flip.flip1 {
right: 50%;
-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://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
10% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e5ca50fe35bdbdf841ee5ea8f762bf4.jpg?random=2");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
30% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png?random=3");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
50% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg?random=4");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
70% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg?random=5");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
90% {
    background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16f30e9b379a77fd846ddf2cb18c532f.jpg?random=1");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
}

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

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

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

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

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

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


</style>

<div style="z-index: 127;width: 1200px; height: 620px; margin-top:50px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/fs/f876bac65d7c5e74b3a0e04db7dc1077.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://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/50% 50%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')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;">
                        最真的梦
作词 : 陈桂珠
作曲 : 罗大佑
编曲 : 罗大佑 / 洪艾伦
演唱：我们的奇幻之旅
和声编配：刘栋
录音：棟Studio
统筹：于莹
制作：李嘉雯
出品：七娱文化
发行：七娱文化
小琪:
今夜微风轻送
把我的心吹动
多少尘封的往日情
重回到我心中
晓迪:
往事随风飘送
把我的心刺痛
你是那美梦难忘记
深藏在记忆中
合:
总是要历尽百转和千回
才知情深意浓
总是要走遍千山和万水
才知何去何从
为何等到错过多年以后
才明白自己最真的梦
珊珊:
是否还记得我
还是已忘了我
今夜的微风轻轻送
吹散了我的梦
小琪:
今夜微风轻送
把我的心吹动
多少尘封的往日情
重回到我心中
小迪:
往事随风飘送
把我的心刺痛
你是那美梦难忘记
深藏在记忆中
合:
总是要历尽百转和千回
才知情深意浓
总是要走遍千山和万水
才知何去何从
为何等到错过多年以后
才明白自己最真的梦
珊珊:
是否还记得我
还是已忘了我
今夜微风轻轻送
吹散了我的梦
</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://www.qqmc.com/up/kwlink.php?id=242198399&.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
</script>

红影 发表于 2022-11-9 22:51

漂亮的翻页书效果，还有鼠标可控的雪花。欣赏亚伦老师好帖{:4_204:}

相约爱晚亭 发表于 2022-11-10 07:41

观赏性很美的音画作品！点赞！

起个网名好难 发表于 2022-11-10 20:06

人家不模仿得很好吗

http://keai99.com/thread-546794-1-1.html

深秋红枫 发表于 2022-11-11 12:32

很棒，赞一个！
早先，我也做过类似的。http://www.yinhuabbs.cn/forum.php?mod=viewthread&tid=235034

梦缘 发表于 2022-11-11 19:24

好美的翻书播放器，感谢老师的精彩分享！{:4_204:}

查看完整版本: 最真的梦[代码复杂，谨慎模仿]