论坛 › 音乐沙龙 › 《我的爱 请笑纳》 - 赵洋 （套用亚伦老师代码）

亦是金 发表于 2024-3-10 13:02

《我的爱 请笑纳》 - 赵洋 （套用亚伦老师代码）

本帖最后由 亦是金 于 2025-3-18 00:54 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1200px;
        height: 700px;
      margin-left:10px;
        margin-top:10px;
        border: 6px solid rgba(36, 201, 219,.95);
      border-radius: 20px;
        background:url(' ')no-repeat center / cover;
        overflow: hidden;
}
#mplayer {
        width: 110px;
        height: 110px;
        position: absolute;
        z-index: 50;
        left: 100px;
        top: 530px;
        background:url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/image.png)no-repeat center/cover;
        cursor: pointer;
        animation: rot 5s linear infinite ;
}
@keyframes rot { to { transform: rotate(-360deg); } }

#lrc {
        --motion: cover2;
        --tt: 1s;
        position: absolute;
        left: 45%;
        top: 85%;
        transform: translate(-50%, 0px)skew(0deg);
               
        font:normal 2.5em 华文隶书;
        color:#0000;
        filter:hue-rotate(0deg)contrast(120%)brightness(200%);
        filter: drop-shadow( 2px 2px 0px #ffffff);
        z-index: 2;
       
}

#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 40%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background:#E00000 ;
        filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff);
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
       
}      /*writing-mode: vertical-rl;*/

@keyframes cover1{
        0% { width: 300%;letter-spacing: 0px; height: 0;} /*字母间距：20px；*/
        to { width: 300%;height: 300%;transform: skew(0deg);}
}
@keyframes cover2 {
        0% { width: 300%;letter-spacing: 0px; height: 0;color:#000090;}
        100% { width: 300%; height: 300%; transform: skew(0deg)}
}

#dt{
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index:-1;
       
}       /*混合混合模式：变亮；*/

#dt1{
        position: absolute;
        top:0%;
        left:0%;
        width: 100%;
        height: 100%;
        z-index:3;
        mix-blend-mode:lighten;
}       /*混合混合模式：变亮；*/


#bjtp{
        position: absolute;
        top: 90%;
        left: 80%;
        width: 20%;
        height: 12%;
        z-index:3;

}   

.book {
        position: relative;
        top: -30px;
        left:35px;
        perspective: 1200px;
        perspective-origin: center 50px;
        transform: rotate(7deg)scale(1.5);
        filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
}

.page {
width: 210px;
height: 360px;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 50%;
transform-origin: 100% 100%;
border: solid #555555 0.5px;
background-size: 420px 360px;
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 360px;
background-position: -2px -2px;
}

.stop .page:nth-child(3){animation-play-state: paused;}

.page:nth-child(4) {
transform: rotateX(60deg) rotateY(177deg);
}
.page:nth-child(5) {
transform: rotateX(60deg) rotateY(175.5deg);
}
.page:nth-child(6) {
transform: rotateX(60deg) rotateY(174deg);
overflow: hidden;
}
.page:nth-child(6)::after {
content: "";
width: 210px;
height: 360px;
position: absolute;
top: 0;
right: 0;
transform-origin: center;
transform: rotateY(180deg);
   animation: nextPage 25s -20s infinite steps(1);
background-size: 420px 360px;
background-position: 100% -2px;
}

.stop .page:nth-child(6)::after{animation-play-state: paused;}
@keyframes nextPage {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
}
}

.gap {
width: 10px;
height: 360px;
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: 360px;
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 360px;
}
.flip::after {
content: "";
position: absolute;
top: 0px;
right: 0%;
width: 100%;
height: 100%;
transform-origin: center;
background-size: 420px 360px;
}
.flip.flip1 {
right: 50%;
animation: flip1 5s infinite ease-in-out;
border-width: 1px 1px 1px 0;
}
.stop .flip.flip1{animation-play-state: paused;}

.flip.flip1::after {
animation: nextFlip1 25s -20s infinite steps(1);
}
.stop .flip.flip1::after{animation-play-state: paused;}

.flip:not(.flip1) {
right: calc(100% - 2px);
top: -2px;
transform-origin: right;
animation: flip2 5s ease-in-out infinite;
}

.stop .flip:not(.flip1){animation-play-state: paused;}

