映山红（朝鲜语版）祝大家五一节快乐！
本帖最后由 朵拉 于 2026-5-1 20:28 编辑 <br /><br /><style>#bj {
position: relative;
width:1186px;
height:680px;
margin: 10px -300px;
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #66aa00;
background:#800 url('https://pic1.imgdb.cn/item/69f48a5437af9d46af1a2f63.jpg') 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 160px;
position: absolute;
overflow: hidden;
-state:paused;
}
#bnt{margin: 640px 30px ; 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: 24px;
left:1080px;}
#prog {position:absolute;
width: 85%;
height: 2px;background:#eee;
cursor: pointer;
bottom: 30px;border-radius: 10px;
left:5%;}
#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://pic1.imgdb.cn/item/69f47d1fc16184acf99e3f3d.jpg')no-repeat -50px 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(#111, #111 8px, #555 9px);border-radius: 50%;}
.overlay {z-index: 30;
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 {
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: 16%; left: 48%; 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 20px '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://pic1.imgdb.cn/item/69f48a5437af9d46af1a2f63.jpg" 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://upfile.mp3.wf/view.php/d5b9b2525ed5c9c567bf61ad571d4eff.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_204:} @亚伦影音工作室
学习亚伦老师的新代码，祝您五一节快乐{:4_204:}
另：歌词部分朝鲜语，显示不出来~ 好听！好看！{:5_116:}
据说发音比较硬的是朝鲜语，
比较软的是韩国语，
看来真的是这样的{:5_117:} 漂亮，欣赏朵宝好帖，五一节快乐{:4_187:} 欣赏朵拉精彩制作{:4_199:} 五一节快乐！{:4_171:} 本帖最后由 亚伦影音工作室 于 2026-5-3 16:19 编辑 <br /><br /><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>
页:
[1]