私人侦探

马黑黑

马黑黑

帖子代码

<style>
	#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/inspector.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
	#msvg { position: absolute; left: calc(50% - 164px); cursor: pointer; filter: drop-shadow(-5px -5px 10px cyan); animation: rot 8s linear infinite var(--state); }
	#msvg:hover { filter: hue-rotate(60deg); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	#fsbtn { position: absolute; bottom: 15px; color: white; padding: 2px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
	@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1843020840" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/16/01/57/video6364c6f5e3503.mp4" autoplay loop muted></video>
	<svg id="msvg" width="300" height="300"></svg>
	<span id="fsbtn"></span>
</div>
 
<script  type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');

var tt = 9, r1 = 150, r2 = 140, deg = 360 / tt, rad = Math.PI / 180 * deg, pstr = 'M150 150';
var stop = `
	<stop offset="0" stop-color="green" />
	<stop offset="1" stop-color="cyan" />
`;

for(var i = 0; i < tt; i ++) {
	var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
	pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}

dr.marker('m1', 20, 20, 10, 10);
dr.circle(10,10,10,'fuchsia').addTo('m1');
dr.gradient('radialGradient', {id: 'rg', r: .8}, stop);
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd').style('marker-mid: url(#m1)');

msvg.onclick = () => {
	aud.paused
		? (aud.play(), vid.play(), msvg.style.setProperty('--state', 'running'))
		: (aud.pause(), vid.pause(), msvg.style.setProperty('--state', 'paused'));
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => mState());
</script>

马黑黑

谢帕德音调（Shepard Tone），是一种通过声音的强弱变化来欺骗大脑的心理声学的现象。 谢帕德音调通常由三组除了音域之外完全相同的音阶组成。 这三组音阶之间，最高音域的音阶比次高音阶的音域高一个八度，次高音阶又比最低音域的音阶高一个八度。 三组音阶的走向可以是向上也可以是向下，只要保证它们的走向是一模一样的即可。当这三个部分同时播放的时候，会产生调性似乎在不断升高，没有尽头的感觉。

马黑黑

侦探工作需要信息。背景图是第三方创意，以略为抽象的方式揭示侦探背后的深层含义——信息以及信息与现实世界的关系，还有信息的获取和获取的艰辛与危险。

音乐自身，则极尽所能，充分展示了私人侦探的特性，里面有太多的元素显性展露，如怪异、惊恐、凶险、神经质、窃喜、沮丧……音乐似乎能够将欣赏者带入无穷无尽却又看不到盼头的故事里

红影

这个小播把四周加上了小点点，更有趣。
指纹也是侦探需要终点关注的吧，小播就在指纹上。抽丝剥茧的侦探过程

红影

视频的选用和小播的阴影相应成趣。黑黑的制作都很有寓意呢

红影

昨天就发现这个marker标记使用十分灵活，今天就用到帖子里了呢，再学习一下

花飞飞

这个图案配色简直是绝，水晶一般剔透，开贴就被惊艳到了。。
比大自然经典配色红绿灯好看得多

马黑黑

红影 发表于 2024-11-17 10:11
这个小播把四周加上了小点点，更有趣。
指纹也是侦探需要终点关注的吧，小播就在指纹上。抽丝剥茧的侦探过 ...

理解正确

马黑黑

红影 发表于 2024-11-17 10:12
视频的选用和小播的阴影相应成趣。黑黑的制作都很有寓意呢

还好

马黑黑

红影 发表于 2024-11-17 10:14
昨天就发现这个marker标记使用十分灵活，今天就用到帖子里了呢，再学习一下

挺好用的

马黑黑

花飞飞 发表于 2024-11-17 10:38
这个图案配色简直是绝，水晶一般剔透，开贴就被惊艳到了。。
比大自然经典配色红绿灯好看得多

是吗

花飞飞

马黑黑 发表于 2024-11-17 07:45
谢帕德音调（Shepard Tone），是一种通过声音的强弱变化来欺骗大脑的心理声学的现象。 谢帕德音调通常由三 ...

赏美贴~~学点音乐欣赏知识，这音乐节奏感好强~~
看了说明感觉适合现在追的一个剧叫《宿敌》，信息窃取和反窃取的较量

花飞飞

这个跟昨天伞的画法是一致，加了标记，
还有给小播加了绿色至青色渐变，青色只有0.2所以看不太出来
整个小播触碰变色，进行色相60度滤镜变化。十分好看。

花飞飞

马黑黑 发表于 2024-11-17 10:40
是吗

是我说错了么，你这么反问一下吓了一跳。

小辣椒

这个播放器颜色靓丽，音乐震撼，黑黑侦探小说看过了

小辣椒

这个播放器外面加了小点点，点击后没有变色了，昨天那个我做的差不多了，颜色看效果改了好多时间的，但也是算满意了，今天的更加漂亮了

亚伦影音工作室

很漂亮新颖！

亚伦影音工作室

请教老师我的音画里动字咋控制！谢谢！