【2025时光碎片】《微光点点 》
本帖最后由 杨帆 于 2025-12-17 11:41 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>微光点点</title>
</head>
<body>
<style>
#pa{margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);background: #000 url('') no-repeat center/20% 20%;width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;border-radius:20px;box-shadow:0px 0px 0px 2px #000000, 0px 0px 15px 15px #006000; overflow: hidden; position: relative; display: grid; place-items: center; perspective: 1000px;user-drag: none; user-select: none;--state:running;z-index:1; }
#dancer { position: absolute; left:0%;top: 0%;width: 100%;height:100%;opacity: .7;display:var(--display);z-index:1;}
.dancer {position: absolute; opacity: .9;right: -1%; top: 1%; width: 25%; height: 20%;z-index:1;}
#txtBox{position: absolute; left:8%;top: 12%;width: 400px;height: auto;font: bold 28px SimHei, NSimSun, 'Microsoft YaHei';color: lightblue;line-height: 2em;letter-spacing: 2px;text-align: center;transform-style: preserve-3d; transform: rotateX(5deg) rotateY(-5deg)rotateZ(-15deg); perspective-origin: top left;transform-origin: center center 15px; z-index: 10;--state:running;}
#mypic {position: absolute;right: 40px;bottom: 40px;width: 100px;height: 100px;cursor: pointer; animation: rot 5s linear infinite var(--state);z-index: 10;}
#mypic:hover {animation-play-state: paused; filter: brightness(2) hue-rotate(300deg); scale:1.2;}
@keyframes rot { to { transform: rotate(360deg);filter: hue-rotate(90deg); } }
#fullscreen { position:absolute; left: 3%; top: 40px;width: 42px;height: 42px; cursor: pointer;opacity: 0; z-index: 8;}
#papa:hover #fullscreen {opacity: 1;}
#全屏 { width: 42px; height: 42px;position: absolute;background: url('https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png') no-repeat center/cover;opacity: 1; }
#退出 { width: 42px; height: 42px;position: absolute; opacity: 0; background: url('https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png') no-repeat center/cover; opacity: 1;}
#vid1 {position: absolute;left:5%;top:5%;width: 100%;height:100%;object-fit: cover; mix-blend-mode: screen;mask: linear-gradient(to right top, red 0%,red 90%, transparent 90%,transparent);-webkit-mask: linear-gradient(to right top, red 0%, red 90%, transparent 90%,transparent); opacity: .9; pointer-events: none;transition: 1s; z-index: 2; }
</style>
<div id="pa">
<span id="fullscreen" title="全屏/退出">
<div id="全屏"></div>
<div id="退出"></div>
</span>
<video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" autoplay loop muted oncontextmenu="return false"></video>
<div id="txtBox"></div>
<audio id="aud" src="https://wj.zp68.com/hxw/mp3/2025/12/xiq.mp3"" autoplay="autoplay" loop="loop"></audio>
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/snow.webp" />
<img id="dancer" src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" alt="" >
<img class ="dancer" src="https://s3.bmp.ovh/imgs/2025/12/14/5d2eb1ce0a0510e6.png" alt="" >
</div>
<script language="javascript">
const txtBox = document.getElementById("txtBox");
const aud = document.getElementById("aud");
const mypic = document.getElementById("mypic");
var idx = 0;
var str = "—2025时光碎片—<br>微光点点<br>光阴似箭，日月如梭，转眼年末岁初。回想走过的2025年，虽说并无耀眼的高光时刻，但也微光点点——这一年，坚持践行最大的体面是奋斗，深度演绎最美的姿态是学习，生动诠释精神生命的核心是青春。安康，淡泊，欣慰，安宁，从容……";
var textTimer = setInterval(() => {
txtBox.innerHTML = str.substring(0, idx) + "|";
idx += 1;
if(idx > str.length) idx = 0;
}, 200);
mypic.onclick = () => {
aud.paused ? (aud.play(),vid1.play()): (aud.pause(), vid1.pause());
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mypic.title = aud.paused ? '播放' : '暂停';
if (aud.paused) {
clearInterval(textTimer);
dancer.style.setProperty('--display', 'none');
} else {
dancer.style.setProperty('--display', '');
clearInterval(textTimer);
textTimer = setInterval(() => {
txtBox.innerHTML = str.substring(0, idx) + "|";
idx++;
if (idx > str.length) idx = 0;
}, 200);
}
};
mypic.title = '暂停'; let fs = true;let fsTimer;
fullscreen.onclick = () => {fs ? (pa.requestFullscreen(), 全屏.style.opacity = '0', 退出.style.opacity = '1') : (document.exitFullscreen(), 全屏.style.opacity = '1', 退出.style.opacity = '0');fs = !fs;}
pa.addEventListener('mousemove', () => { clearTimeout(fsTimer); fullscreen.style.opacity = '1';fsTimer = setTimeout(() => { fullscreen.style.opacity = '0'; }, 3000); });
</script>
</body>
</html>
杨帆朋友下午好！你这个设计还是很有新意的啊。 问好杨帆，很有创意的佳作！欣赏支持~~{:4_204:}{:4_190:}
显示的字和音乐好配！欣赏杨帆老师的帖子{:4_187:} 有创意，把碎片时光当着一朵正慢慢绽放的花朵，花开花谢。正如人生一样，有高光，有暗谷。。。 梦油 发表于 2025-12-15 16:31
杨帆朋友下午好！你这个设计还是很有新意的啊。
谢谢梦油管理员鼓励，祝马到成功乐天天{:4_191:} 小九 发表于 2025-12-15 17:43
显示的字和音乐好配！欣赏杨帆老师的帖子
这首歌最契合你了{:4_172:} 霜染枫丹 发表于 2025-12-15 17:30
问好杨帆，很有创意的佳作！欣赏支持~~
谢谢枫丹版主鼓励，祝一马当先乐天天{:4_204:} 小九 发表于 2025-12-15 17:43
显示的字和音乐好配！欣赏杨帆老师的帖子
谢谢小九管理员鼓励，祝以梦为马不负韶华{:4_204:} 樵歌 发表于 2025-12-15 19:03
有创意，把碎片时光当着一朵正慢慢绽放的花朵，花开花谢。正如人生一样，有高光，有暗谷。。。
信马由缰鼓捣着玩呢，让樵歌管理员见笑了{:4_180:} 杨帆 发表于 2025-12-15 19:03
谢谢梦油管理员鼓励，祝马到成功乐天天
杨帆朋友晚上好！我们都是老年朋友了吧？彼此之间别客气，你就叫我老梦吧。 这样的时光碎片的表现很奇特，漂亮。
欣赏杨帆好帖{:4_187:} 梦油 发表于 2025-12-15 20:25
杨帆朋友晚上好！我们都是老年朋友了吧？彼此之间别客气，你就叫我老梦吧。
不客气，梦兄好，开心天天{:4_190:} 红影 发表于 2025-12-15 21:08
这样的时光碎片的表现很奇特，漂亮。
欣赏杨帆好帖
谢谢影子鼓励，此表现效果出自你推荐的马老师的文字效果集中营呦{:4_187:} 杨帆 发表于 2025-12-15 22:17
谢谢影子鼓励，此表现效果出自你推荐的马老师的文字效果集中营呦
嗯嗯，就是文字的打字效果吧{:4_173:} 杨帆 发表于 2025-12-15 22:11
不客气，梦兄好，开心天天
好好好！这样挺好。祝杨帆朋友快乐！ 杨帆出品，必是精品！太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待杨帆佳作频出！
过往皆为序章，将来皆为可盼。祝杨帆新年快乐，前程似锦！ 偶然~ 发表于 2025-12-18 10:11
杨帆出品，必是精品！太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
问好偶然~，谢谢鼓励，祝与时俱进、开心天天{:4_191:}
页:
[1]
2