《荷花》 - 学习马老师帖代码 - 欢乐水吧 - 花潮论坛

杨帆发表于 2025-9-5 21:22

《荷花》 - 学习马老师帖代码

本帖最后由杨帆于 2025-9-14 20:05 编辑 <br /><br /><style>
#pa{margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; position: relative;background:repeating-linear-gradient(45deg, rgba(249,251,228,.35) 0 1px, transparent 2px 38px),repeating-linear-gradient(135deg, rgba(249,251,228,.35) 0 1px, transparent 2px 38px),linear-gradient(45deg, #00FA9A, #008B8B, #00CED1,#00FA9A); z-index: 1; overflow: hidden;perspective: 1000px;--state: running;--display:block; --opacity: 1;box-shadow: 2px 2px 8px #000;animation: multiColorShift 20s infinite ease-in-out; user-select: none;}
#dancer{position: absolute; right: 20px;bottom:20px;width: 100px;height: 100px;cursor: pointer; overflow: hidden;animation: rot 8s linear infinite var(--state);z-index: 5; transform-style: preserve-3d; filter: drop-shadow(0 0 60px black); transform: rotateX(-45deg) rotateY(-15deg) rotateZ(0); animation: rot3d 6s linear infinite var(--state);}
#dancer:hover { transform:scale(.9);animation-play-state: paused; }
@keyframes rot3d { to { transform: rotateX(-45deg) rotateY(-15deg) rotateZ(360deg); } }
#plane1{position: absolute;left: 250px;top: 0;width: 80px;offset-distance: 0;offset-path: path("M0 50 Q500 180, 720 320 T950 50");animation: move 8s linear infinite var(--state);opacity: var(--opacity); transition: 1.8s; z-index: 3; }
#plane2 {position: absolute;left: 250px;top: 0;width: 120px;offset-distance: 0;offset-path: path("M0 60 Q500 180, 720 160 T0 60");animation: move 12s linear infinite var(--state);opacity: var(--opacity); transition: 1.7s;z-index: 3; }
@keyframes move { to { offset-distance: 100%;} }
.vid{ position: absolute; width: 100%;height:100%; left:0%;top:0%; object-fit: cover; z-index: 2;pointer-events: none;}
#vid1 {mask: linear-gradient(to bottom, red 25%, transparent 35%, transparent); -webkit-mask: linear-gradient(to bottom, red 25%, transparent 35%, transparent); pointer-events: none; }
#vid2 {mix-blend-mode: screen; mask: linear-gradient(to right top, red 80%, transparent 90%,transparent ); -webkit-mask: linear-gradient(to right top, red 80%, transparent 90%,transparent ); }
.flip-container {position: absolute; width: 100%;height: 100%; }
.flipper {position: relative;width: 100%; height: 100%;transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);transform-style: preserve-3d;}
.flip-container.flipped .flipper {transform: rotateY(180deg); }
.front, .back {position: absolute;width: 100%; height: 100%;backface-visibility: hidden; overflow: hidden;}
.front img, .back img {width: 100%; height: 100%; object-fit: cover; }
.back {transform: rotateY(180deg);}
.click-feedback {animation: clickFeedback 0.3s ease;}
@keyframes clickFeedback {0% { transform: scale(1); } 50% { transform: scale(0.95); }100% { transform: scale(1); }}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #00BFFF, #FFF0F5, #FFF8DC);
position: absolute;z-index: 3;right: 8%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 2.5em/1em YouYuan; font-weight:500;color:#FFD700;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;filter:drop-shadow( #1E90FF 1px 0 0)drop-shadow(#1E90FF 0 1px 0)drop-shadow(#1E90FF -1px 0 0) drop-shadow(#1E90FF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: url('https://638183.freep.cn/638183/small/2025/dream.webp') center;background-clip: text;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
#pic1{position: absolute;z-index: 3; width: 300px; height: 300px;left: -2%; bottom:1%;display: var(--display);opacity: var(--opacity); transition: opacity 1.6s;cursor: pointer; }
#pic1:hover { transform:scale(1.05); }
#btnFs {left:12px;top: 12px; color: #eee; border-color: currentColor; }
#msvg { position: absolute; width: 100%; height: 100%; z-index: 1; }
.cc {opacity: 1;offset-path: path('M-600 0, Q0 -180, 600 180');offset-distance: 0%;animation:opacity 0.5s var(--delay) infinite alternate var(--state),move 20s var(--delay) linear infinite var(--state);}
@keyframes opacity { to { opacity: 0.2; } }
@keyframes move { to { offset-distance: 100%; } }
#prog{ position: absolute; width: 60%;height:6px; left:25%;bottom:5%;z-index: 2;cursor: pointer;display: var(--display);}
</style>
<div id="pa">
<progress id="prog"></progress>
<audio id ="aud" src="https://upfile.mp3.wf/view.php/55f28e4c93a2a4345488a5b12112e506.mp3" autoplay loop></audio>
<video class = "vid"id="vid1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1338602340.mp4" autoplay loop muted></video>
<videoclass = "vid" id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8604a11da.mp4" autoplay loop muted></video>
<div data-lrc="" id="lrc"></div>
<svg id ="msvg" viewbox="-320 -180 640 360">
<imgid ="pic1" src="https://www.helloimg.com/i/2025/09/01/68b503e5e892d.gif" alt="" / ;>
<img id="dancer" src="https://638183.freep.cn/638183/web/svg/pl-white.svg"alt=""/>
   <img id="plane1" alt="" src="https://bbs.cnzv.cc/up/upload/pic/12/20250316-b266302c28eca2d6800373366e4b16b6.gif" />
   <img id="plane2" alt="" src="https://bbs.cnzv.cc/up/upload/pic/12/20250302-ef202b8fd27dcf032201019d42dabd9e.jpg" />
