论坛 › 欢乐水吧 › 樱花雨 (DJ版) - 张怡诺

亚伦影音工作室 发表于 2026-5-2 21:50

樱花雨 (DJ版) - 张怡诺

本帖最后由 亚伦影音工作室 于 2026-5-11 04:53 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
      #bj {
            position: relative;
            width:1186px;
            height:680px;
            margin: 10px -320px;border-radius: 0px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 10px rgba(0,100,180,0.5);
            background:#800 url() no-repeat center / cover;--state:paused;
      }
#vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}

#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/live/b0a902258f5815025578795f9343ca13.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: 2;background:rgba(175,238,238,0.8);;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(0%);}

      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/43deb40092b57ba9bcd27c584c7b49e9_preview.mp4" loop muted autoplay=""></video>
<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/02/blog_260848378_20260502200908442.mp3" loop autoplay controls ></audio>
</div>   
</div>

<script>

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

<script>
(function() {
      let lrc = `
樱花雨 (DJ版) - 张怡诺
作词：剑锋
作曲：凡间精灵
和声：俞子欣
演唱：张怡诺
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
三月的风三月的雨
飘散樱花的芬芳美丽
雪后的痕雨后的春
开始慢慢的升温
爱情的风爱情的雨
吹乱淋湿温柔的记忆
爱过的人离别的情
就像花雨难舍难分
花和雨深情相依
雨滋润着花娇艳欲滴
点点滴滴驱散寒意
芳香弥漫着春的气息
我和你相爱不容易
经历风雨从没放弃
点点滴滴爱在心底
仿佛樱花雨一样凄迷
(Music)
三月的风三月的雨
飘散樱花的芬芳美丽
雪后的痕雨后的春
开始慢慢的升温
爱情的风爱情的雨
吹乱淋湿温柔的记忆
爱过的人离别的情
就像花雨难舍难分
花和雨深情相依
雨滋润着花娇艳欲滴
点点滴滴驱散寒意
芳香弥漫着春的气息
我和你相爱不容易
经历风雨从没放弃
点点滴滴爱在心底
仿佛樱花雨一样凄迷
花和雨深情相依
雨滋润着花娇艳欲滴
点点滴滴驱散寒意
芳香弥漫着春的气息
我和你相爱不容易
经历风雨从没放弃
点点滴滴爱在心底
仿佛樱花雨一样凄迷
仿佛樱花雨一样凄迷
(Music)
☆★梅竹谢谢欣赏★☆
=End=
`;
      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-3 13:16

漂亮的带光盘的音画制作。
制作漂亮，歌曲好听。欣赏亚伦老师好帖{:4_187:}

杨帆 发表于 2026-5-4 13:57

漂亮~祝福亚伦老师节日快乐{:4_176:}

查看完整版本: 樱花雨 (DJ版) - 张怡诺