本帖最后由 马黑黑 于 2024-4-30 09:26 编辑
帖子代码
<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>
【附】 canv3dball使用说明
|