晚风悠悠情深深
本帖最后由 亚伦影音工作室 于 2026-7-24 11:35 编辑 <br /><br /><style>#papa{ position: relative; width: 1186px; height: 680px; margin-left: -320px; 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/4f285bb81d634dbf2a5476d25f2f7222_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9dd8fc2c5afd60a552374ef302296f31_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4112d75a756f1c2f53501848accfc02f_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://music.163.com/song/media/outer/url?id=3394917663.MP3" loop autoplay ></audio>
<script>
let 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>
又是好多绝色美人儿啊，真养眼。
欣赏亚伦老师好帖{:4_187:} 好听好看，视听盛宴，谢谢亚伦老师精彩分享{:4_190:}
页:
[1]