论坛 › 欢乐水吧 › 那么爱你不能拥有你-慕蓉晓晓

亚伦影音工作室 发表于 2026-5-6 18:21

那么爱你不能拥有你-慕蓉晓晓

本帖最后由 亚伦影音工作室 于 2026-5-11 06:48 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
      #bj {
            position: relative;
            width:1186px;
            height:680px;
            margin: 110px -300px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #333;
            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://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png)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%;box-shadow:0px 0px 0px 1px #aaa,0px 0px 0px 4px #555;}
.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-slider {
      transform: rotateX(180deg);   
    }

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://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png" 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://static.oldkids.com.cn/upload/2026/05/06/blog_260855907_20260506182007512.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 = `
那么爱你不能拥有你-慕蓉晓晓
作词：夜未央
作曲：夜未央
编曲：小满音乐
制作人：秦子文
推广：沐风有声/楚来/何羡晴/木子/柠檬/阳阳
监制：涓子
出品人：涓子/秦子文
OP/SP：浔秦文化
（版权所有未经允许请勿使用）
听歌就在中国酷狗*星曜计划
缘分就像一场无声的雨
淋湿了我也淋湿了你
明明心动却不敢靠近
再多深情也无能为力
那么爱你却不能拥有你
情深缘浅只剩一声叹息
一场相遇换一生惦记
你住在我每次的梦里
那么爱你却只能放弃你
满心温柔都败给了天意
你是风景只剩空回忆
是我一生放不下的秘密
多少牵挂都埋进风里
多少眼泪都流进心底
错的时间遇见对的你
注定是一场心酸结局
那么爱你却不能拥有你
情深缘浅只剩一声叹息
一场相遇换一生惦记
你住在我每次的梦里
那么爱你却只能放弃你
满心温柔都败给了天意
你是风景只剩空回忆
是我一生放不下的秘密

`;
      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>

亚伦影音工作室 发表于 2026-5-6 18:21

本帖最后由 亚伦影音工作室 于 2026-5-3 13:29 编辑

https://img-baofun.zhhainiao.com ... 87ee056_preview.mp4

https://img-baofun.zhhainiao.com ... 69c2583_preview.mp4

https://img-baofun.zhhainiao.com ... cf7771c_preview.mp4
https://img-baofun.zhhainiao.com ... 98c5614_preview.mp4
https://img-baofun.zhhainiao.com ... e9ab6ef_preview.mp4
https://img-baofun.zhhainiao.com ... 3ce89af_preview.mp4


img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b65fec1889f678ce9fc2e6280e7909c2_preview.mp4


img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/98197721139e61f32d8d9f2cec628053_preview.mp4


https://img-baofun.zhhainiao.com ... c7b49e9_preview.mp4

img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/afdf16c7d4e8878a278c85c93cb1d4f8_preview.mp4


img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/32a4a4a8fddad23038e12179c20c95a5_preview.mp4

朵拉 发表于 2026-5-6 20:18

欣赏亚伦老师的好制作，感谢老师的分享{:4_204:}

红影 发表于 2026-5-6 22:34

制作真漂亮，光盘播放器的封面和底图一个系列，歌词同步漂亮。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-5-7 13:27

欣赏亚纶精彩的制作{:4_199:}

查看完整版本: 那么爱你不能拥有你-慕蓉晓晓