<div class="flip-container">
   <div class="flipper">
         <div class="front">
            <img src="https://www.helloimg.com/i/2025/09/14/68c6acefd416c.jpg" alt="">
         </div>
         <div class="back">
            <img src="https://www.helloimg.com/i/2025/09/14/68c6ad5d4cdfb.jpg" alt="">
         </div>
   </div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const dancer = document.querySelector('#dancer');
const pic1= document.querySelector('#pic1');
const flipContainer = document.querySelector('.flip-container');
const vid = document.querySelector('.vid');
dancer.addEventListener('click', function() {
   flipContainer.classList.add('click-feedback');
   setTimeout(() => this.classList.remove('click-feedback'), 300);
   flipContainer.classList.toggle('flipped');
});
});
dancer.onclick = () => {
aud.paused ? (aud.play(),vid1.play() ,vid2.play()) : (aud.pause(),vid1.pause(),vid2.pause());
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   dancer.title = aud.paused ? '播放' : '暂停';
};
prog.title = document ? '进度调节' : '';
pic1.onclick = () =>dancer.click();
pic1.onmousemove = () => {pic1.title = '播放/暂停'; pic1.style.cursor = 'pointer';};
aud.onplaying = aud.onpause = () => {pic1.style.setProperty('--display' , aud.paused ? 'none ': 'inline');
prog.style.setProperty('--display' , aud.paused ? 'none ': 'inline');}
(function() {
let lrcStr = `
荷花 - 周旋
词：潘先贤
曲：印青
荷花呀荷花呀
你是那样清香淡雅
荷花呀荷花呀
出于泥土冰洁无暇
花开不为美
花落不自怜
但捧莲果沁人心
不求园中显芳华
阴与晴何须顾
喜悦自唱月光好
淡然独享夜色佳
荷花呀荷花呀
你是那样清香淡雅
荷花呀荷花呀
出于泥土冰洁无暇
无论春和秋
笑对去与留
风轻云淡山和水
从容胸怀天地大
寒与暖何须忧
人说荷花不风流
我颂最美是荷花
寒与暖何须忧
人说荷花不风流
我颂最美是荷花
啊最美的是荷花
`;
/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '000:000';
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;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = Dr.dr(msvg);

Array.from({length: 60}).forEach(() => {
var cx = Math.round(Math.random() * 310 * (Math.random() > 0.5 ? 1 : -1)),
cy = Math.round(Math.random() * 170 * (Math.random() > 0.5 ? 1 : -1)),
r = Math.ceil(Math.random() * 2 + 2),
color = '#' + Math.random().toString(16).substring(2, 8),
delay = (-20 * Math.random()).toFixed(2);
dr.circle(cx, cy, r, color).set('class', 'cc').style(`--delay: ${delay}s`);
});
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
FS(pa, dancer);
</script>

红影发表于 2025-9-5 22:01

这么快就把进度条用上了，还做了自己的调整。
制作真漂亮。欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-9-5 22:03

红影发表于 2025-9-5 22:01
这么快就把进度条用上了，还做了自己的调整。
制作真漂亮。欣赏杨帆好帖

谢谢影子鼓励，祝开心天天{:4_204:}

梦江南 发表于 2025-9-6 08:26

这个小播很奇妙，一点就会变画面，还带了歌词。厉害了！{:4_187:}

梦江南 发表于 2025-9-6 08:27

欣赏杨帆带来的精彩音画。{:4_199:}

杨帆发表于 2025-9-6 08:48

梦江南发表于 2025-9-6 08:26
这个小播很奇妙，一点就会变画面，还带了歌词。厉害了！

问好江南，谢谢雅评与鼓励，祝开心{:4_204:}

梦油发表于 2025-9-6 11:05

欣赏佳作，问候杨帆。

杨帆发表于 2025-9-6 11:18

梦油发表于 2025-9-6 11:05
欣赏佳作，问候杨帆。

问好梦油，谢谢超版鼓励，祝开心{:4_190:}

樵歌发表于 2025-9-6 11:49

漂亮极了！

樵歌发表于 2025-9-6 11:49

漂亮极了！

小文发表于 2025-9-6 12:16

很不错的制作，喜欢

杨帆发表于 2025-9-6 12:50

樵歌发表于 2025-9-6 11:49
漂亮极了！

谢谢樵歌管理员鼓励，祝开心{:4_191:}

杨帆发表于 2025-9-6 12:51

小文发表于 2025-9-6 12:16
很不错的制作，喜欢

谢谢小文兄弟鼓励，祝开心{:4_191:}

梦油发表于 2025-9-6 13:56

杨帆发表于 2025-9-6 11:18
问好梦油，谢谢超版鼓励，祝开心

杨帆朋友别客气。

红影发表于 2025-9-6 14:48

杨帆发表于 2025-9-5 22:03
谢谢影子鼓励，祝开心天天

问好杨帆，周六快乐{:4_187:}

页: [1]

花潮论坛's Archiver

《荷 花》 - 学习马老师帖代码

《荷花》 - 学习马老师帖代码