故乡的原风景
本帖最后由 杨帆 于 2025-10-12 19:05 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>故乡的原风景</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68ea2b3ac5157e1a88657ca2.webp') no-repeat center/cover;}
#vid { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;mask: radial-gradient(transparent 5%, red); -webkit-mask: radial-gradient(transparent 5%, red); opacity: .8; object-fit: cover; overflow: hidden; z-index: 1;mix-blend-mode: overlay; transition:.5s;}
#vid1 {position: absolute; width: 437px;height: 270px;right: 5%;top: 8%;object-fit: cover; border: 3px solid #ccc;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;border-radius: 50%;mix-blend-mode: unset;pointer-events: none;opacity: .85;z-index: 1;}
#progress { position: absolute; width: 30vw; height: 30vw; right:-8%; bottom: -10%; transition:.4s;cursor: pointer;z-index: 5; }
#progress:hover{transform:scale(1.1,1.1);filter:hue-rotate(45deg) drop-shadow(2px 2px 35px Snow);}
#g1 {position: absolute;transform-box: fill-box; transform-origin: center; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
#g1:hover {animation-play-state: paused; }
#btnFs { left: 20px; top: 20px; color: gold; border-color: currentColor !important;z-index: 5; }
#dt { position: absolute; left: 10%; top: 50%; z-index: 5; mix-blend-mode: multiply;visibility: var(--visibility); }
#scroll { position: absolute; left: 45px; top: 220px; width: 450px; height: 300px; padding: 15px; border-color: currentColor !important; z-index: 5; }
#marquee { height: 100%; overflow: hidden; }
#marquee> div { text-align: center; animation: marquee 15s linear infinite var(--state); }
#marquee:hover > div { animation-play-state: paused; }
.tit { font: bold 1.6em SimKai; line-height: 2.8; font-weight: 600; color:Snow; user-select: none; }
.tit h3 { margin: 0 0 15px 0; }
@keyframes marquee {0% { transform: translateY(0%); }100% { transform: translateY(-100%); }}
#mwrap { position: absolute;perspective: 800px; transform-style: preserve-3d; right:3%;bottom: 10%;width: 200px;height: 200px;--state: running;}
.title-text {font: bold 30px 'Microsoft YaHei', sans-serif;color: #eee;text-shadow: 0 0 1px #000, 2px 2px 6px #333;position: absolute;color: SeaShell;user-select: none;transform-origin: center; }
.title-text:hover { background: hsla(210, 100%, 60%, .25);box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);animation-play-state: paused;}
.ani {animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state);}
@keyframes flash {to { color: lime;opacity: .8;}}
@keyframes rotate {from {transform: rotate(0);} to {transform: rotate(360deg);}}
@keyframes rot {from { transform: translate(-50%, -50%) rotateX(35deg) rotateY(10deg) rotateZ(0deg);}to {transform: translate(-50%, -50%) rotateX(35deg) rotateY(10deg) rotateZ(360deg);}}
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/c49f56976dcae5f8b6f0c677376261fc.mp3" autoplay loop></audio>
<video class ="pd-vid" src="https://video.699pic.com/videos/48/99/63/a_JQ9bv8G8yWXj1560489963_10s.mp4" autoplay loop muted></video>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/59/video63662a47cce4f.mp4" autoplay loop muted></video>
<video id="vid1" src="https://upfile.mp3.wf/view.php/55c0303fe64d24695f33606cdd72d489.mp4" autoplay loop muted></video>
<div id="mwrap"></div>
<div id="dt"><img id="Img" src="https://pic1.imgdb.cn/item/68ea310fc5157e1a88657eb4.png" style="width: 206px;height:250px;" alt="" /></div>
<svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-300 -300 600 600">
<g id="g1" class="brightness"><title>播放/暂停</title></g>
</svg>
<div id="scroll">
<div id="marquee">
<div class="tit">
<h2>故乡的原风景</h2>
《故乡的原风景》<br />由日本陶笛艺人宗次郎创作<br />被许多人所喜爱<br />该曲以山间溪流等自然景色为比拟对象<br />透过清新悠扬的陶笛乐音<br />表达了对于自然万物与山川土地的情怀<br />
</div>
</div>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
var dr = Dr.dr(progress);
dr.polygon('0 -80, -10 -60, 0 0, 10 -60', 'Gold', 'Azure', 2).addTo('g1').rotates(18);
dr.circle(0, 0, 10, 'Orange', 'SeaShell', 3).addTo('g1');
FS(pa, progress);
const VideoBlendController = (function() {
let config = {
videoId: 'vid',
interval: 12000,
opacityRange: ,
blendModes: [
'screen', 'overlay', 'soft-light', 'hard-light',
'multiply', 'difference', 'exclusion', 'hue',
'color-dodge', 'color-burn', 'luminosity'
]
};
let videoElement = null;
let effectTimer = null;
function getRandomInRange(min, max) {
return (Math.random() * (max - min) + min).toFixed(2);
}
function applyRandomEffect() {
if (!videoElement) return;
const randomMode = config.blendModes[
Math.floor(Math.random() * config.blendModes.length)
];
const randomOpacity = getRandomInRange(
config.opacityRange,
config.opacityRange
);
videoElement.style.mixBlendMode = randomMode;
videoElement.style.opacity = randomOpacity;
console.log(`视频混合模式更新: ${randomMode} (透明度: ${randomOpacity})`);
}
return {
init: function(options = {}) {
Object.assign(config, options);
videoElement = document.getElementById(config.videoId);
if (videoElement) {
videoElement.onerror = () => {
console.error('视频资源加载失败，请检查地址是否有效');
};
} else {
console.error(`未找到ID为"${config.videoId}"的视频元素`);
return;
}
if (!aud.paused) {
this.start();
}
},
start: function() {
this.stop();
applyRandomEffect();
effectTimer = setInterval(applyRandomEffect, config.interval);
},
stop: function() {
if (effectTimer) {
clearInterval(effectTimer);
effectTimer = null;
}
},
toggleOnce: function() {
applyRandomEffect();
},
updateConfig: function(newConfig) {
Object.assign(config, newConfig);
this.start();
}
};
})();
var mState = () => {
g1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
dt.style.setProperty('--visibility', aud.paused ? 'hidden' : 'inherit');
mwrap.style.setProperty('--state',aud.paused ? 'paused' : 'running');
if (aud.paused) {
VideoBlendController.stop();
} else {
VideoBlendController.start();
}
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
progress.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mState();
};
document.addEventListener('DOMContentLoaded', function() {
VideoBlendController.init({
videoId: 'vid',
interval: 5000,
opacityRange: [.5, .9]
});
});
var txtAr = '故乡的原风景 '.split(''),
spans = [],
total = 6;
txtAr.forEach((t, k) => {
var s = document.createElement('span');
s.textContent = t;
s.className = k === 0 ? 'title-text ani' : 'title-text';
var a = -140 / (txtAr.length - 1) * k - 120,
r = 100;
s.style.cssText += `
left: ${r + r * Math.cos(a * Math.PI / 180)}px;
top: ${r + r * Math.sin(a * Math.PI / 180)}px;
`;
spans.push(s);
s.onanimationend = () => {
s.classList.remove('ani');
spans[(k + 1) % txtAr.length].classList.add('ani');
};
mwrap.appendChild(s);
});
</script>
</body>
</html> 音画唯美 制作大气 感谢杨帆带来的精彩，辛苦了！祝你开心幸福、阖家幸福！ 谢谢偶然~版主鼓励，祝开心{:4_191:} 欣赏杨帆的精彩制作{:4_187:}{:4_199:} 小辣椒 发表于 2025-10-11 22:16
欣赏杨帆的精彩制作
谢谢小辣椒鼓励，祝开心天天{:4_204:} 漂亮的音画，动听的音乐！色前在网易云下载过，可现在在我帖子里放不出来了，问了，说只能网易相关的地方放， 樵歌 发表于 2025-10-12 07:38
漂亮的音画，动听的音乐！色前在网易云下载过，可现在在我帖子里放不出来了，问了，说只能网易相关的地方放 ...
只能网易相关的地方放？这个是上传的，应该可以正常播放呀{:4_171:} 这帖非常欣赏的是视频中放视频。多元素组合得非常精彩。学习了！{:4_187:} 梦江南 发表于 2025-10-12 15:28
这帖非常欣赏的是视频中放视频。多元素组合得非常精彩。学习了！
问好江南，谢谢欣赏与鼓励{:4_204:} 真棒的制作，好美{:4_199:} 红影 发表于 2025-10-12 23:06
真棒的制作，好美
谢谢影子鼓励，祝开心天天{:4_187:} 还以为有杨帆故乡的风景看赶紧的进来了{:4_173:}，风景漂亮，想起国庆时看到的那梯田 绿叶清舟 发表于 2025-10-23 21:20
还以为有杨帆故乡的风景看赶紧的进来了，风景漂亮，想起国庆时看到的那梯田
热诚欢迎绿叶驾清舟到杨帆故乡看风景{:4_199:}
国庆时你去哪儿看梯田了，发个片片呗{:4_204:}
来欣赏杨帆的精品佳作，祝您创作如春泉涌流不息！ 杨帆 发表于 2025-10-24 16:09
热诚欢迎绿叶驾清舟到杨帆故乡看风景
国庆时你去哪儿看梯田了，发个片片呗
是在江西那里了，手机里找了一下没找到啊，平时懒得拍片的了以后注意{:4_173:} 欣赏杨帆好制作{:4_187:} 冬天的雨 发表于 2025-12-9 11:23
欣赏杨帆好制作
问好冬雨版主，谢谢鼓励{:4_191:}
页:
[1]