.flip.flip2::after {
animation: nextFlip2 25s -20s infinite steps(1);
}
.stop .flip.flip2::after{animation-play-state: paused;}
.flip.flip3::after {
animation: nextFlip3 25s -20s infinite steps(1);
}
.stop .flip.flip3::after{animation-play-state: paused;}
.flip.flip4::after {
animation: nextFlip4 25s -20s infinite steps(1);
}
.stop .flip.flip4::after{animation-play-state: paused;}
.flip.flip5::after {
animation: nextFlip5 25s -20s infinite steps(1);
}
.stop .flip.flip5::after{animation-play-state: paused;}
.flip.flip6::after {
animation: nextFlip6 25s -20s infinite steps(1);
}
.stop .flip.flip6::after{animation-play-state: paused;}
.flip.flip7::after {animation: nextFlip7 25s -20s infinite steps(1);
}
.stop .flip.flip7::after{animation-play-state: paused;}
.flip.flip7 {
width: 30px;
border-width: 2px 0px 2px 2px;
}
.flip.flip7::after {
animation: nextFlip7 25s -20s infinite steps(1);
}
.stop .flip.flip7::after{animation-play-state: paused;}

@keyframes flip1 {
0%, 20% {
    transform: rotateX(60deg) rotateY(6deg);
}
80%, 100% {
    transform: rotateX(60deg) rotateY(174deg);
}
}

@keyframes flip2 {
0%, 20% {
    transform: rotateY(0deg) translateY(0px);
}
50% {
    transform: rotateY(-15deg) translateY(0px);
}
}


@keyframes nextFlip1 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
10% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
30% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
50% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
70% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -178px -2px;
    transform: rotateY(0deg);
}
90% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip2 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
10.5% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
30.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
50.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
70.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -148px -2px;
    transform: rotateY(0deg);
}
90.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -238px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip3 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
11% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
31% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
51% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
71% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -118px -2px;
    transform: rotateY(0deg);
}
91% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -268px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip4 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
11.5% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
31.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
51.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
71.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -88px -2px;
    transform: rotateY(0deg);
}
91.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -298px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip5 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
12% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
32% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
52% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
72% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -58px -2px;
    transform: rotateY(0deg);
}
92% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip6 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
12.5% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
32.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
52.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
72.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -28px -2px;
    transform: rotateY(0deg);
}
92.5% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -358px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip7 {
0% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
13% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://z4a.net/images/2023/08/27/Hw7xu8.jpg?random=2");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
33% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHFCn.jpg?random=3");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
53% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHP4s.jpg?random=4");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
73% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://z4a.net/images/2023/08/27/HwHSHg.jpg?random=5");
    background-position: -2px -2px;
    transform: rotateY(0deg);
}
93% {
    background-image: url("https://z4a.net/images/2023/08/27/HwH9EQ.jpg?random=1");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
}

</style>

<div id="papa">
<div id="dt"><img id="Img" src="https://cccimg.com/view.php/509b82aa18674afd8f4e2e6f1bb35eba.gif" width="100%" height="100%"></div>

<div id="bjtp"><img id="Img" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/ysjzxyy.png" width="100%" height="100%"></div>

<div class="book" id="testImg">
<div class="gap"></div>
<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="lrc" data-lrc="亦是金音乐欣赏">亦是金音乐欣赏</div>
<divid="mplayer" title="暂停/播放"></div>
<audioid="aud" loop >
<source src="https://cccimg.com/view.php/f2f98f0e7c55a3e8373c286c9c40ecde.mp3" type="audio/mp3" /></audio>
</div>

