南无月试贴

南无月 发表于 2024-2-20 17:25

本帖最后由南无月于 2024-8-3 21:03 编辑 <style>
#mydiv {
margin: 30px 0 30px calc(50% - 931px);
width: 1700px;
height:900px;
background: url('https://pic.imgdb.cn/item/66ae2051d9c307b7e9ddd76d.jpg') no-repeat center/cover;
display: grid;
place-items: center;
pointer-events: none;
box-shadow: 0 0 6px rgba(0,0,0,.6);
z-index: 1;
position: relative;
overflow: hidden;
--conic: 2%;
}
#mydiv::before {
position: absolute;
content: '';
top: 0px;
width: 1700px;
height:900px;
background: url('https://pic.imgdb.cn/item/66ae12fed9c307b7e9c98879.png') no-repeat center/cover;
z-index: 5;
}

#mydiv::after {
position: absolute;
content: '';
left:160px;
bottom: 300px;
width: 120px;
height: 120px;
background: repeating-conic-gradient(transparent, CadetBlue, transparent 6% var(--conic));
-webkit-mask: url('https://638183.freep.cn/638183/small/7s.png') no-repeat center/cover;
pointer-events: auto;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
transform: rotate(var(--deg));
z-index: 4;
}

#mydiv:hover::after { --conic: 6%; filter: hue-rotate(210deg);}
#vid1 {
top:-80px;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask: linear-gradient(to top, transparent,red);
z-index: 2;
}
#vid2 {
bottom:-100px;
position: absolute;
width: 100%;
height: 80%;
opacity: .80;
object-fit: cover;
mix-blend-mode: multiply;
-webkit-mask: linear-gradient(to bottom,transparent,transparent, red);
z-index: 3;
}
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1485774690" autoplay loop></audio>
<video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/01/72/5b49440ab4e45.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b492fae7af99.mp4" autoplay loop muted></video>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? (vid1.pause(), vid2.pause()): (vid1.play(), vid2.play());
};
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

南无月 发表于 2024-3-22 12:39

