巡航
<style>#papa {
margin: 0 00 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#mypic {
position: absolute;
top: 20px;
width: 200px;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
#vid {
position: absolute;
width: 1024px;
height: 700px;
top: -60px;
object-fit: cover;
pointer-events: none;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
@keyframes moving {
from { opacity: 0; transform: translate(0,0); }
to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2421007/00/01/34/5b409438a83f4.mp4" autoplay loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/t23/btn/dou.png" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2018483363" autoplay loop></audio>
</div>
<script>
(function() {
let mState = () => aud.paused
? (papa.style.setProperty('--state','paused'),vid.pause())
: (papa.style.setProperty('--state','running'),vid.play());
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
let all = 160;
for(let i = 0; i < all; i++) {
let lz = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
background: #${Math.random().toString(16).substr(-6)};
animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
`;
papa.insertBefore(lz,mypic);
}
})();
</script> 本帖最后由 马黑黑 于 2023-12-19 08:37 编辑
歌手 ：变奏的梦想
相关帖子：起航 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
帖子制作过程请看 5#
帖子代码
<style>
#papa {
margin: 0 00 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#mypic {
position: absolute;
top: 20px;
width: 200px;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
#vid {
position: absolute;
width: 1024px;
height: 700px;
top: -60px;
object-fit: cover;
pointer-events: none;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
@keyframes moving {
from { opacity: 0; transform: translate(0,0); }
to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2421007/00/01/34/5b409438a83f4.mp4" autoplay loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/t23/btn/dou.png" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2018483363" autoplay loop></audio>
</div>
<script>
let mState = () => aud.paused
? (papa.style.setProperty('--state','paused'),vid.pause())
: (papa.style.setProperty('--state','running'),vid.play());
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
let all = 160;
for(let i = 0; i < all; i++) {
let lz = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
background: #${Math.random().toString(16).substr(-6)};
animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
`;
papa.insertBefore(lz,mypic);
}
</script>
本帖最后由 马黑黑 于 2023-12-19 12:44 编辑
本帖使用 帖子制作 (52qingyin.cn) 程序生成。制作过程如下：
步骤一：点击新建，编辑区出现基础帖子代码，先重点修改有中文的三个地方——
（一）#papa（帖子父级元素）的 background 属性，冒号后面的内容替换为一个颜色（因为本帖不要背景图）；
（二）图片地址是音频控制器，填上事先准备好的图片地址，同时，我希望它是 200 * 200 的尺寸就好，就顺手修改对应选择器 #mypic 的 width 属性值；
（三）音频地址换上音乐地址。
步骤二：加入视频，共两个操作——
（一）将编辑区的输入光标定位到 #papa {...} 选择器的最后一个花括号 } 的后面，打回车，点击“插入代码” → 视频（css）；
（二）编辑区光标定位到HTML代码的 <img ... /> 的 < 的前方，打个回车并将光标回退到新建行，点击“插入代码” → 视频（html），填写视频有效地址。
步骤三：接着我要加入全网最简单的web粒子特效，方法也是和步骤二一样分两步走——
（一）在编辑区，将光标定位到 #mypic {...} 的收尾花括号的后面，打个回车，然后点击“插入代码” → 粒子（css），这样，粒子的CSS代码就有了；
（二）在编辑区，把光标定位到最后一行JS代码的末尾，就是 </script> 之上的那一行，打个回车并将光标回退到新建的空行，然后点击“插入代码” → 粒子（JS），这样就OK了。
步骤三：预览，如果出错，按F12查看错在哪里，重点解决它。然后，根据预览效果做微调，比如我做了视频部分CSS代码的调整。
最后，如果效果满意，回到编辑界面复制代码，然后发帖。
醉美水芙蓉 发表于 2023-12-19 08:23
黑黑老师早上好！
早！
本帖，视频做背景，加一个图片做按钮，再加上粒子特效，总共三个视觉元素：视频，图片按钮，粒子特效 实际应用中，可以将代码压缩或局部压缩再发帖，这样可以节省行数。 原来这个又是可以批量制作的，插入视频插入粒子，都可以用“插入代码”直接完成，这个太方便{:4_199:} 刚开始看帖子还以为是加入了水波纹效果，原来这个只是视频里的效果。
这个帖子是用实例来教学如何用在线帖子制作来直接做出代码帖子，这个太棒了{:4_199:} 做代码帖子越来越简单了，全体不会代码帖子的坛友的福音啊{:4_199:} 黑黑太棒了，感谢你带来的福利{:4_187:} @世外桃源@幸运草快来看啊，又可以直接套用做帖子了{:4_187:} 这个教学帖子太实用了，置顶让大家都来学习{:4_199:} 马黑黑 发表于 2023-12-19 08:36
本帖使用 帖子制作 (52qingyin.cn) 程序生成。制作过程如下：
步骤一：点击新建，编辑区出现基础帖子代 ...
找到地方了，点新建，果然有很多代码出来{:4_204:} 马黑黑 发表于 2023-12-19 07:53
帖子代码
我也去做一个。两边对照着看，这个里面的<style>当中多了#vid和li-zi，还有@keyframes
<div id="papa">里面多了视频
<script>里面多了最后那一串 哦，第一个里面的@keyframes是插件带的，全都填进去了，我去找视频 原来那个转动还要调位置，否则跑最前面了 做出来了，怎么粒子没有了，我好像没放错啊 侃大山 发表于 2023-12-19 11:15
做出来了，怎么粒子没有了，我好像没放错啊
请看板凳楼的第 70 代码，用 insertBefore 而不是 prepend 红影 发表于 2023-12-19 09:36
原来这个又是可以批量制作的，插入视频插入粒子，都可以用“插入代码”直接完成，这个太方便
目前，插入的库就这几样东东，也不想加太多，常用到的加几个吧