首页 › 音画作品 › 梦醉相思愁 - 雨中百合

亚伦影音工作室 发表于 2026-5-3 08:49

梦醉相思愁 - 雨中百合

本帖最后由 亚伦影音工作室 于 2026-5-3 21:00 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
      #bj {
            position: relative;
            width:1186px;
            height:680px;
            margin: 210px -180px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #66aa00;
            background:#800 url() no-repeat center / cover;--state:paused;
      }
#vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;mix-blend-mode: lighten;
object-fit: cover; pointer-events: none;
}

#tu{position: absolute;top:0%; left:0%;z-index: 1;
        width: 100%;
        height: 100%;animation: round 60s linear infinite; }
#tu img{width: 100%;
        }

@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
}

#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;cursor: pointer;
      margin: 200px 820px;
      position: absolute;
      overflow: hidden;
      -state:paused;
      }
.hexahedron {width: 210px;border: 2px solid #555;
      height: 210px;
      margin: 0px 0px;
         position: relative;
      background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4871ec1b9469c404f9a6f32a51cd0df5.jpg)no-repeat -60px 0px/cover;
      border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }


#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#000, #000 8px, #444 9px);border-radius: 50%;}
.overlay {z-index: 1;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(-45deg, transparent, 35%, rgba(224,255,255,0.35),65%,transparent);
border-radius: 50%;
}


.inner {z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;

background:#5a4532 url()no-repeat center/cover;
border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc { z-index: 21; position: absolute; top: 40%; left: 0%; width: 500px; height: 260px; overflow: hidden;filter:drop-shadow(#bbb 1px 0 0)drop-shadow(#bbb 0 1px 0)drop-shadow(#bbb -1px 0 0) drop-shadow(#bbb 0 -1px0);}
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #000078; font: normal 22px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px;line-height: 50px;margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.5); color: #880000; }

#jiemian{position: absolute;top:625px; left:0%;width:100%;height: 8%;z-index: 200;background:rgba(0,0,0,0.5);;border-radius: 0px;border: 0px solid #000;transform:scale(1); -webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 25%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 85%,rgba(255,255,255,1) 100%);}
audio {position: absolute;top:0px; left:0%;width:100%;z-index: 2;filter: invert(100%);}

      audio::-webkit-media-controls-play-button {transform:scale(1.5);}
audio::-webkit-media-controls-enclosure {background:transparent;
border-radius: 0px;}
audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
text-shadow: unset;}
audio::-webkit-media-controls-time-remaining-display {
order:3;text-shadow: unset;}
</style>
<div id="bj">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1fab9394d4b47010729820b81fef86bc_preview.mp4" loop muted autoplay=""></video>
<div id='tu'><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4871ec1b9469c404f9a6f32a51cd0df5.jpg" alt=""></div>

<div id="xiaobo">
<div class="hexahedron"></div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="12" fill="#00ff00"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 亚伦影音工作室 </textPath>
        </text>
</svg>
</div> <div class="overlay"></div>
</div>
</div>
</div>

<div class="lrc">
            <ul id="ul"></ul>
      </div>
   <div id="jiemian">
<audio id="audio" src="https://img3.oldkids.cn/upload/2026/04/13/blog_260848378_20260413192931251.mp3" loop autoplay controls ></audio>
</div>   
</div>

<script>

let mState = () => audio.paused ? (all.style.left = '30px',all.style.animationPlayState = 'paused',vid.pause(),tu.style.animationPlayState = 'paused'):(all.style.left = '110px',all.style.animationPlayState = 'running',vid.play(),tu.style.animationPlayState = 'running');
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
xiaobo.onclick= () => audio.paused ? audio.play(): audio.pause();
</script>

<script>
(function() {
      let lrc = `
梦醉相思愁 - 雨中百合
作词：徐晓岚/罗仕贤
作曲：李勇军(缘梦)
编曲：姜山
]演唱：雨中百合
Lrc编辑 亚伦
代码设计：亚伦影音工作室
情悠悠思也悠悠
可有佳人在梦里等候
痴心一片传书寄飞鸿
卿卿我我醉在梦中游
爱悠悠恨也悠悠
长夜漫漫千里与君同
弱柳扶风蝶恋舞袂袖
孤影对月相思情更浓
梦悠悠盼也悠悠
还要我等到什么时候
倚窗凝望盼你能回眸
夜夜惆怅相思何时休
风悠悠岁月悠悠
不知离愁还有几个秋
枫叶翩翩飞爱在梦中求
谁能共饮这杯相思的酒
出品：亚伦影音工作室
爱悠悠恨也悠悠
长夜漫漫千里与君同
弱柳扶风蝶恋舞袂袖
孤影对月相思情更浓
梦悠悠盼也悠悠
还要我等到什么时候
倚窗凝望盼你能回眸
夜夜惆怅相思何时休
风悠悠岁月悠悠
不知离愁还有几个秋
枫叶翩翩飞爱在梦中求
谁能共饮这杯相思的酒
枫叶翩翩飞爱在梦中求
谁能共饮这杯相思的酒
(Music)
谢谢欣赏
=出品 2026.5.3=
`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio");
      var ul = document.querySelector("#ul");
      var container = document.querySelector(".lrc");

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }




   function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }
      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);
})();
</script>

liumang 发表于 2026-5-4 13:37

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-5-4 13:38

欣赏亚纶老师的新作品，背景美女漂亮，歌曲好听

liumang 发表于 2026-5-4 13:38

感谢分享{:5_124:}

查看完整版本: 梦醉相思愁 - 雨中百合