以梦为马 不负光阴
本帖最后由 杨帆 于 2025-12-26 10:07 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>以梦为马 不负光阴</title>
</head>
<body>
<style>
.pa {--state: running;margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);aspect-ratio: 16/9;width: clamp(600px, 90vw, 1400px);min-height: 338px;background: #eee url("https://file.uhsea.com/2504/89fef967a6e2f017bffd913a3ede93f3AQ.jpg") no-repeat center/cover;box-shadow: 2px 2px 8px #000;overflow: hidden;user-drag: none;user-select: none;z-index: 1;display: grid;place-items: center;position: relative;}
.wrap {position: absolute;top: 75%;left: 46%;display: grid;place-items: center;}
.title-text {font: bold 40px 'Microsoft YaHei', sans-serif;color: #eee;letter-spacing: 1px;text-shadow: 0 0 1px #000, 2px 2px 6px #333;position: absolute;z-index: 3;cursor: pointer;transition: all .5s ease;--dance-rotate: 15deg;animation: flash .5s infinite alternate var(--state);}
.title-text:hover {transform: scale(1.2);text-shadow: 0 0 15px currentColor;--dance-duration: .8s;animation: sway var(--dance-duration) -1s linear infinite alternate var(--state);}
@keyframes flash {from {filter: hue-rotate(0deg);}to {filter: hue-rotate(360deg);}}
@keyframes sway {to {transform: rotate(var(--dance-rotate));}}
.pd-vid {position: absolute;width: 100%;height: 100%;object-fit: cover;opacity: 1;clip-path: polygon(0 0,50% 20%,100% 0,90% 50%,100% 100%,50% 80%, 0 100% ,10% 50%);z-index: 2;pointer-events: none;}
#btnFs {position: absolute;left: calc(100% - 130px);bottom:25px;padding: 6px 12px;background: green;color: white;border: 2px solid white;border-radius: 8px;cursor: pointer;z-index: 8;font: normal 1.3em 楷体;text-shadow: 0 0 3px #000;}
#btnFs:hover {background: #218838;font-style: italic;scale: 1.05;translate: -1px 1px;}
#baiBox {position: absolute;width: 100%;height: auto;line-height: 1.5;left: 0;top: 6%;z-index: 8;overflow: hidden;white-space: nowrap;}
#baiBox .tit {position: relative;display: inline-block;font:bold 3.2em/1.2 STXingkai;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);color:#e91e63;letter-spacing: 4px;transition: all .5s ease;animation: scroll-left 28s linear infinite var(--state);}
#baiBox:hover .tit {filter: hue-rotate(0deg);transform:scale(1.2);animation-play-state: paused!important;}
@keyframes scroll-left {0% {transform: translateX(0%);}100% {transform: translateX(-50%);}}
</style>
<div id="pa" class="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/576023a4af3c9e124849d867e613cdaf.mp3" autoplay loop></audio>
<video id="pd-vid" class="pd-vid" src="http://cfss.cc/api/dy/7108920379502103844.mp4" autoplay loop muted preload="metadata"></video>
<meta name="referrer" content="never">
<div id="baiBox">
<div class="tit">
<span>岁末将至，新岁序开，万象更新。走过的一年中，由衷感谢各位朋友对动画音画板块的支持与厚爱！新的一年里，让我们携手同心，以梦为马，不负光阴，在花潮的沃野做好使命与担当的新答卷，在动音板块奏响与时俱进的新乐章，在每一天的时光里描绘平安健康、蒸蒸日上、万事如意的新画卷……</span>
<span>岁末将至，新岁序开，万象更新。走过的一年中，由衷感谢各位朋友对动画音画板块的支持与厚爱！新的一年里，让我们携手同心，以梦为马，不负光阴，在花潮的沃野做好使命与担当的新答卷，在动音板块奏响与时俱进的新乐章，在每一天的时光里描绘平安健康、蒸蒸日上、万事如意的新画卷……</span>
</div>
</div>
<span id="btnFs">全屏欣赏</span>
</div>
<script>
function initAnimatedTitleButton(containerId, audioId = "aud", videoId = "pd-vid") {
const container = document.getElementById(containerId);
const audio = document.getElementById(audioId);
const video = document.getElementById(videoId);
const baiBox = document.getElementById('baiBox');
const dancer = document.querySelectorAll('#baiBox .tit');
function togglePlay() {
if (audio.paused) {
audio.play();
video.play();
dancer.style.animationPlayState = 'running';
} else {
audio.pause();
video.pause();
dancer.style.animationPlayState = 'paused';
}
}
function getRandomColorHSL() {
const hue = Math.floor(Math.random() * 360);
const saturation = `${Math.floor(Math.random() * 30) + 70}%`;
const lightness = `${Math.floor(Math.random() * 20) + 40}%`;
return `hsla(${hue}, ${saturation}, ${lightness}, 1)`;
}
function calculateRingPositions(count, options = {}) {
const config = {cx: 50,cy: 50,r1: 160,r2: 80,arcAngle: 180,startAngle: -90,offsetX: 0,...options};
const positions = [];
const radianStep = (config.arcAngle * Math.PI / 180) / (count - 1);
const startRadian = config.startAngle * Math.PI / 180;
for (let i = 0; i < count; i++) {
const radian = startRadian + i * radianStep;
const x = config.cx + config.r1 * Math.cos(radian);
const y = config.cy + config.r2 * Math.sin(radian);
positions.push();
}
return positions;
}
function createTitleButtons(title, options = {}) {
const config = {fontSize: 40,containerSize: 400,containerPos: 'bottom: 20px',...options};
const wrap = document.createElement('div');
wrap.className = 'wrap';
wrap.style.width = `${config.containerSize}px`;
wrap.style.height = `${config.containerSize}px`;
wrap.style.cssText += config.containerPos;
container.appendChild(wrap);
const textArr = title.split('');
const positions = calculateRingPositions(textArr.length, {cx: config.containerSize / 2,cy: config.containerSize / 2,...options});
textArr.forEach((text, index) => {
const = positions;
const span = document.createElement('span');
span.className = 'title-text';
span.textContent = text;
span.style.left = `${x}px`;
span.style.top = `${y}px`;
span.style.fontSize = `${config.fontSize}px`;
span.style.color = getRandomColorHSL();
span.title = '播放/暂停 (Alt+X)';
span.addEventListener('click', togglePlay);
wrap.appendChild(span);
});
}
function initState() {
audio.addEventListener('playing', () => {
container.style.setProperty('--state', 'running');
video.play();
});
audio.addEventListener('pause', () => {
container.style.setProperty('--state', 'paused');
video.pause();
});
document.addEventListener('keydown', (e) => {
if (e.altKey && e.key === 'x') {
e.preventDefault();
togglePlay();
}
});
}
initState();
return {createTitleButtons};
}
document.addEventListener('DOMContentLoaded', () => {
try {
const animatedBtn = initAnimatedTitleButton('pa', 'aud', 'pd-vid');
animatedBtn.createTitleButtons('以梦为马不负光阴', {fontSize: 35,r1: 160,r2: 100,containerSize: 100,containerPos: 'bottom: 60px',arcAngle: 270,startAngle: -225,offsetX: -20});
} catch (err) {
console.error('初始化失败:', err.message);
}
});
let isFullscreen = true;
let hideTimer;
const btnFs = document.getElementById('btnFs');
const pa = document.getElementById('pa');
btnFs.onclick = () => {
if (isFullscreen) {
btnFs.innerText = '退出全屏';
pa.requestFullscreen();
} else {
btnFs.innerText = '全屏欣赏';
document.exitFullscreen();
}
isFullscreen = !isFullscreen;
};
pa.addEventListener('mousemove', () => {
clearTimeout(hideTimer);
btnFs.style.opacity = '1';
hideTimer = setTimeout(() => {
btnFs.style.opacity = '0';
}, 3000);
});
</script>
</body>
</htm
这动画赛马，音乐激昂，画面设计新颖。赞啦！{:4_187:} 这么多马儿自由驰骋，真好，象征着大家在新的一年奋发有为，自强不息。
借杨帆好帖同祝大家马年快乐，万事如意{:4_187:} 同心同德、建设花潮。 屋舍网已经被浏览器、防杀毒软件视为恶意网站了，不建议再使用 梦江南 发表于 2025-12-25 14:06
这动画赛马，音乐激昂，画面设计新颖。赞啦！
谢谢江南鼓励，祝马上有福，2026万事如意{:4_204:} 红影 发表于 2025-12-25 16:31
这么多马儿自由驰骋，真好，象征着大家在新的一年奋发有为，自强不息。
借杨帆好帖同祝大家马年快乐，万事 ...
谢谢影子鼓励，祝福2026年天马行空福运开{:4_204:} 梦油 发表于 2025-12-25 16:51
同心同德、建设花潮。
谢谢梦兄鼓励，祝福马上有健康，全家乐洋洋{:4_190:} 马黑黑 发表于 2025-12-25 18:25
屋舍网已经被浏览器、防杀毒软件视为恶意网站了，不建议再使用
屋舍网好久没用过了，谢谢马老师提醒
本帖套用了老师您的代码，在此表示感谢
由衷祝福马老师马年全家福气旺旺{:4_191:} 杨帆 发表于 2025-12-25 18:40
谢谢梦兄鼓励，祝福马上有健康，全家乐洋洋
谢谢你的美好祝福。 气势雄浑的佳作，热情豪放，欣赏赞佩！！{:4_204:}{:4_190:}
霜染枫丹 发表于 2025-12-25 21:14
气势雄浑的佳作，热情豪放，欣赏赞佩！！
问好枫丹，2026马上出发，幸福生活一键直达{:4_187:}
祝大家在新的一年里，马到成功，马上有钱，马马虎虎，一马当先！
杨帆 发表于 2025-12-25 18:52
屋舍网好久没用过了，谢谢马老师提醒
本帖套用了老师您的代码，在此表示感谢
{:4_180:}
页:
[1]