巡航

马黑黑

马黑黑

歌手 ：变奏的梦想
相关帖子：起航 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

帖子制作过程请看 5#

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0  0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: lightblue;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         overflow: hidden;
   
9.         position: relative;
   
10.         display: grid;
    
11.         place-items: center;
    
12.         z-index: 1;
    
13. }
    
14. #mypic {
    
15.         position: absolute;
    
16.         top: 20px;
    
17.         width: 200px;
    
18.         cursor: pointer;
    
19.         animation: rot 6s infinite linear var(--state);
    
20. }
    
21. #vid {
    
22.         position: absolute;
    
23.         width: 1024px;
    
24.         height: 700px;
    
25.         top: -60px;
    
26.         object-fit: cover;
    
27.         pointer-events: none;
    
28. }
    
29. li-zi {
    
30.         position: absolute;
    
31.         width: 10px;
    
32.         height: 10px;
    
33.         border-radius: 50%;
    
34. }
    
35. @keyframes moving {
    
36.         from { opacity: 0; transform: translate(0,0); }
    
37.         to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
    
38. }
    
39. @keyframes rot { to { transform: rotate(360deg); } }
    
40. </style>
    
41. 
    
42. <div id="papa">
    
43.         <video id="vid" src="https://img.tukuppt.com/video_show/2421007/00/01/34/5b409438a83f4.mp4" autoplay loop muted></video>
    
44.         <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/dou.png" alt="" />
    
45.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2018483363" autoplay loop></audio>
    
46. </div>
    
47. 
    
48. <script>
    
49. let mState = () => aud.paused
    
50.         ? (papa.style.setProperty('--state','paused'),vid.pause())
    
51.         : (papa.style.setProperty('--state','running'),vid.play());
    
52.        
    
53. aud.addEventListener('pause', () => mState());
    
54. 
    
55. aud.addEventListener('playing', () => mState());
    
56. 
    
57. mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
    
58. 
    
59. let all = 160;
    
60. for(let i = 0; i < all; i++) {
    
61.         let lz = document.createElement('li-zi');
    
62.         let hudu = Math.PI / 180 * 360 / all * i;
    
63.         let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
    
64.         lz.style.cssText += `
    
65.                 --x0: ${xx}px;
    
66.                 --y0: ${yy}px;
    
67.                 background: #${Math.random().toString(16).substr(-6)};
    
68.                 animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    
69.         `;
    
70.         papa.insertBefore(lz,mypic);
    
71. }
    
72. </script>

复制代码

马黑黑

本帖使用 帖子制作 (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
黑黑老师早上好！

早！

本帖，视频做背景，加一个图片做按钮，再加上粒子特效，总共三个视觉元素：视频，图片按钮，粒子特效

马黑黑

实际应用中，可以将代码压缩或局部压缩再发帖，这样可以节省行数。

红影

原来这个又是可以批量制作的，插入视频插入粒子，都可以用“插入代码”直接完成，这个太方便

红影

刚开始看帖子还以为是加入了水波纹效果，原来这个只是视频里的效果。
这个帖子是用实例来教学如何用在线帖子制作来直接做出代码帖子，这个太棒了

红影

做代码帖子越来越简单了，全体不会代码帖子的坛友的福音啊

红影

黑黑太棒了，感谢你带来的福利

红影

@世外桃源  @幸运草  快来看啊，又可以直接套用做帖子了

红影

这个教学帖子太实用了，置顶让大家都来学习

侃大山

马黑黑 发表于 2023-12-19 08:36
本帖使用 帖子制作 (52qingyin.cn) 程序生成。制作过程如下：

步骤一：点击新建，编辑区出现基础帖子代 ...

找到地方了，点新建，果然有很多代码出来

侃大山

马黑黑 发表于 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
原来这个又是可以批量制作的，插入视频插入粒子，都可以用“插入代码”直接完成，这个太方便

目前，插入的库就这几样东东，也不想加太多，常用到的加几个吧