期盼（学习黑师20240415《凤山舞曲》粒子封装效果之二）
本帖最后由 马黑黑 于 2024-4-16 17:56 编辑 <br /><br /><style>#papa { margin: 130px 0 20px calc(50% - 931px);width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/qipan.webp') no-repeat center/cover; z-index: 1; position: relative; overflow: hidden;}
#play { position: absolute; width: 100px; right: calc(26% - 100px); bottom: 180px; opacity: .7; cursor: pointer; z-index: 100; animation: rot 5s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
#vid {
position: absolute;
right: 0;
width: 100%;
height: 110%;
bottom:-180px;
object-fit: cover;
mix-blend-mode: screen;
opacity: .80;
pointer-events: none;
transform: rotateX(180deg);
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1880674756" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0a9c8e2cf.mp4" muted loop></video>
<img id="play" src="https://638183.freep.cn/638183/small/ujye.webp" alt="" />
</div>
<script>
let sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
/* 粒子配置
papa : 帖子元素id或class，id 带 # 号, class 带 . 号
total : 小球总数
maxsize : 小球最大直径
move : 小球是否移动 true/false 随便配置，它会依据 audio 音频控件播放状态改变
*/
let lz = {papa: '#papa', total: 80, maxsize: 25, speed: 1, move: true};
let mState = () => {
lz.move = !aud.paused;
papa.style.setProperty('--state', ['paused','running'][+lz.move]);
//视频处理 ：依据 lz.move 与音频同步
lz.move ? vid.play() : vid.pause();
}
play.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mState();
}
setTimeout(mState, 200);
</script> @马黑黑 老师瞧瞧，我交一份作业。。{:4_170:}
图太大，原来是把粒子放贴子背景上的。。
结果论坛里地方太大，粒子飞得到处都是。
就改为贴子内部 南无月 发表于 2024-4-15 21:00
@马黑黑 老师瞧瞧，我交一份作业。。
图太大，原来是把粒子放贴子背景上的。。
结果论坛里地方 ...
没有动弹呢现在 传图试贴里第三页，我放了一个粒子在背景上的。。
果然会影响回贴或者按键。。{:4_170:}
看来大图还是放贴子内部比较合理 马黑黑 发表于 2024-4-15 21:02
没有动弹呢现在
点按纽就动了啊 南无月 发表于 2024-4-15 21:03
点按纽就动了啊
干嘛不自动播放呢 马黑黑 发表于 2024-4-15 21:02
没有动弹呢现在
{:4_173:}为啥跑论坛里就变全手动的了。。 马黑黑 发表于 2024-4-15 21:03
干嘛不自动播放呢
我复制代码过来它不自动了。。我也想问为啥呀。。。{:4_170:} 马黑黑 发表于 2024-4-15 21:03
干嘛不自动播放呢
老师你给救个命吧。。{:4_170:} audio标签加 autoplay，放在loop前面后面都行，中间有空格；
帖子居中设置不对。公式应该酱紫： 1700/2+81=931，margin应该酱紫：margin: 0 0 0 calc(510% - 931px) 南无月 发表于 2024-4-15 21:04
老师你给救个命吧。。
前面我改了一下，行了，你又改成了啥的{:4_170:} 马黑黑 发表于 2024-4-15 21:05
audio标签加 autoplay，放在loop前面后面都行，中间有空格；
帖子居中设置不对。公式应该酱紫： 1700/2+ ...
这个代码是复制网站过来的，刚才只顾改图片，视频，小播位置啥的，把这个忘了。。。
现在对了吧。 马黑黑 发表于 2024-4-15 21:11
前面我改了一下，行了，你又改成了啥的
啊，是我错了。。你改吧。。。{:4_170:} 南无月 发表于 2024-4-15 21:12
啊，是我错了。。你改吧。。。
就是一个autoplay属性而已 南无月 发表于 2024-4-15 21:12
啊，是我错了。。你改吧。。。
现在刷新下就可以了 南无月 发表于 2024-4-15 21:11
这个代码是复制网站过来的，刚才只顾改图片，视频，小播位置啥的，把这个忘了。。。
现在对了吧。
对了 马黑黑 发表于 2024-4-15 21:17
就是一个autoplay属性而已
{:4_170:}小白处处都是问题，反正呢少了你可是寸步难行的。。 马黑黑 发表于 2024-4-15 21:18
对了
必须对呀。。老师在的。。我放心的很{:4_170:} 马黑黑 发表于 2024-4-15 21:17
现在刷新下就可以了
刷了一下，完美之极 南无月 发表于 2024-4-15 21:20
必须对呀。。老师在的。。我放心的很
{:4_203:}