|
|
楼主 |
发表于 2025-9-28 04:54
|
显示全部楼层
是的，我的文章全都是代码编辑之后，用录屏方法做成视频的。
代码如下：
<html>
<head>
<meta charset="utf-8">
<title>酸酸甜甜</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa {margin: 80px 0px;
width: 960px;
height: 85vh;
background: var(--bg1), var(--bg2), var(--bg3);background-blend-mode: var(--bg-blend);--ma-size: 20%;--opacity: 1; --state: running;--bg1: url('https://pic.imgdb.cn/item/64ec273f661c6c8e54c0d8bd.jpg') no-repeat center/cover;--bg2: url('https://www.helloimg.com/i/2025/08/28/68afce3d1a930.gif') no-repeat 78% 100%/20% 35%;--bg3: url('https://pic.imgdb.cn/item/64ec273f661c6c8e54c0d8bd.jpg') no-repeat center/cover; --bg-blend:multiply,screen,lighten;}
#pic { position: absolute; left: 5%; top: 40%; width: 250px; height: 300px; filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gradient(black 60% ,transparent 70%); opacity: .8;}
#plane1{position: absolute;left: 250px;top: 0;width: 80px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T950 10");animation: move 10s linear infinite var(--state);opacity: var(--opacity); transition: 1.8s; }
#plane2 {position: absolute;left: 250px;top: 0;width: 100px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 10s linear infinite var(--state);opacity: var(--opacity); transition: 1.7s; }
@keyframes move { to { offset-distance: 100%;} }
#ma { display: block;right: -3%; bottom: -5%; }
#dancer {z-index: 8; cursor: pointer; mix-blend-mode: screen;visibility: var(--visibility); transition: .1s;}
#btnFs { left: 2%; top: 2%; color:LawnGreen; border-color: currentColor; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #00BFFF, #FFF0F5, #FFF8DC);
position: absolute;z-index: 3;left: 6%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 2.2em/1em YouYuan; font-weight:500;color:AquaMarine;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;filter:drop-shadow( Lime 1px 0 0)drop-shadow(Lime 0 1px 0)drop-shadow(Lime -1px 0 0) drop-shadow(Lime 0 -1px 0);}
#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/t24/w4/red001.webp') center/cover;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%; } }
</style>
<div id="papa">
<div id="pa">
<audio id="aud" src="https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/94e8be6a0ae86957/A牵挂.mp3" autoplay="" loop=""></audio>
<video class="pd-vid" src="https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp4" autoplay loop muted></video>
<div id="ma" title="播放/暂停"><svg id="msvg" class="invert" viewbox="-200 -200 400 400"></svg><title>ALT+X</title></div>
<div data-lrc="" id="lrc"></div>
<img id="plane1" alt="" src="https://bbs.cnzv.cc/up/upload/pic/12/20250302-ef202b8fd27dcf032201019d42dabd9e.jpg" />
<img id="plane2" alt="" src="https://bbs.cnzv.cc/up/upload/pic/12/20250316-b266302c28eca2d6800373366e4b16b6.gif" />
<img id="dancer" src="https://pic.imgdb.cn/item/6672988ed9c307b7e969e23c.gif" alt="" style=" position: absolute;width: 470px; height: 170px; left: 41%; bottom:2%; ">
<img id="pic" src="https://pic.imgdb.cn/item/672daa20d29ded1a8c020255.gif" alt="" />
</div>
<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);
var tt = 12, d = 'M0 0 L-30 -100 Q0 60,30 -100, L0 0';
Array.from({length: tt}).forEach((_,k) => {
dr.path(d, 'BlueViolet', 'Yellow', 3).transform(`rotate(${360/tt*k})`);
});
dancer.title = '播放/暂停ALT+X';
dancer.onclick = () => ma.click();
FS(pa, ma);
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `[00:00.00]牵挂。惦记，无声，却很暖。
[00:08.24]问候平常，却很甜。
[00:13.96]最美的拥有，
[00:16.19]是你暖，我暖，一起暖。
[00:20.47]最好的陪伴，是你在，我在。
[00:25.07]一直在生活中，
[00:29.31]总有人让你牵挂，
[00:32.06]也会有人牵挂着。
[00:35.58]你有一个人牵挂着是幸福的，
[00:39.93]在心中牵挂着一个人
[00:42.91]是幸运的人。
[00:45.52]与人最近的距离是咫尺，
[00:50.55]人与人最远的方位是天涯。
[00:56.56]牵挂是一缕暖风，
[01:00.92]能翻山越岭，
[01:02.56]直达你的心灵，
[01:04.45]给你特别的感动。
[01:07.35]牵挂是一种惦念，
[01:12.15]能穿越千里，
[01:13.74]触动你的心情，
[01:14.87]让你泪眼晶莹。
[01:20.83]牵挂是一份支撑，
[01:24.51]能通过言语
[01:25.68]了解你的拼命，
[01:27.66]给你勇气和信念。
[01:32.23]有人牵挂，
[01:34.21]再长的路也是近的。
[01:37.97]有人牵挂，
[01:41.03]再淡的水也是甜的。
[01:44.96]有人牵挂，
[01:46.15]再长的夜也是短的。
[01:49.71]有人牵挂，
[01:51.32]再冷的天也是暖的。
[01:55.64]愿你牵挂的人，
[01:57.95]同样也牵挂着你。
[02:03.93]
[02:04.90]
`;
/*变量 ：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[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar[key][2] = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = [60,1,0.001];
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[z] * calcRule[z];
ar[0] = [parseFloat(sec.toFixed(2)), geci];
lrcAr.push(ar[0]);
}
}
}
}
lrcAr.sort((a,b)=> a[0] - b[0]);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr[mKey][1];
lrc.dataset.lrc = lrcAr[mKey][1];
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[j][0]) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
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[j][0]) {
cKey = j;
if (mKey === j) showLrc(lrcAr[j][2]);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
aud.onplaying = aud.onpause = () => {
pa.style.setProperty('--opacity', aud.paused ? '0' : '1');
pa.style.setProperty('--visibility', aud.paused ? 'hidden' : '');
pa.style.setProperty('--bg-blend',aud.paused ? 'normal' : '');
pa.style.setProperty('--bg1',aud.paused ? 'none' : '');
pa.style.setProperty('--bg2',aud.paused ? 'none' : '');
pa.style.setProperty('--bg3',aud.paused ? '' : 'none');
};
</script>
</body>
</html> |
|
发表于 2025-9-27 05:07
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-9-27 13:52
