《强大自己才是硬道理》- 学习马老师和亚伦老师帖代码
本帖最后由 杨帆 于 2025-7-20 17:45 编辑 <br /><br /><!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: url('https://pic1.imgdb.cn/item/687ba61258cb8da5c8c76f6c.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; perspective: 1000px; overflow: hidden; display: grid; place-items: center; position: relative;transition: transform 0.3s;}
#player { position: absolute; bottom: 300px; aspect-ratio: 1/1; width: 10%; cursor: pointer; border-radius: 50%; transition: transform 1s;transform-style: preserve-3d;transform:translateZ(150px);background: radial-gradient(lightgreen, transparent);}
#player:hover {transform: scaleZ(1.5);}
#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); opacity: .8; pointer-events: none; }
#vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
-webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);opacity: .8; pointer-events: none; }
.ring {position: absolute;width: 100%;height: 100%;border: 4px dotted var(--cc); border-radius: 50%; transform: translateZ(-30px) rotateX(var(--ax)) rotateY(var(--ay)) scale(1.2);}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);position: absolute;z-index: 6;left: 50%;top: 15%;transform: translate(-50%);font:300 2.8em/1.2em STXinwei; color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0);color: transparent; text-shadow: 0px 0px 10px #00ff00;} }@keyframes cover2 { to { clip-path: inset(0 0 0 0);color: transparent; text-shadow: 0px 0px 10px #fff000;} }
#bird {position: absolute;left: -100px;top: 20px;width: 140px; height: 124px;opacity: .9;animation: fly 12s linear infinite; }
@keyframes fly {to {left: calc(100% + 100px);}
</style>
<div id="papa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/8e0ca589d8ced3c03fa1b53bf675819a.mp3" autoplay loop></audio>
<img id = "bird" src="https://pic1.imgdb.cn/item/687c651e58cb8da5c8c80558.gif" alt="" />
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/12/36/49/video67e0e161531bc.mp4" autoplay loop muted></video>
<video class ="vid" src="https://cccimg.com/view.php/27a1a2722a6b5bacc164ac8c14f9014f.mp4" autoplay loop muted></video>
<video id ="vid" src="https://img.tukuppt.com/video_show/13928806/00/41/74/60138b832ed1d.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
<div data-lrc="" id="lrc"></div></div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, player);
var total = 15, rings = [], step = 0.5, isRun = false, raf = null;
const getPurpleColor = () => {
const hue = Math.floor(Math.random() * 60) + 120;
return `hsl(${hue}, 75%, 65%)`;
};
Array.from({length: total}).forEach( (d,k) => {
d = document.createElement('div');
d.className = 'ring';
const a = k * 360 / total;
d.style.cssText += `
--ax: ${a}deg;
--ay: ${a}deg;
--cc: ${getPurpleColor()};
`;
rings.push({ elm: d, a: a });
player.appendChild(d);
});
const animate = () => {
rings.forEach( (d, k) => {
d.a = d.a + step;
d.elm.style.setProperty('--ax', d.a + 'deg');
d.elm.style.setProperty('--ay', d.a + 'deg');
});
raf = requestAnimationFrame(animate);
};
const bird = document.getElementById('bird');
const aud = document.getElementById('aud');
function syncBirdWithAudio() {
if (aud.paused) {
bird.style.animationPlayState = 'paused';
} else {
bird.style.animationPlayState = 'running';
}
}
aud.addEventListener('play', syncBirdWithAudio);
aud.addEventListener('pause', syncBirdWithAudio);
aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : animate();
</script>
<script>
(function() {
let lrcStr = `
强大自己才是硬道理-侯贝贝
词：甄鑫
曲：包一飞
编曲：彦青@晟沐音乐
吉他：小白
录音：王旭
混音/母带：王旭@晟沐音乐
制作公司：晟沐音乐
制作人：李洪胜
伴唱：晚月
厂牌：桐音文化
OP：星汉马文化
你成功的时候有人嫉妒你
你失败的时候有人笑话你
你有钱所有的人都高看你
你没钱亲戚都瞧不起你
你辉煌的时候朋友围着你
你落魄的时候爱人都远离
你掏心掏肺不一定换来真心
你穷困潦倒只有狗不舍弃
这世间的冷暖 虚情假意
人情的淡薄刺痛我心底
看遍了世态 炎凉的游戏
遇事你要学会去沉住气
这世间的冷暖 虚情假意
太多的关系都难以维系
别高估自己 和别人的关系
强大了自己才是硬道理
你辉煌的时候朋友围着你
你落魄的时候爱人都远离
你掏心掏肺不一定换来真心
你穷困潦倒只有狗不舍弃
这世间的冷暖 虚情假意
人情的淡薄刺痛我心底
看遍了世态 炎凉的游戏
遇事你要学会去沉住气
这世间的冷暖 虚情假意
太多的关系都难以维系
别高估自己 和别人的关系
强大了自己才是硬道理
这世间的冷暖 虚情假意
人情的淡薄刺痛我心底
看遍了世态 炎凉的游戏
遇事你要学会去沉住气
这世间的冷暖 虚情假意
太多的关系都难以维系
别高估自己 和别人的关系
强大了自己才是硬道理
`;
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;
};
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;
};
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 '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;
}
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>
</body>
</html> 作品体现出帖主对CSS、HTML和JS都有一定的掌握，加油！ 马黑黑 发表于 2025-7-20 18:26
作品体现出帖主对CSS、HTML和JS都有一定的掌握，加油！
一直在学习您写的文章和作的帖子，受益很大，由衷感谢马老师鼓励{:4_190:} 杨帆 发表于 2025-7-20 18:29
一直在学习您写的文章和作的帖子，受益很大，由衷感谢马老师鼓励
{:4_191:} 里面好几个视频的感觉。这制作真漂亮。
欣赏杨帆好帖{:4_199:} 红影 发表于 2025-7-20 21:43
里面好几个视频的感觉。这制作真漂亮。
欣赏杨帆好帖
谢谢影子鼓励，祝开心天天{:4_204:} 这帖子色彩看了很舒服。欣赏问好！{:4_187:} 梦江南 发表于 2025-7-21 09:58
这帖子色彩看了很舒服。欣赏问好！
问好江南，谢谢鼓励，祝开心{:4_204:} 杨帆 发表于 2025-7-20 23:07
谢谢影子鼓励，祝开心天天
杨帆的帖子越做越漂亮了{:4_199:} 红影 发表于 2025-7-21 12:31
杨帆的帖子越做越漂亮了
问好影子，谢谢鼓励，互相学习，开心快乐{:4_204:} 杨帆 发表于 2025-7-21 13:00
问好影子，谢谢鼓励，互相学习，开心快乐
杨帆谦虚了。嗯嗯，大家相互学习，共同进步{:4_187:} 马黑黑 发表于 2025-7-20 18:26
作品体现出帖主对CSS、HTML和JS都有一定的掌握，加油！
请问马老师：这个小球转动时间稍长一些，按钮功能就对自身失效了，是不是代码哪里有待修复、完善呢？ 杨帆 发表于 2025-7-22 21:22
请问马老师：这个小球转动时间稍长一些，按钮功能就对自身失效了，是不是代码哪里有待修复、完善呢？
当出现按钮失效的时候，你需要去俘获哪里出了问题，从而才有可能做下一步判断。出错后按F12进入控制台查看。 马黑黑 发表于 2025-7-22 21:30
当出现按钮失效的时候，你需要去俘获哪里出了问题，从而才有可能做下一步判断。出错后按F12进入控制台查 ...
好的，知道了，谢谢老师{:4_190:} 杨帆 发表于 2025-7-23 00:31
好的，知道了，谢谢老师
{:4_191:} 马黑黑 发表于 2025-7-23 18:32
马老师您好，请看下是什么问题~
K12提出的问题：
Content Security Policy of your site blocks the use of 'eval' in JavaScript`
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
Page layout may be unexpected due to Quirks Mode
Reading cookie in cross-site context may be impacted on Chrome
这是否与小播时间稍长后自身圆环跳跃且不可控有关？如何修复呢？ 杨帆 发表于 2025-7-23 20:03
马老师您好，请看下是什么问题~
K12提出的问题：
是F12，不是K12
这是浏览器安全策略问题，不是代码问题。且，如果只使用了我的插件和其它相关代码，里面并不存在 eval 方法，它所触发的安全问题应该和代码无关。这可能是浏览器的特殊问题，可以考虑：
一、升级浏览器到最新版本（某些特定版本的浏览器可能存在莫名其妙的问题）；
二、重置浏览器的设置，尽可能使用默认设置，仅在自己能明白的项目做个性化设置（例如声音自动播放等）；
三、尽可能不要使用杂牌封装的浏览器，国内封装的浏览器当中，阿里、腾讯、360等等做的浏览器都不可靠，有阉割、乱设置行为，不能保持 chromium 内核最完好的东东。如果一定要用封装的第三方浏览器，建议使用像百分浏览器那样的保持了内核本色的设置的产品，也可以考虑使用 EDGE浏览器，升级到最新版本，它也是基于 chromium 内核的。 马黑黑 发表于 2025-7-23 21:36
是F12，不是K12
这是浏览器安全策略问题，不是代码问题。且，如果只使用了我的插件和其它相关代码，里 ...
不好意思，是我写错了，应是F12。
老师不仅明确指出F12指出的问题与代码无关，
还对F12指出的浏览器的特殊问题给出可行的解决办法，由衷感谢马老师答疑解惑{:4_190:} 杨帆 发表于 2025-7-23 22:39
不好意思，是我写错了，应是F12。
老师不仅明确指出F12指出的问题与代码无关，
{:4_191:}
页:
[1]