《浓情烟雨中》陈瑞 （试帖黑黑老师代码）
本帖最后由 亦是金 于 2025-12-28 21:12 编辑 <br /><br /><meta charset="utf-8"><style>
#pa{
position:relative;
margin:100px 0;
left:calc(50% - 81px);
transform:translateX(-50%);
width:clamp(600px,90vw,1400px);
min-height:80vh;
aspect-ratio:16/7.5;
border-radius:20px;
border: thick double#88abfa;
overflow:hidden;
z-index:1;
background: url('')no-repeat center/cover;
display:grid;
place-items:center;
user-drag: none;
user-select: none;
--state:running;
}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;bottom:10%;pointer-events:none;object-position:center;mix-blend-mode: normal;z-index:2;opacity:.9;transform: rotateY(180deg);}
.pTitle {
width: 50%;
height: 20%;
line-height: 2em;
color: transparent;
font-family: STLiti, NSimSun, 'Microsoft YaHei';
font-size: 40px;
font-weight: 400;
text-align: center;
margin: auto;
z-index: 5;
position: absolute;
left: -5%;
top: 2%;
}
.sp { animation: flashTitle 10s linear infinite var(--state); }
.pTitle span:nth-child(1) { animation-delay: 0s; }
.pTitle span:nth-child(2) { animation-delay: 0.5s; }
.pTitle span:nth-child(3) { animation-delay: 1.0s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s; }
.pTitle span:nth-child(5) { animation-delay: 2.0s; }
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3.0s; }
.pTitle span:nth-child(8) { animation-delay: 3.5s; }
.pTitle span:nth-child(9) { animation-delay: 4.0s; }
.pTitle span:nth-child(10) { animation-delay: 4.5s; }
.pTitle span:nth-child(11) { animation-delay: 5.0s; }
@keyframes flashTitle {
0%, 100% {
color: #ecf919;
text-shadow: 2px 2px 20px #ff0000, 2px 2px 30px #f406e0, 2px 2px 40px #f406e0, 2px 2px 50px #ff0000, 2px 2px 60px #f406e0, 2px 2px 70px #f406e0, 2px 2px 80px #ff0000;
}
50%, 90% {
color: transparent;
text-shadow: none; }
}
@keyframes flashing { 0% { filter: brightness(.8); } 100% { filter: brightness(1.2); } }
#wrapper{position:absolute; white-space: nowrap;padding:2%;font:bold 2.6em/1.2 STXihei;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);bottom:10%;z-index:10;}
.char{display:inline-block;padding:0 4px;opacity:0;transform:translate(var(--x),var(--y));animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:translate(0,0);opacity:1;}}
@keyframes flash {to { filter: hue-rotate(360deg); }}
#mplayer{position:absolute;text-align:center;top:92%;transform:translate(-50%);left:50%;z-index:60;color:Azure;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:600px;height:2px;accent-color:darkgreen;outline:none;cursor:pointer;}
#play{position:absolute;width:120px;height:120px;left:-35%;top:85%;cursor:pointer;animation:rotating 6s infinite linear var(--state);margin:-90px 0px;border-radius:50px;}
#play:hover{filter: grayscale(30%) sepia(90%) contrast(320%);transition: filter 0.5s ease; }
@keyframes rotating{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
#fullscreen{position:absolute;top:30px;right:30px;font:1.5em 楷体;color:Azure;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
@keyframes opa{to{opacity:0;}}
</style>
<div id="pa">
<div style="position:absolute;width: 500px;height: 50px;bottom:20px;right: -280px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>
<div id="mplayer" data-tt="00:00 00:00">
<svg id="play" width="120" height="120" viewBox="0 0 450 450"><title>播放/暂停</title></svg>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" /></div>
<span id="fullscreen">全屏欣赏</span>
<div class="pTitle">
<span class="sp"></span>
<span class="sp">《</span>
<span class="sp">浓</span>
<span class="sp">情</span>
<span class="sp">烟</span>
<span class="sp">雨</span>
<span class="sp">中</span>
<span class="sp">》</span>
<span class="sp">～</span>
<span class="sp">陈 </span>
<span class="sp">瑞</span>
</div>
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=1442476651" loop autoplay></audio>
<div id="wrapper"></div>
<video class="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/01/5b4ef125f223a.mp4" autoplay loop muted></video>
</div>
<script>
const pa = document.getElementById('pa');
const audio = document.getElementById('audio');
const wrapper = document.getElementById('wrapper');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const play = document.getElementById('play');
const fullscreen = document.getElementById('fullscreen');
const gc = `
《浓情烟雨中》陈瑞
作词 : 郭冬青
作曲 : 陈伟
演唱：陈瑞
歌词编辑：亦是金
。。。。。。
风一样的年纪 水一样的心
淡妆浓抹 总是最美的风景
是谁蘸一江水墨 妙手丹青
画十里春风 如你般多情
花一样的旧梦 云一样的轻
蝶舞莺飞 怎奈欢喜有时尽
是谁酌一壶清酒 蹉跎光阴
半醉的夜里 月色白如洗
烟雨如你 念不完的点滴
淅淅沥沥 滴开心上涟漪
我沿小桥流水 迂回往昔
却被搁浅在 曾经的雨季
烟雨如你 化不开的相思
寻寻觅觅 终究白驹过隙
我在时光深处 坐看云起
这一生回忆 浓情淡如你
。。。。。。
花一样的旧梦 云一样的轻
蝶舞莺飞 怎奈欢喜有时尽
是谁酌一壶清酒 蹉跎光阴
半醉的夜里 月色白如洗
烟雨如你 念不完的点滴
淅淅沥沥 滴开心上涟漪
我沿小桥流水 迂回往昔
却被搁浅在 曾经的雨季
烟雨如你 化不开的相思
寻寻觅觅 终究白驹过隙
我在时光深处 坐看云起
这一生回忆 浓情淡如你
-- 谢谢欣赏 --
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
audio.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(audio.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
audio.onended = () => {
curkey = 0;
audio.play();
}
audio.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (audio.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 400 : -400);
const y = Math.random() * (Math.random() > 0.5 ? 150 : -150);
span.style.cssText += `
color: hsl(${Math.floor(Math.random() * 360)}, 100%, 50%);
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
const vids = document.querySelectorAll(', .vid');
var mState = () => {
pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => audio.paused ? vid.pause() : vid.play());
};
audio.oncanplay = audio.onplaying = audio.onpause = () => mState();
var mseek = false;
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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () =>audio.currentTime = mprog.value / mprog.max * audio.duration;
let fs = true;let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());fs = !fs;};
pa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';});
play.onclick = () => {
audio.paused ? audio.play() : audio.pause();
pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');};
</script>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(play);
var d = 'm65.66676,159.34147l122.6049,0l37.88586,-117.65396l37.88588,117.65396l122.60488,0l-99.18927,72.71331l37.88782,117.65396l-99.18931,-72.71529l-99.18929,72.71529l37.88783,-117.65396l-99.1893,-72.71331z';
dr.path(d,'#fb54e1','#5171fa',0).set('fill-rule', 'evenodd');
dr.circle(300, 300, 0, 'none', '#ff0000', 0)
dr.circle(300, 300, 0, 'none', 'Magenta', 0);
</script>
</body>
</html>
来欣赏亦是金的精品佳作
音画太棒了！
视频唯美
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢亦是金带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 精美的制作赏心悦目，美不胜收，真漂亮！！{:4_190:}{:4_199:}
这个制作真漂亮，这个视频特别好，那些闪亮的光斑仿佛刻画了树冠的形状。
欣赏亦是金好帖{:4_199:} 偶然~ 发表于 2025-12-28 21:32
来欣赏亦是金的精品佳作
问好偶然！{:4_180:} 偶然~ 发表于 2025-12-28 21:33
音画太棒了！
谢谢欣赏点赞！{:4_190:} 偶然~ 发表于 2025-12-28 21:33
视频唯美
视频来自熊猫办公！{:4_189:} 偶然~ 发表于 2025-12-28 21:33
制作大气
谢谢你的喜欢！{:4_180:} 偶然~ 发表于 2025-12-28 21:33
音画合一，音乐与画面结合完美
谢谢夸奖！{:4_190:} 偶然~ 发表于 2025-12-28 21:33
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
谢谢！ 偶然~ 发表于 2025-12-28 21:33
感谢亦是金带来的精彩，辛苦了！祝你开心幸福、阖家安康！
祝欣赏愉快！{:4_176:} 霜染枫丹 发表于 2025-12-28 21:41
精美的制作赏心悦目，美不胜收，真漂亮！！
问好霜染枫丹！谢谢欣赏点评！{:4_180:} 红影 发表于 2025-12-28 21:44
这个制作真漂亮，这个视频特别好，那些闪亮的光斑仿佛刻画了树冠的形状。
欣赏亦是金好帖
问好红影！{:4_187:}谢谢欣赏点评！{:4_204:}
页:
[1]
2