《寂色》TO 沐心（学习马老师贴《7 Years》）
本帖最后由 杨帆 于 2025-10-13 11:28 编辑 <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/68b8477458cb8da5c878d2ff.jpg') 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;}
#progress { position: absolute; width: 30vw; height: 30vw; right: -140px; bottom: -140px; transition:.4s;cursor: pointer;z-index: 5; }
#progress:hover{transform:scale(1.1,1.1);filter: brightness(3) drop-shadow(3px 2px 35px Azure);}
#g1 { 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: 45%; top: 50%; z-index: 5; mix-blend-mode: multiply; cursor: pointer; visibility: var(--visibility); }
#scroll { position: absolute; left: 30px; 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%); }}
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/30f1ad3e37948957a104c4067d76db98.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>
<div id="dt"><img id="Img" src="https://pic1.imgdb.cn/item/6693efdad9c307b7e92f554c.gif" style="width: 200px;height:120px;" alt="" title="暂停" /></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 />能够触动听者的心灵<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.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-90, 0, 90, 0, 'PaleGoldenRod', 5).style('stroke-dasharray:8 15').addTo('lines')
dr.line(-60, 0, 60, 0, 'Khaki',10, 'round').set('stroke-dasharray','4 15').addTo('lines');
dr.line(-30, 0, 30, 0, 'Gold', 15, 'bevel').set('stroke-dasharray','2 15').addTo('lines');
dr.use('#lines').addTo('g1').rotates(20);
dr.circle(0, 0, 10, 'Orange', 'Gold', 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');
if (aud.paused) {
VideoBlendController.stop();
} else {
VideoBlendController.start();
}
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
progress.onclick = dt.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mState();
};
document.addEventListener('DOMContentLoaded', function() {
VideoBlendController.init({
videoId: 'vid',
interval: 5000,
opacityRange: [.5, .9]
});
});
</script>
</body>
</html> <br><br>
《寂色》这首小提琴曲，以其柔美的旋律和深远的意境，被许多人所喜爱。它又被称为《巴卡贝尔的忧伤》，虽然有传言称它是《神秘园之歌》中的一首乐曲，但这一说法并无确凿证据。实际上，这首曲子是由中国小提琴家黄翠珊演奏的，并最初出现在1996年的专辑《黄翠珊·小提琴》中，成为该专辑的代表作之一。 <br><br>
《寂色》的旋律温柔细腻，浪漫优美，深情缠绵，能够触动听者的心灵。它的演奏风格要求演奏者表现出极其柔和、温暖的音色，通过细腻的表情和技巧来展现曲子中的情感。这首曲子的平静而富有韵律感的旋律线，与简洁而丰富的和弦进展相结合，营造出一种安静而充满思考的氛围。 <br><br>
聆听《寂色》，就像是在寂静的夜里，让音乐轻轻触摸、安抚着我们的灵魂。它的旋律能够让人沉醉其中，迷失在记忆里，沉沦在思念中。这首曲子的深情和缠绵，能够让人在遥远的梦幻里流连，去寻找渴望已久的心的宁静。 <br><br>
《寂色》不仅适合在安静的环境中独自欣赏，它的旋律也常被用于电影配乐和舞台表演中，为画面或场景增添了深度和情感。它的旋律和情感的表达，能够直击听众的内心，引发人们对生活和自我内心的思考，是一首富有内涵和情感的小提琴独奏曲。<br><br>
欢迎沐心~祝福沐心在花潮玩的开心{:4_204:}
这制作真漂亮，月亮里还有一对跳舞的人呢。背景漂亮，小播的设计也极美。
欣赏杨帆好帖，沐心收礼开心{:4_187:} 杨帆的制作真快啊，只是这样的小圆上应该没有进度条了吧，那么小也点不到了{:4_173:} 红影 发表于 2025-9-18 23:11
杨帆的制作真快啊，只是这样的小圆上应该没有进度条了吧，那么小也点不到了
是，没设置进度条。谢谢影子鼓励，鼓捣着玩呢{:4_173:} 谢谢杨帆兄，大早收到礼物，开心雀跃
你的音画有自己的特色，识别度还是挺高
《寂色》标题和曲子，都是能让人心静的元素，喜欢
天籁之音，娓娓道来的感觉 背景图设计巧妙，用云层构成了一个心型。音乐有吸引力。 本帖最后由 杨帆 于 2025-9-19 15:31 编辑
沐心 发表于 2025-9-19 08:04
谢谢杨帆兄，大早收到礼物，开心雀跃
你的音画有自己的特色，识别度还是挺高
谢谢沐心喜欢，谢谢小妹肯定与鼓励，祝福开心天天{:4_204:} 梦江南 发表于 2025-9-19 09:37
背景图设计巧妙，用云层构成了一个心型。音乐有吸引力。
问好江南，素材用的是论坛朋友的，包括你的视频，在此表示感谢{:4_187:} 这制作的动感效果太妙了！{:4_178:}特别月亮中那对跳舞的人儿。 樵歌 发表于 2025-9-19 16:14
这制作的动感效果太妙了！特别月亮中那对跳舞的人儿。
谢谢樵歌管理员鼓励，祝开心天天{:4_191:} 杨帆 发表于 2025-9-19 15:29
问好江南，素材用的是论坛朋友的，包括你的视频，在此表示感谢
我知道的。不用谢。 梦江南 发表于 2025-9-19 16:23
我知道的。不用谢。
好，祝开心天天{:4_204:} 杨帆 发表于 2025-9-18 23:27
是，没设置进度条。谢谢影子鼓励，鼓捣着玩呢
这个鼓捣得特别好呢，很赞{:4_187:}
页:
[1]