私人侦探
<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>
<scripttype="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>
<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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>
<scripttype="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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
谢帕德音调（Shepard Tone），是一种通过声音的强弱变化来欺骗大脑的心理声学的现象。 谢帕德音调通常由三组除了音域之外完全相同的音阶组成。 这三组音阶之间，最高音域的音阶比次高音阶的音域高一个八度，次高音阶又比最低音域的音阶高一个八度。 三组音阶的走向可以是向上也可以是向下，只要保证它们的走向是一模一样的即可。当这三个部分同时播放的时候，会产生调性似乎在不断升高，没有尽头的感觉。 侦探工作需要信息。背景图是第三方创意，以略为抽象的方式揭示侦探背后的深层含义——信息以及信息与现实世界的关系，还有信息的获取和获取的艰辛与危险。
音乐自身，则极尽所能，充分展示了私人侦探的特性，里面有太多的元素显性展露，如怪异、惊恐、凶险、神经质、窃喜、沮丧……音乐似乎能够将欣赏者带入无穷无尽却又看不到盼头的故事里 这个小播把四周加上了小点点，更有趣。
指纹也是侦探需要终点关注的吧，小播就在指纹上。抽丝剥茧的侦探过程{:4_187:} 视频的选用和小播的阴影相应成趣。黑黑的制作都很有寓意呢{:4_199:} 昨天就发现这个marker标记使用十分灵活，今天就用到帖子里了呢，再学习一下{:4_187:} 这个图案配色简直是绝，水晶一般剔透，开贴就被惊艳到了。。
{:4_170:}比大自然经典配色红绿灯好看得多 红影 发表于 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），是一种通过声音的强弱变化来欺骗大脑的心理声学的现象。 谢帕德音调通常由三 ...
赏美贴~~学点音乐欣赏知识，这音乐节奏感好强~~
看了说明感觉适合现在追的一个剧叫《宿敌》，信息窃取和反窃取的较量{:4_173:} 这个跟昨天伞的画法是一致，加了标记，
还有给小播加了绿色至青色渐变，青色只有0.2所以看不太出来{:4_173:}
整个小播触碰变色，进行色相60度滤镜变化。十分好看。 马黑黑 发表于 2024-11-17 10:40
是吗
是我说错了么，你这么反问一下吓了一跳。{:4_170:} 这个播放器颜色靓丽，音乐震撼，黑黑侦探小说看过了{:4_189:} 这个播放器外面加了小点点，点击后没有变色了，昨天那个我做的差不多了，颜色看效果改了好多时间的，但也是算满意了，今天的更加漂亮了{:4_178:}
很漂亮新颖！ 请教老师我的音画里动字咋控制！谢谢！
页:
[1]
2