本帖最后由南无月于 2024-3-22 12:40 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">    #papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://pic.imgdb.cn/item/65fbae639f345e8d03723b84.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }</cl-cd>
<cl-cd data-idx="3">    #canv { position: absolute; left: 28%; bottom: 4px; transform: translate(-50%,0); cursor: pointer; }</cl-cd>
<cl-cd data-idx="4">    .pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1724,-80 Q1550,-20 -100,360'); offset-distance: 100%; animation: fly 20s var(--delay) infinite var(--state); --delay: 0s; }</cl-cd>
<cl-cd data-idx="5">    .pic:nth-of-type(2) { --delay: -7s; }</cl-cd>
<cl-cd data-idx="6">    .pic:nth-of-type(3) { --delay: -14s; }</cl-cd>
<cl-cd data-idx="7">    @keyframes fly { to { offset-distance: 0; } }</cl-cd>
<cl-cd data-idx="8">    #vid { position: absolute; width: 120%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .52; transform: rotateY(180deg); }</cl-cd>
<cl-cd data-idx="9"></style></cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"><div id="papa"></cl-cd>
<cl-cd data-idx="12"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c62b9766e.mp4" autoplay="" loop="" muted=""></video></cl-cd>
<cl-cd data-idx="13">    <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" /></cl-cd>
<cl-cd data-idx="14">    <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" /></cl-cd>
<cl-cd data-idx="15">    <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" /></cl-cd>
<cl-cd data-idx="16"> <canvas id="canv" width="600" height="240" title="点击播放"></canvas></cl-cd>
<cl-cd data-idx="17"></div></cl-cd>
<cl-cd data-idx="18"> </cl-cd>
<cl-cd data-idx="19"><script></cl-cd>
<cl-cd data-idx="20"> </cl-cd>
<cl-cd data-idx="21">(function() {</cl-cd>
<cl-cd data-idx="22"> </cl-cd>
<cl-cd data-idx="23">let aud = new Audio();</cl-cd>
<cl-cd data-idx="24">aud.src = 'https://yinpin.s3-us-east-1.ossfiles.com/qihang.mp3';</cl-cd>
<cl-cd data-idx="25">aud.crossOrigin = '';</cl-cd>
<cl-cd data-idx="26">aud.loop = true; </cl-cd>
<cl-cd data-idx="27">aud.load();</cl-cd>
<cl-cd data-idx="28">aud.play();</cl-cd>
<cl-cd data-idx="29">let AudioContext = window.AudioContext || window.webkitAudioContext;</cl-cd>
<cl-cd data-idx="30">let Ac = new AudioContext;</cl-cd>
<cl-cd data-idx="31">let analyser = Ac.createAnalyser();</cl-cd>
<cl-cd data-idx="32">analyser.fftSize = 256;</cl-cd>
<cl-cd data-idx="33">let source = Ac.createMediaElementSource(aud);</cl-cd>
<cl-cd data-idx="34">source.connect(analyser);</cl-cd>
<cl-cd data-idx="35">analyser.connect(Ac.destination);</cl-cd>
<cl-cd data-idx="36">let len = analyser.frequencyBinCount - 30;</cl-cd>
<cl-cd data-idx="37">let output = new Uint8Array(len);</cl-cd>
<cl-cd data-idx="38">let canvctx = canv.getContext('2d');</cl-cd>
<cl-cd data-idx="39">let ppWidth = canv.width / len; </cl-cd>
<cl-cd data-idx="40">let ppHeight, x;</cl-cd>
<cl-cd data-idx="41">let gradient = canvctx.createLinearGradient(0,0,0,200);</cl-cd>
<cl-cd data-idx="42">gradient.addColorStop(0,'rgba(255,165,0'); </cl-cd>
<cl-cd data-idx="43">gradient.addColorStop(.5,'rgba(255,165,0'); </cl-cd>
<cl-cd data-idx="44">gradient.addColorStop(1,'rgba(128,128,128');</cl-cd>
<cl-cd data-idx="45">(function draw() {</cl-cd>
<cl-cd data-idx="46"> canvctx.clearRect(0, 0, canv.width, canv.height);</cl-cd>
<cl-cd data-idx="47"> analyser.getByteFrequencyData(output);</cl-cd>
<cl-cd data-idx="48"> x = 0.5; </cl-cd>
<cl-cd data-idx="49"> for(let i = 0; i < len; i ++) {</cl-cd>
<cl-cd data-idx="50"> ppHeight = output * .9 + ppWidth;</cl-cd>
<cl-cd data-idx="51"> canvctx.fillStyle = gradient;</cl-cd>
<cl-cd data-idx="52"> canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);</cl-cd>
<cl-cd data-idx="53"> x += ppWidth;</cl-cd>
<cl-cd data-idx="54"> }</cl-cd>
<cl-cd data-idx="55"> requestAnimationFrame(draw); </cl-cd>
<cl-cd data-idx="56">})();</cl-cd>
<cl-cd data-idx="57">aud.onpause = aud.onplaying = () => aud.paused ?</cl-cd>
<cl-cd data-idx="58">    (canv.title = '点击播放', papa.style.setProperty('--state', 'paused')) :</cl-cd>
<cl-cd data-idx="59">    (canv.title = '点击暂停', papa.style.setProperty('--state', 'running'));</cl-cd>
<cl-cd data-idx="60">canv.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="61">//papa.onclick = () => aud.paused ? (vid.pause(),vid2.pause()) : (vid.play(),vid2.play()); </cl-cd>
<cl-cd data-idx="62"> </cl-cd>
<cl-cd data-idx="63">})();</cl-cd>
<cl-cd data-idx="64"></script></cl-cd>
</div>

南无月 发表于 2024-3-22 12:41

我的浏览器不行么，还是看不到频谱。@马黑黑

南无月 发表于 2024-3-22 12:46

虽然不知道JS代码闭包啥意思{:4_173:}
电脑落后我知道，现在我用手机看看——也没显示频谱

马黑黑 发表于 2024-3-22 13:20

南无月发表于 2024-3-22 12:41
我的浏览器不行么，还是看不到频谱。@马黑黑

昨晚测试时行的，现在又不行了

马黑黑 发表于 2024-3-22 13:21

