风不懂我相思愁
本帖最后由 亚伦影音工作室 于 2026-5-2 13:37 编辑 <br /><br /><style>#bj {
position: relative;
width: 580px;
height:900px;
margin: 10px 120px;
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%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#xiaobo {z-index: 100;
width: 350px;
height: 220px;cursor: pointer;
margin: 50px 160px;
position: absolute;
overflow: hidden;
-state:paused;
}
#bnt{margin: 840px 35px ; width: 20px; height: 20px;position: relative; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
background:#eee;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0;background:#eee;
clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#tmsg {position: absolute;
font: 400 12px sans-serif;
color: #eee;
bottom: 40px;
left:480px;}
#prog {position:absolute;
width: 540px;
height: 2px;background:#eee;
cursor: pointer;
bottom: 20px;border-radius: 10px;
left:4%;}
#prog-bar {border-radius: 20px;
height: 100%;
background: #FF0000;
width: 0%;
}
.hexahedron {width: 210px;border: 2px solid #555;
height: 210px;
margin: 0px 0px;
position: relative;
background:url(https://img2.oldkids.cn/upload/2026/04/28/photo_0_20260428161816674.png)no-repeat 0px -30px/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(#111, #111 8px, #555 9px);border-radius: 50%;}
.overlay {z-index: 1;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(50deg, transparent, 35%, rgba(254,254,254,0.35),60%,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: 36%; left: 2%; width: 540px; height: 450px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #eee; font: 400 22px 'YouYuan', 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.2); color: #00FFaa; font-weight: 540; }
</style>
<div id="bj">
<video id="vid" src="https://img2.oldkids.cn/upload/2026/04/30/blog_260855907_20260430214747425.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 id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="tmsg">00:00/00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="audio" src="https://img4.oldkids.cn/upload/2026/05/01/blog_260855907_20260501195535697.mp3" loop autoplay ></audio>
<script>
var mState = () => audio.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
xiaobo.onclick =bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',all.style.left = '110px',all.style.animationPlayState = 'running',vid.play()) : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',all.style.left = '30px',all.style.animationPlayState = 'paused',vid.pause());
prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
varpercent= (audio.currentTime / audio.duration) * 100;
progBar.style.width = percent + '%';
});
audio.addEventListener('timeupdate', () => {
tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});
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;
};
</script>
<script>
(function() {
let lrc = `
风不懂我相思愁
作词：范贵宾/老邪神
作曲：任夏
演唱：万能和弦
出品： 亚伦影音工作室
歌词：亚伦
本以为和你牵过了手
就能和你相爱相守
你转身丢下所有的承诺
剩我在回忆 苦苦守候
早知道情会如此难受
当初就不该 付出所有
爱到最后你我覆水难收
我连问候都 没有理由
风不懂我 相思的愁
你不懂我 心有多痛
曾经说好余生紧紧相拥
如今却留给我一句保重
风不懂我 相思的愁
你不懂我 眼泪汹涌
明知我们再也没有以后
可我偏偏守着回忆 不肯放手
早知道情会如此难受
当初就不该 付出所有
爱到最后你我覆水难收
我连问候都 没有理由
风不懂我 相思的愁
你不懂我 心有多痛
曾经说好余生紧紧相拥
如今却留给我一句保重
风不懂我 相思的愁
你不懂我 眼泪汹涌
明知我们再也没有以后
可我偏偏守着回忆 不肯放手
风不懂我 相思的愁
你不懂我 心有多痛
曾经说好余生紧紧相拥
如今却留给我一句保重
风不懂我 相思的愁
你不懂我 眼泪汹涌
明知我们再也没有以后
可我偏偏守着回忆 不肯放手
`;
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> 这个太棒了，可以当作特色音乐播放器使用了。
欣赏亚伦老师好帖{:4_199:}
页:
[1]