【水芙蓉播放器】踏遍山河 人间值得 贺素心芳辰！
<meta charset="UTF-8"><style>
#papa{ position: relative; width: 1300px; height: 720px; margin-left: 20px; margin-top: 0; overflow: hidden; background:#008080; --state: paused;}
.vid {width: 100%; height:100%;
position: absolute;
top:0%; left:0%;
object-fit: cover;
pointer-events: none;
opacity: 0;
animation: round 100s linear infinite var(--state);}
@keyframes round {
0% {
opacity: 1;
-webkit-transform: scale(1);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}
6% {
opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
14% {
opacity: 0;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(6);
}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.lrc {
position: absolute;
width: 100%;
height: 60px; /* 只显示一行歌词高度 */
top: 84%;
left: 50%;
transform: translate(-50%, -50%); /* 容器整体居中 */
overflow: hidden;
text-align: center;
}
.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
width: 100%;
padding: 0;
list-style: none;
transition: 0.1s all ease;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.lrc #ul li {
font-size: 46px;
color: #000;
font-family:"华文隶书", sans-serif;
font-weight:500;
transition: 0.1s all ease;
list-style-type: none;
text-align: center;
padding: 0 10px;
height: 60px;
line-height: 60px;
cursor: pointer;
white-space: nowrap; /* 防止歌词换行 */
}
.lrc #ul li span {
margin: 0 8px;
transform-origin: center center; /* x轴和y轴均以中心为原点 */
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
display: inline-block; /* 确保transform-origin生效 */
}
.lrc #ul li span.active {
font-family: "华文隶书", "Microsoft YaHei", sans-serif;
font-weight: 500;
font-size: 48px;
color: red;
transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
#btnplay { top:10%; left:10%;z-index: 20;
display: block;position: absolute; transform: rotateY(180deg);
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
#fullscreen{border-radius: 4px;position: relative;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;
font-size: 35px;font-family: "华文隶书", "Microsoft YaHei", sans-serif;
border: none;
cursor: pointer;margin: 8px 5px;left: 78%;
}
</style>
<div id="papa">
<div >
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4b023b42a6ad5af8004781208430d1f7_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/518ba2df7838ebebaaf10f3d52bf60a5_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b098347d8b14133736c6dbfadd13bc09_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/363745ffe5208ce911b069571a1f0fbe_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/31c0313b0771c95057c457929045454e_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1c5a48c9183b0cc1f335fec7e6519246_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6c551582244254de857fa319a6f6951f_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c9d1e36ffc69a7e5b46717ad1c6e49a1_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a77a6be1e46a4586c90365ff99729c2e_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3fddb063664ec09ccf4bcbbca2edc037_preview.mp4" loop muted autoplay=""></video>
</div>
<button id="fullscreen">全屏观赏</button>
<div class="lrc">
<ul id="ul"></ul>
</div>
<divid="btnplay" ></div>
</div>
<audio id="audio" src="https://www.joy127.com/url/155819.mp3" loop autoplay ></audio>
<script>
let lrc = `踏遍山河人间值得
词：茕木
曲：廉山
编曲：高兴
和声：暖哥
音频编辑：沐铮
祝素心美女生日快乐！
制作团队：乐享其中
封面设计：吃个橘子
厂牌：乐享其中
出品：鲲鹏入海
LRC编辑：醉美水芙蓉
渡一场人间风雨
守一世岁月清宁
再看浮沉往事也云淡风轻
人生处处是修行
行过了千里万里
看惯了潮落潮起
一身自在从容再不问归期
余生轻舟载酒行
愿你能踏遍山河
感到人间值得
抖落风尘敬这天地阔
愿你能历经漂泊
此心依旧温热
回望来路皆是好景色
愿你能踏遍山河
感到人间值得
哪怕世事百转又千折
笑看那得失几何
不过浮云一抹
不如自在做个闲云野鹤
行过了千里万里
看惯了潮落潮起
一身自在从容再不问归期
余生轻舟载酒行
愿你能踏遍山河
感到人间值得
抖落风尘敬这天地阔
愿你能历经漂泊
此心依旧温热
回望来路皆是好景色
愿你能踏遍山河
感到人间值得
哪怕世事百转又千折
笑看那得失几何
不过浮云一抹
不如自在做个闲云野鹤
愿你能踏遍山河
感到人间值得
抖落风尘敬这天地阔
愿你能历经漂泊
此心依旧温热
回望来路皆是好景色
愿你能踏遍山河
感到人间值得
哪怕世事百转又千折
笑看那得失几何
不过浮云一抹
不如自在做个闲云野鹤
不如自在做个闲云野鹤
谢谢欣赏！
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
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 words = lrcData.trim().split('');
let lineWords = [];
let startTime = parseTime(lrcTime);
let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
(parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
words.forEach((word, index) => {
lineWords.push({ time: startTime + index * wordDuration, text: word });
});
result.push(lineWords);
}
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
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;
}
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
createElements();
let containerHeight = container.clientHeight;
let liHeight = 60;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
const visibleLines = 1;
let prevIndex = -1;
function setOffset() {
let index = getIndex();
if (index === -1) index = 0;
let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
ul.style.transform = `translateY(-${offset}px)`;
if (prevIndex !== -1) {
let prevLi = ul.children;
if (prevLi) {
prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
prevLi.classList.remove('active');
}
}
let currentLi = ul.children;
if (currentLi) currentLi.classList.add('active');
let currentTime = audio.currentTime;
let currentLine = result;
if (currentLine) {
currentLine.forEach((wordObj, wordIndex) => {
let span = currentLi.children;
span.style.color = ul.style.color = randomColor();
if (currentTime >= wordObj.time &&
(wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
span.classList.add('active');
} else {
span.classList.remove('active');
}
});
const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
if (!currentLyric) return;
let charIndex = 0;
for (let j = 0; j < currentLine.length; j++) {
if (currentLine.time <= currentTime) {
charIndex = j + 1;
}
}
}
prevIndex = index;
}
audio.addEventListener("timeupdate", setOffset);
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => audio.paused ? (vid.pause()): (vid.play()) );
};
audio.onplaying = audio.onpause = () => mState();
btnplay.onclick = () => audio.paused ? audio.play(): audio.pause();
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script> @素心 芙蓉这播放器用视频重集转换效果代码，纯 CSS+JS 实现多视频集切换，百叶窗 / 淡入 / 推拉这几种转场效果创意精彩，
借美帖祝贺素心芳辰！ 芙蓉歌词同步制作纯熟练了。处处彰显着创作者的巧思与功底， 问好最美，同贺素心芳辰{:1_154:}
生日快乐~~{:1_155:} 先借帖贺素心芳辰{:9_271:} 播放器和特效漂亮，蛐蛐儿动听{:9_272:} 欣赏问好芙蓉姑娘{:9_271:} 云端漫步 发表于 2026-7-20 23:08
芙蓉歌词同步制作纯熟练了。处处彰显着创作者的巧思与功底，
谢谢漫步老师鼓励和支持！