青花瓷 - 刘芳
本帖最后由 杨帆 于 2026-7-9 22:35 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>青花瓷</title>
<style>
#papa{position: relative; display: grid; place-items: center; margin: 30px 0; width: 1280px; height: 750px; left: calc(50% - 81px); transform: translateX(-50%); box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1;background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 6%, transparent 6%),url(https://pic.imgdb.cn/item/67419cecd29ded1a8ce52e08.gif)no-repeat center/cover;}
audio {position:absolute;top:95%;
width: 68%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}
#btnFs {
position: absolute;
left:10px;
top: 10px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
}
audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
li-zi { position: absolute; background: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat center/50px 50px; offset-path: path('M0 800 Q660 -160 2140 200'); offset-distance: 0; animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state); }
@keyframes move { to { offset-distance: 100%; } }
#xuhui{left: 5%;top: 5%;position:absolute;font:normal 2.5em Microsoft YaHei;color: #00BFFF;}
#lrc{left: 20%;top: 80%;}#lrcc {left: 80%;transform: translate(-102%);top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #222222;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 -1px 0);;}
#lrcc::before,#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);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
</style>
</head>
<body>
<div id="papa">
<div id="zi" ></div>
<div id="xuhui"></div>
<audioid="aud" loop controls >
<source src="http://music.163.com/song/media/outer/url?id=259138" type="audio/mp3" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="btnFs"></span>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
</script>
<span id="lrcStr" style="visibility: hidden;">
刘芳 - 青花瓷
素胚勾勒出青花
笔锋浓转淡
瓶身描绘的牡丹
一如你初妆
冉冉檀香透过窗
心事我了然
宣纸上走笔至此搁一半
釉色渲染仕女图
韵味被私藏
而你嫣然的一笑
如含苞待放
你的美一缕飘散
去到我去不了的地方
天青色等烟雨
而我在等你
炊烟袅袅升起
隔江千万里
在瓶底书汉隶仿
前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨
而我在等你
月色被打捞起
云开了结局
如传世的青花瓷
自顾自美丽
你眼带笑意
色白花青的锦鲤
跃然于碗底
临摹宋体落款时
却惦记着你
你隐藏在窑烧里
千年的秘密
极细腻犹如绣花针落地
帘外芭蕉惹骤雨
门环惹铜绿
而我路过那江南
小镇惹了你
在泼墨山水画里
你从墨色深处被隐去
天青色等烟雨
而我在等你
炊烟袅袅升起
隔江千万里
在瓶底书汉隶仿
前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨
而我在等你
月色被打捞起
云开了结局
如传世的青花瓷
自顾自美丽
你眼带笑意
天青色等烟雨
而我在等你
炊烟袅袅升起
隔江千万里
在瓶底书汉隶仿
前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨
而我在等你
月色被打捞起
云开了结局
如传世的青花瓷
自顾自美丽
你眼带笑意
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
var pa= document.querySelector('body');
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused')) :
(pa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
Array.from({length: all=40}).forEach(star => {
var size = 20 + Math.floor(Math.random() * 30);
star = document.createElement('li-zi');
star.style.cssText += `
left: 0;
top: ${Math.random() * 140 + 60}px;
width: ${size}px;
height: ${size}px;
opacity: ${Math.random() * 0.4 + 0.4 };
animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
`;
papa.prepend(star);
});
</script>
<script>
setInterval("xuhui.innerHTML=new Date().toLocaleString();",1000);
</script>
</body>
</html> 杨帆 发表于 2024-11-24 13:27
谢谢夕阳老师支持与鼓励
请教老师：“全屏按钮”为何上传代码发网页帖就失效了呢？该如何完 ...
网上搜的答案：浏览器默认情况下禁止了跨域 iframe 开启全屏的权限，解决也很简单在iframe 里 加上 allow="fullscreen" , 即
<IFRAME src="https://file.uhsea.com/2411/86d7c8bd04edfa784071a51fc6f5ab8bJZ.html" width="1800" height="1000" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" allow="fullscreen"></IFRAME>
欣赏老师的精彩音画！问好！ https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 漂亮，这个还带即时时间日期的，还有路径花瓣飘飞。
这个是自己的摄影作品吧，上面顺着物品形态设置了漂亮的文字{:4_199:} 一键全控，这个制作真棒{:4_187:}
左上角的全屏按钮出现了却无法点击呢，估计是上传的缘故吧。 欣赏杨帆精美好帖，这字体设计太美了，和背景浑然一体{:4_199:} 梦江南 发表于 2024-11-24 08:05
欣赏老师的精彩音画！问好！
谢谢梦江南友友支持与鼓励，祝福开心{:4_204:} 夕阳黄昏 发表于 2024-11-24 08:50
谢谢夕阳老师支持与鼓励{:4_191:}
请教老师：“全屏按钮”为何上传代码发网页帖就失效了呢？该如何完善？@夕阳黄昏 红影 发表于 2024-11-24 10:52
漂亮，这个还带即时时间日期的，还有路径花瓣飘飞。
这个是自己的摄影作品吧，上面顺着物品形态设置了漂亮 ...
谢谢影子鼓励！这是今年国庆去广西崇左市大新县的峒那屿湾景区拍的 本帖最后由 杨帆 于 2024-11-24 13:41 编辑
红影 发表于 2024-11-24 10:54
一键全控，这个制作真棒
左上角的全屏按钮出现了却无法点击呢，估计是上传的缘故吧。
是啊，刚刚还向夕阳老师请教：全屏按钮为何在帖子代码上传后发成网页贴就失效了呢 本帖最后由 杨帆 于 2024-11-24 13:43 编辑
红影 发表于 2024-11-24 10:54
欣赏杨帆精美好帖，这字体设计太美了，和背景浑然一体
谢谢影子鼓励，我还是一个新手，这是向亚伦老师学习的{:4_204:} <div style="position:absolute;z-index:32768;background:none;width:100%;left:100px;margin-top:100px;"><center><svg xml:space="default" xmlns="http://www.w3.org/2000/svg" version="1.1" style="max-width: 100% !important;width: 100%;height: auto;box-sizing:border-box;" data-width="100%"><text x="30%" y="50%" fill="#e59630" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="26" text-anchor="middle"><tspan class="135brush" data-brushtype="text" style="font-size: 30px; fill: #29828d;" fill="#29828d">感</tspan><animate attributeName="opacity" from="1" to="0" begin="0s" dur="2s" repeatCount="indefinite"></animate></text><text x="42%" y="50%" fill="#e59630" font-family="microsoft yahei,sans-serif" font-weight="bold" text-anchor="middle"><tspan class="135brush" data-brushtype="text" style="font-size: 30px; fill: #29828d;" fill="#29828d">谢</tspan><animate attributeName="opacity" from="1" to="0" begin="0.2s" dur="2s" repeatCount="indefinite"></animate></text><text x="54%" y="50%" fill="#e59630" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="26" text-anchor="middle"><tspan class="135brush" data-brushtype="text" style="font-size: 30px; fill: #29828d;" fill="#29828d">支</tspan><animate attributeName="opacity" from="1" to="0" begin="0.4s" dur="2s" repeatCount="indefinite"></animate></text><text x="66%" y="50%" fill="#e59630" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="26" text-anchor="middle"><tspan class="135brush" data-brushtype="text" style="font-size: 30px; fill: #29828d;" fill="#29828d">持</tspan><animate attributeName="opacity" from="1" to="0" begin="0.6s" dur="2s" repeatCount="indefinite"></animate></text></svg></center><div>
杨帆 发表于 2024-11-24 13:27
谢谢夕阳老师支持与鼓励
请教老师：“全屏按钮”为何上传代码发网页帖就失效了呢？该如何完 ...
有关代码不熟悉，搞不定{:5_102:}
为什么要用空间帖的形式，直接贴代码就没这问题了。虽不是由于 iframe 的原因。 欣赏杨帆的漂亮制作，加的效果出来给画面增色不少{:4_199:} 杨帆 发表于 2024-11-24 13:29
谢谢影子鼓励！这是今年国庆去广西崇左市大新县的峒那屿湾景区拍的
果然是自己拍的呢，取景很好。用自己的摄影做音画，杨帆厉害{:4_187:} 杨帆 发表于 2024-11-24 13:33
是啊，刚刚还向夕阳老师请教：全屏按钮为何在帖子代码上传后发成网页贴就失效了呢
一般直接发代码不去上传就没着问题了吧？ 杨帆 发表于 2024-11-24 13:40
谢谢影子鼓励，我还是一个新手，这是向亚伦老师学习的
杨帆谦虚了，你帖子做这么好，怎么可能还新手啊{:4_173:} 夕阳黄昏 发表于 2024-11-24 15:23
有关代码不熟悉，搞不定
为什么要用空间帖的形式，直接贴代码就没这问题了。虽不是由于 ifra ...
谢谢！夕阳老师辛苦了{:4_190:}
未直接贴代码，缘于有的论坛不支持CSS、JS，想尝试一下空间贴 冬天的雨 发表于 2024-11-24 15:33
欣赏杨帆的漂亮制作，加的效果出来给画面增色不少
谢谢冬雨支持与鼓励，祝开心{:5_108:}
页:
[1]
2