让生命去等候
<style>#papa { margin: 20px 0 20px calc(50% - 621px); width: 1080px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/t5.jpeg') no-repeat center/cover; box-shadow: inset 0 0 200px cyan, 3px 3px 6px #333; overflow: hidden; user-select: none; z-index: 1; position: relative; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; opacity: 0.75; pointer-events: none; }
#canv { display: block; position: absolute; left: calc(50% - 120px); top: 20px; cursor: pointer; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<body>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1422634243" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/31/5b3f2b5466757.mp4" autoplay loop muted></video>
<canvas id='canv' width="240" height="240"></canvas>
</div>
<script>
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/canv3dball.js';
sF.charset = 'utf-8';
document.body.appendChild(sF);
let pa = papa; //指定帖子容器 ：pa 是变量名 papa 是id名
</script>
本帖最后由 马黑黑 于 2024-4-30 09:26 编辑 <br /><br /><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>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 621px); <span class="tBlue">width:</span> 1080px; <span class="tBlue">height:</span> 720px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/t5.jpeg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> inset 0 0 200px cyan, 3px 3px 6px #333; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">user-select:</span> none; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">opacity:</span> 0.75; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="4"> #canv { <span class="tBlue">display:</span> block; <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> calc(50% - 120px); <span class="tBlue">top:</span> 20px; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="5"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">body</span>></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1422634243"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2418175/00/01/31/5b3f2b5466757.mp4"</span> autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=“canv” width=<span class="tMagenta">"240"</span> height=<span class="tMagenta">"240"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/canv3dball.js'</span>;</cl-cd>
<cl-cd data-idx="19"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="20"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">let</span> pa = papa; <span class="tGreen">//指定帖子容器 ：pa 是变量名 papa 是<span class="tRed">id</span>名</span></cl-cd>
<cl-cd data-idx="22"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<p><br></p>
<p>【附】 <a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=75705&extra=page%3D1">canv3dball使用说明</a><br><br></p> 粒子波浪变成粒子彩球小播，这粒子就是百变大咖。。{:4_199:} 让生命去等候。。。。
标题经典，贴子经典，曲子经典。。。。
代码经典，少少的很友好。。 南无月 发表于 2024-4-30 12:43
粒子波浪变成粒子彩球小播，这粒子就是百变大咖。。
这个球体粒子代码很长的 南无月 发表于 2024-4-30 12:45
让生命去等候。。。。
标题经典，贴子经典，曲子经典。。。。
代码经典，少少的很友好。。
童安格的歌曲 欣赏美好。 马黑黑 发表于 2024-4-30 13:05
童安格的歌曲
那时候有一批很优秀的歌星 马黑黑 发表于 2024-4-30 13:05
这个球体粒子代码很长的
又有一百多行吧。。
感觉就不简单 。
好在老师把它藏起来了。。看不到就不吓人{:4_173:} 南无月 发表于 2024-4-30 17:54
那时候有一批很优秀的歌星
现在更多 庶民 发表于 2024-4-30 13:20
欣赏美好。
下午好 南无月 发表于 2024-4-30 17:55
又有一百多行吧。。
感觉就不简单 。
好在老师把它藏起来了。。看不到就不吓人
100多行正常 神奇的粒子小球，转动很奇妙，转轴也是变化的呢，让人忍不住想仔细看看到底是怎样的转动规律{:4_173:} 又是个封装好的粒子代码，太棒了，又可以照着玩了{:4_173:} 黑黑的各种效果真是层出不穷呢{:4_199:} 在刷新的时候，小球先有个极速转动，然后变成正常了{:4_173:} 看了很久这个球形的粒子效果，太漂亮的，代码太神奇了{:4_199:} 小辣椒 发表于 2024-4-30 20:40
看了很久这个球形的粒子效果，太漂亮的，代码太神奇了
canvas 画布有无限可能，这是早就有的h5标签，它也是Flash终结后的替代 红影 发表于 2024-4-30 20:10
在刷新的时候，小球先有个极速转动，然后变成正常了
这是大佬的设计思想。其实，你慢慢体会，挺有意思的。 红影 发表于 2024-4-30 20:09
黑黑的各种效果真是层出不穷呢
没有，这是大佬的东东，我封装一下而已