《活成一道光》T0 影子 - 学习马老师帖代码
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>孟杨《活成一道光》</title>
</head>
<body>
<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: red url('https://pic1.imgdb.cn/item/6644820b0ea9cb1403d4b68c.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; perspective: 1000px; display: grid; place-items: center; position: relative; }
#mum { position: absolute; aspect-ratio: 1/1; top:35%;right:15%;width: 7%; transition: transform 1s;transform-style: preserve-3d; animation: rot 10s linear infinite var(--state); cursor: pointer; }
#mum:hover .son {filter:grayscale(30%) sepia(40%) contrast(120%);}
.son { position: absolute; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/small/2025/uvjk01.webp') no-repeat center/ 100% 100%; border: 0px dashed magenta; border-radius: 25%; transform: rotateY(var(--a)) rotateZ(-45deg); filter: hue-rotate(calc(var(--a) + 15deg)); transition: 1s; --a: 5deg; }
.son::before { position: absolute; content: ''; width: 100%; height: 100%; background: inherit; transform: scale(-1); }
#btnFs { bottom: 20px; color: #eee; }
.vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); z-index: 1;opacity: .45; pointer-events: none; }
#vid2 { position: absolute; width: 100%; height: 100%; object-fit: cover;mix-blend-mode: screen;pointer-events: none;z-index: 1;opacity: 0.98;-webkit-mask: linear-gradient(to right top, black 80%, transparent 90%);mask: linear-gradient(to right top,black 80%, transparent 90%);}
@keyframes rot { to { transform: rotate3d(1, 0, 1, 360deg); } }
.lrcShow {
position: absolute;
bottom: 100px;
left: 20%;
color: white;
filter: drop-shadow(0px 0px 6px #FFF000) drop-shadow(0px 0px 6px #FF0000) drop-shadow(0px 0px 6px #00FFFF);
letter-spacing: 2px;
--aniName: bgMove1;
--durTime: 1ms;
--aniPlayState: running;
transform: perspective(200px) rotateY(20deg);
font: bold 35px/1.235 georgia, sans-serif;
font-family: 微软雅黑;
-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 10%, rgba(255, 255, 255, .6));
}
.lrcShow::before {
position: absolute;
content: attr(data-lrc);
width: 0%;
height: 100%;
left: 0;
top: 0;
color: transparent;
background: linear-gradient(23deg, #FA0000 0%, #73FF00 100%);
-webkit-background-clip: text;
filter: drop-shadow(#000000 1px 0 0) drop-shadow(#000000 0 1px 0) drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0) hue-rotate(0deg) contrast(120%) brightness(200%);
overflow: hidden;
white-space: nowrap;
animation: var(--aniName) var(--durTime) linear forwards;
animation-play-state: var(--aniPlayState);
}
@keyframes bgMove1 { from { width: 0; } to { width: 100%; } }
@keyframes bgMove0 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/c98ac9fa9aeaa832e671827675ddf552.mp3" autoplay loop></audio>
<div class="lrcShow" data-lrc=''></div>
<div id="mDisk" class='mCtrl' style="position:absolute; top:20%; left:20%; width:50px; height:50px; z-index:10; cursor:pointer;"></div>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/05/12/16/26/video67c7d01a5fa5e.mp4" autoplay loop muted></video>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/19/50/54/video6363ab1e86aba.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/01/83/5b4b0c1e236a1.mp4"
autoplay loop muted></video>
<div id="mum" title="播放/暂停"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, mum);
const total = 20;
Array.from({length: total}).forEach( (d, k) => {
d = document.createElement('div');
d.className = 'son';
d.style.setProperty('--a', k * 360 / total + 'deg');
mum.appendChild(d);
});
const aud = document.getElementById('aud');
const lrcShow = document.querySelector('.lrcShow');
function togglePlayback() {
if (aud.paused) {
aud.play().catch(err => {
console.log('播放失败:', err);
alert('请点击播放按钮开始播放');
});
lrcShow.style.setProperty('--aniPlayState', 'running');
mum.style.animationPlayState = 'running';
} else {
aud.pause();
lrcShow.style.setProperty('--aniPlayState', 'paused');
mum.style.animationPlayState = 'paused';
}
}
class LrcPlayerY {
constructor(opts) {
this.lrcShowObj = document.querySelector('.lrcShow');
this.audioCtrl = document.getElementById(opts.audioCtrl);
this.lrcVec = this.handleLrc(opts.lrcTxt);
this.mObj = document.getElementById('aud');
this.idx = 0;
this.setupListeners();
}
handleLrc(lyricTxt) {
const lines = lyricTxt.trim().split(/\r|\n|\r\n/);
const lrcs = [];
for (const line of lines) {
const timeTags = line.match(/\[\d{1,2}:\d{2}(?:\.\d{1,3})?\]/g);
if (timeTags) {
const text = line.replace(/\[.+?\]/g, '').trim();
timeTags.forEach(tag => {
const [, minutes, seconds] = tag.match(/\[(\d+):(\d+(?:\.\d+)?)\]/);
const time = parseFloat(minutes) * 60 + parseFloat(seconds);
lrcs.push({ time, text });
});
}
}
return lrcs.sort((a, b) => a.time - b.time);
}
showLrc(duration) {
this.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
this.lrcShowObj.style.setProperty('--durTime', '0ms');
this.lrcShowObj.textContent = this.lrcVec.text;
this.lrcShowObj.dataset.lrc = this.lrcVec.text;
void this.lrcShowObj.offsetWidth;
this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
this.lrcShowObj.style.setProperty('--durTime', `${duration}ms`);
this.lrcShowObj.style.setProperty('--aniPlayState', this.mObj.paused ? 'paused' : 'running');
}
setupListeners() {
const updateLyrics = () => {
const currentTime = this.mObj.currentTime;
if (currentTime < 1 && this.idx > this.lrcVec.length / 2) {
this.idx = 0;
}
while (this.idx < this.lrcVec.length - 1 &&
currentTime >= this.lrcVec.time) {
this.idx++;
}
if (currentTime >= this.lrcVec.time) {
const nextTime = this.idx < this.lrcVec.length - 1
? this.lrcVec.time
: this.mObj.duration;
const displayTime = Math.max((nextTime - this.lrcVec.time) * 1000, 100);
this.showLrc(displayTime);
this.idx = (this.idx + 1) % this.lrcVec.length;
}
};
this.mObj.addEventListener('timeupdate', updateLyrics.bind(this));
this.mObj.addEventListener('play', () => {
this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
mum.style.animationPlayState = 'running';
});
this.mObj.addEventListener('pause', () => {
this.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
mum.style.animationPlayState = 'paused';
});
this.mObj.addEventListener('ended', () => {
this.idx = 0;
});
}
}
new LrcPlayerY({
lrcTxt: `
活成一道光
作词：孟杨
作曲：孟杨
演唱：孟杨
后期：杨鹏
制作发行：孟杨传媒有限公司
每个人心中都有一个梦
梦想成真就要砥砺前行
靠山山倒靠人人跑
幸福生活只能靠双手创造
人生中能有多少坎坷
我们总要面对现实的生活
每天给自己一份能量
告诉自己才是最好的榜样
把自己活成一道光
因为你不知道
谁会借着你的光
走出了黑暗
请保持心中的善良
因为你不知道
谁会借着你的善良
走出绝望
请保持你心中的信仰
因为你不知道
谁会借着你的信仰
走出迷茫
请坚守心中的梦想
因为你不知道
谁会借你天使的翅膀
迈向生命的辉煌
人生中能有多少坎坷
我们总要面对现实的生活
每天给自己一份能量
告诉自己才是最好的榜样
把自己活成一道光
因为你不知道
谁会借着你的光
走出了黑暗
请保持心中的善良
因为你不知道
谁会借着你的善良
走出绝望
请保持你心中的信仰
因为你不知道
谁会借着你的信仰
走出迷茫
请坚守心中的梦想
因为你不知道
谁会借你天使的翅膀
迈向生命的辉煌
把自己活成一道光
因为你不知道
谁会借着你的光
走出了黑暗
请保持心中的善良
因为你不知道
谁会借着你的善良
走出绝望
请保持你心中的信仰
因为你不知道
谁会借着你的信仰
走出迷茫
请坚守心中的梦想
因为你不知道
谁会借你天使的翅膀
迈向生命的辉煌
`,
audioCtrl: 'mDisk'
});
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('mDisk').addEventListener('click', togglePlayback);
document.getElementById('mum').addEventListener('click', function(e) {
});
});
</script>
</body>
</html>
呀，原来还有这样的歌曲呢。
小播制作很奇特，歌词制作也很特别。
欣赏杨帆好帖，影子珍藏{:4_199:} 把自己活成一道光，因为你不知道，谁会借着你的光，走出了黑暗 ；
请保持心中的善良，因为你不知道，谁会借着你的善良，走出绝望 ；
请保持你心中的信仰，因为你不知道，谁会借着你的信仰，走出迷茫
请坚守心中的梦想，因为你不知道谁会借你天使的翅膀，迈向生命的辉煌{:4_178:} 红影 发表于 2025-7-25 13:00
呀，原来还有这样的歌曲呢。
小播制作很奇特，歌词制作也很特别。
欣赏杨帆好帖，影子珍藏
谢谢影子鼓励，祝开心{:4_171:} 红影 发表于 2025-7-25 13:02
把自己活成一道光，因为你不知道，谁会借着你的光，走出了黑暗 ；
请保持心中的善良，因为你不知道，谁 ...
坚守心中的梦想，保持心中的善良，把自己活成一道光！共勉@红影 杨帆 发表于 2025-7-25 13:56
谢谢影子鼓励，祝开心
这歌还是头一次听呢，歌词很好啊{:4_187:} 杨帆 发表于 2025-7-25 13:58
坚守心中的梦想，保持心中的善良，把自己活成一道光！共勉@红影
是的，把自己活成一道光，是最好的状态。共勉{:5_108:} 这小播放很漂亮；歌词还有倒影，整个画面有哲理。杨帆太棒了！{:4_187:} 欣赏点赞！{:4_199:} 梦江南 发表于 2025-7-25 17:05
这小播放很漂亮；歌词还有倒影，整个画面有哲理。杨帆太棒了！
问好江南，谢谢鼓励，让我们把自己活成一道光！{:4_204:}
页:
[1]