<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
var dt = document.getElementById("Img");
mplayer.onclick = () => aud.paused ? (aud.play(),dt.play()): (aud.pause(),dt.stop());
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>
<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `《我的爱请笑纳》 - 赵 洋
词 ：关连宇 | 曲 ：赵 洋
编 曲 ：孙 侠
演 唱 ：赵 洋
歌词编辑 ：亦是金
- - - - - -
我在你心头勾勒一幅画
浓墨重彩都是爱的表达
多想能与你青丝共白发
手牵手度过每一个冬夏
你说我是云里雾里的花
我的春心乱了你的芳华
回想当年那一句离别的话
爱若牵挂天有什么办法
我想我的爱 请你笑纳
别让我的心再七上八下
如果你是风儿我就是沙
让我陪你风雨陪你浪迹天涯
我想我的爱 请你笑纳
渴望幸福心动在一刹那
如果你是蝴蝶我就是花
让你的深情在我怀里融化
- - - - - -
我在你心头勾勒一幅画
浓墨重彩都是爱的表达
多想能与你青丝共白发
手牵手度过每一个冬夏
你说我是云里雾里的花
我的春心乱了你的芳华
回想当年那一句离别的话
爱若牵挂天有什么办法
我想我的爱 请你笑纳
别让我的心再七上八下
如果你是风儿我就是沙
让我陪你风雨陪你浪迹天涯
我想我的爱 请你笑纳
渴望幸福心动在一刹那
如果你是蝴蝶我就是花
让你的深情在我怀里融化
我想我的爱 请你笑纳
别让我的心再七上八下
如果你是风儿我就是沙
让我陪你风雨陪你浪迹天涯
我想我的爱 请你笑纳
渴望幸福心动在一刹那
如果你是蝴蝶我就是花
让你的深情在我怀里融化
- - 谢谢欣赏 - -

`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            dt.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

</script>



<DIV style="HEIGHT: 50px">

小文 发表于 2024-3-10 13:42

漂亮

亦是金 发表于 2024-3-10 14:05

小文 发表于 2024-3-10 13:42
漂亮

问好！谢谢欣赏点赞！{:4_187:}

红影 发表于 2024-3-10 15:34

制作漂亮。这个定位好像太靠左了。貌似左边部分无法展示呢{:4_204:}

亦是金 发表于 2024-3-10 17:01

红影 发表于 2024-3-10 15:34
制作漂亮。这个定位好像太靠左了。貌似左边部分无法展示呢

问好红影！帖子的位置我重新调整了！谢谢提醒！{:4_187:}

绿叶清舟 发表于 2024-3-10 19:49

漂亮的翻书效果，欣赏亦是金的精彩制作{:4_204:}

小辣椒 发表于 2024-3-10 19:56

前辈晚上好，仔细看了你的代码，这个制作工程有点大的，也是花时间的，制作的效果非常好。

小辣椒 发表于 2024-3-10 19:59

每个人都有自己的制作方法，特别是多年玩下来，积累了一些经验，前辈也是的，你每个帖不是纯套用别人的代码，都有自己的新创意，感谢分享精彩的制作{:4_187:}

小辣椒 发表于 2024-3-10 20:00

而且人特别的谦虚，小辣椒欣赏加学习~~~{:4_187:}

红影 发表于 2024-3-10 20:07

亦是金 发表于 2024-3-10 17:01
问好红影！帖子的位置我重新调整了！谢谢提醒！

嗯嗯，现在完美了{:4_199:}

亦是金 发表于 2024-3-10 21:50

绿叶清舟 发表于 2024-3-10 19:49
漂亮的翻书效果，欣赏亦是金的精彩制作

谢谢清舟欣赏点赞！{:4_187:}

亦是金 发表于 2024-3-10 21:58

小辣椒 发表于 2024-3-10 19:56
前辈晚上好，仔细看了你的代码，这个制作工程有点大的，也是花时间的，制作的效果非常好。

问好小辣椒！因为有时间制作，可以慢慢的修改帖子，总想套用的像样点。{:4_203:}

亦是金 发表于 2024-3-10 21:59

小辣椒 发表于 2024-3-10 19:59
每个人都有自己的制作方法，特别是多年玩下来，积累了一些经验，前辈也是的，你每个帖不是纯套用别人的代码 ...

谢谢欣赏点评！{:4_187:}

亦是金 发表于 2024-3-10 22:02

小辣椒 发表于 2024-3-10 20:00
而且人特别的谦虚，小辣椒欣赏加学习~~~

你的拔高夸奖！我会骄傲的！{:4_205:}

亦是金 发表于 2024-3-10 22:03

红影 发表于 2024-3-10 20:07
嗯嗯，现在完美了

晚上好！{:4_187:}

红影 发表于 2024-3-10 22:12

亦是金 发表于 2024-3-10 22:03
晚上好！

问好亦是金老师，周日快乐{:4_187:}

绿叶清舟 发表于 2024-3-12 19:34

亦是金 发表于 2024-3-10 21:50
谢谢清舟欣赏点赞！

不客气了，晚上好

查看完整版本: 《我的爱 请笑纳》 - 赵洋 （套用亚伦老师代码）