南无月发表于 2024-3-22 12:46
虽然不知道JS代码闭包啥意思
电脑落后我知道，现在我用手机看看——也没显示频谱
音乐也不能播放。本地测试没有问题，甚至可以不开启虚拟服务器。

马黑黑 发表于 2024-3-22 13:38

现在行了。踩了一个坑，这个坑过去也踩过： 

论坛对会做ubb解析，要写成 [ i ]，i 的两边逗留空格。另外我在《三十里铺》发布的代码多出两行废码，现已修正。

南无月 发表于 2024-3-22 17:41

马黑黑发表于 2024-3-22 13:38
现在行了。踩了一个坑，这个坑过去也踩过：

论坛对会做ubb解析，要写成 [ i ]，i 的两边逗留空格。另 ...

这个坑时有时无啊。。
经常有也就记得了。。
这么突然的跳出一个，也是费劲{:4_173:}

南无月 发表于 2024-3-22 17:42

马黑黑发表于 2024-3-22 13:20
昨晚测试时行的，现在又不行了

这天家小坑有规律么 {:4_170:}

南无月 发表于 2024-3-22 17:43

马黑黑发表于 2024-3-22 13:21
音乐也不能播放。本地测试没有问题，甚至可以不开启虚拟服务器。

音画编辑里完全没问题，甚至到别的论坛测试都没问题。。{:4_173:}所以我也是纳了闷了

马黑黑 发表于 2024-3-22 18:59

南无月发表于 2024-3-22 17:43
音画编辑里完全没问题，甚至到别的论坛测试都没问题。。所以我也是纳了闷了

Discuz! X3.2 就是问题好多的，它的错误很多，按F12看看

马黑黑 发表于 2024-3-22 19:00

南无月发表于 2024-3-22 17:41
这个坑时有时无啊。。
经常有也就记得了。。
这么突然的跳出一个，也是费劲

过去碰上时，我就改用 j 做循环自增变量，后来用着用着就忘记了这回事，毕竟在本地机测试无需考虑这些

南无月 发表于 2024-3-22 20:57

马黑黑发表于 2024-3-22 18:59
Discuz! X3.2 就是问题好多的，它的错误很多，按F12看看

不看。。。按了一堆乱码又看不懂

南无月 发表于 2024-3-22 20:57

马黑黑发表于 2024-3-22 19:00
过去碰上时，我就改用 j 做循环自增变量，后来用着用着就忘记了这回事，毕竟在本地机测试无需考虑这些

这个问题是好久之前的，至少半年前。。{:4_170:}

马黑黑 发表于 2024-3-22 20:58

南无月发表于 2024-3-22 20:57
不看。。。按了一堆乱码又看不懂

反正每行标注一个红圆圈里面有叉叉的就是错误

马黑黑 发表于 2024-3-22 20:59

南无月发表于 2024-3-22 20:57
这个问题是好久之前的，至少半年前。。

不止半年了。都说好了伤疤忘了疼，此话不假

南无月 发表于 2024-3-23 16:59

马黑黑发表于 2024-3-22 20:58
反正每行标注一个红圆圈里面有叉叉的就是错误

传说中的F12，听你说过无数次，从来没真的实际用过

南无月 发表于 2024-3-23 17:02

马黑黑发表于 2024-3-22 20:59
不止半年了。都说好了伤疤忘了疼，此话不假

动网程序这个小BUG，亏是你能找到并解决，这么久它也没升级。
不过升了级又被限，好象还是这样的好。。{:4_173:}

马黑黑 发表于 2024-3-23 18:15

南无月发表于 2024-3-23 17:02
动网程序这个小BUG，亏是你能找到并解决，这么久它也没升级。
不过升了级又被限，好象还是这样的好。。{ ...

动网死掉了，现在是 discuz! 的天下，湾湾那边也都在用，目前由腾讯维护，早升级了的，是樵歌的论坛不敢更新。

马黑黑 发表于 2024-3-23 18:15

南无月发表于 2024-3-23 16:59
传说中的F12，听你说过无数次，从来没真的实际用过

就按一下它，然后一般向右看

页: [1] 2 3 4 5 6

花潮论坛's Archiver

南无月试贴