花潮論壇歡迎您

马黑黑

马黑黑

原創代碼：

1. <style>
   
2. .bgDiv {/* 帖子主體 */
   
3.         margin: auto;
   
4.         width: 1275px;
   
5.         height: 717px;
   
6.         left: -339.5px;
   
7.         background: url('https://638183.freep.cn/638183/Pic/2022/ysjn.jpg') no-repeat center/cover;
   
8.         border: 1px solid;
   
9.         position: relative;
   
10.         perspective: 1000px;
    
11. }
    
12. .bgDiv::before {/* 煙霧 */
    
13.         content: '';
    
14.         position: absolute;
    
15.         width: inherit;
    
16.         height: inherit;
    
17.         background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
    
18.         opacity: .2;
    
19. }
    
20. .btf {/* 蝴蝶 */
    
21.         width: 200px;
    
22.         height: 113px;
    
23.         position: absolute;
    
24.         left: 20px;
    
25.         bottom: 40px;
    
26.         filter: blur(1px);
    
27.         animation: fly 40s ease infinite alternate;
    
28. }
    
29. .stage {/* 字幕wrap */
    
30.         --len: 80px;
    
31.         margin: 200px auto 0;
    
32.         position: relative;
    
33.         width: var(--len);
    
34.         height: var(--len);
    
35.         transform-style: preserve-3d;
    
36.         animation: rot 15s linear infinite;
    
37. }
    
38. .stage div {/* 字幕面板統一樣式 */
    
39.         position: absolute;
    
40.         width: inherit;
    
41.         height: inherit;
    
42.         color: #eee;
    
43.         text-shadow: 1px 1px 3px #111;
    
44.         font: 2em / var(--len) Arial;
    
45.         text-align: center;
    
46.         left: 0; top: 0;
    
47. }
    
48. /* 蝴蝶動畫 */
    
49. @keyframes fly { to { left: 1050px; } }
    
50. /* 字幕動畫 */
    
51. @keyframes rot { to { transform: rotateY(-360deg); } }
    
52. </style>
    
53. 
    
54. <div class="bgDiv">
    
55.         <div class="stage"></div>
    
56.         <img class="btf" src="https://638183.freep.cn/638183/Pic/2022/btf.gif" alt="" />
    
57. </div>
    
58. 
    
59. <script>
    
60. //加載網易云音樂
    
61. let wyy = document.createElement('iframe');
    
62. wyy.src = 'https://music.163.com/outchain/player?type=2&id=548814997&auto=1&height=66';
    
63. wyy.style.display = 'none';
    
64. document.querySelector('.bgDiv').appendChild(wyy);
    
65. //加載字幕
    
66. let stage = document.querySelector(".stage");
    
67. let txt = "花潮論壇歡迎您";
    
68. let angle = 360 / txt.length;
    
69. let w = stage.clientWidth;
    
70. let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
    
71. let str = "";
    
72. for(j=0; j<txt.length; j++){
    
73.         let cc = `#${Math.random().toString(16).substr(-6)}`;
    
74.         let ry = Math.floor(j*angle);
    
75.         str += `<div style="transform:rotateY(${ry}deg) translateZ(${trz}px); background: ${cc};">${txt.charAt(j)}</div>\n`;
    
76. }
    
77. stage.innerHTML = str;
    
78. </script>

复制代码

马黑黑

幾點說明：

帖子的元素：①主體：底圖；②飾品：煙霧、蝴蝶、字幕以及兩個@keyframes動畫，還有網易云音樂（感謝網易云）。

飾品技巧一：煙霧是一幅GIF動圖，用主體元素的偽元素加載并完整覆蓋在主體元素之上，設置opacity為0.2；

飾品技巧二：蝴蝶是img圖片元素，所用圖片亦為GIF動圖，@keyframes令其改變left值從左飛到右（再返回有 alternate實現）；

飾品技巧三：字幕為半成品多面體，屬於環形標語系列，是3d效果，由CSS和JS共同完成。景深設在主體元素，3d渲染聲明寫在字幕內包裝（舞台），CSS還定義組成字幕的各個面板的統一樣式，然後在JS環節根據欲要顯示的文本，且圍繞CSS設定的字幕舞台尺寸進行相關計算，最後加載字幕。

飾品技巧四：網易云音樂因為HTML代碼不規範，所以用JS對之進行加工然後加載。根據控制台報告，網易云音樂的warning級別的錯誤還存在，但不影響播放器的運行，網易云的程序員及其工作是偉大的，向他們致敬！

最後提一下：字幕的文本，字數不宜太多，一個類似圓環的東東，字數過多會大的嚇人。

马黑黑

嗯？按怎么用了繁体输入？

马黑黑

两点补充说明：

其一，本帖字幕位置的设定，是通过 margin 值调整——

margin: 200px auto 0;

上下外边距 200px，左右为0；auto为居中。可以取消掉这句，通过设置left、top来定位。

其二，设置字幕尺寸只需修改一个值，下面这行——

--len: 80px;

梦油

黑黑朋友早晨好！谢谢你制作的精美作品。我来到花潮论坛后，真切地感受到这里朋友的真诚和热情。花潮论坛是一个和谐热情的集体。谢谢黑黑朋友！

红影

这里最难的事字幕那段吧，还要截取字幕长度，然后一个个面地安放。这个好像是多面体，有多少个字，就有多少面的吧。字幕底色还是变色的呢。这个帖子真美，黑黑真棒

马黑黑

梦油 发表于 2022-4-10 10:19
黑黑朋友早晨好！谢谢你制作的精美作品。我来到花潮论坛后，真切地感受到这里朋友的真诚和热情。花潮论坛是 ...

上午好！喝茶

马黑黑

红影 发表于 2022-4-10 10:30
这里最难的事字幕那段吧，还要截取字幕长度，然后一个个面地安放。这个好像是多面体，有多少个字，就有多少 ...

是个真3d多面体，但这个多面体只有正面和侧面，没有底部和顶部。如果给面板统一样式定义恰当的 opacity 值，则立体效果更佳。

有多少个字就有多少个面，不过不建议有太多字，字多多面体会变得很大。

红影

let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
这个计算有点复杂，先换算成弧度，然后和文字的长度以及长度换算成的角度相关，竟然是作用于Z轴的。

红影

只有黑黑能做出这么复杂的帖子，对于这个帖子，我最多是不动脑筋地套用了

马黑黑

红影 发表于 2022-4-10 10:56
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
这个计算有点复杂，先换算成 ...

关于算法，与原始面板元素的堆叠有关。首先，未发生立体之前，它们是统一堆叠放在一处的，默认的left和top都是0，基于平面的堆叠。然后，安排每块面板的去向，先沿着Y轴旋转一定角度，再往后一定距离摆放（这个距离是固定的，后面还会谈到）。往后平移面板，用到的当然只能是Z轴。

Z轴是屏幕和用户之间的轴，之所以用它，那是因为我们要构成一个圆环多面体。面板转动一定角度后，它的水平位置还不会跟着会发生变化，但往后平移之后，x方向的位置就有了变化，是基于 perspective-origin（而不是transform-origin但与之有关，是3d的旋转基点）的运动基点，本例用默认值（因为元素固定堆叠），这样最终就能产生多面体圆环。

面板在Z方向应拉开的距离要精准计算，它应该是基于弧度单位的，所以计算式子显得很复杂，这里就不解释了。这个值针对所有的面板都一样。

马黑黑

红影 发表于 2022-4-10 10:58
只有黑黑能做出这么复杂的帖子，对于这个帖子，我最多是不动脑筋地套用了

理解其中可以理解的，这对将来的长进有作用

梦油

马黑黑 发表于 2022-4-10 10:36
上午好！喝茶

你好，黑黑朋友。你的制作巧夺天工啊。

加林森

老黑的这个制作好复杂，得慢慢学习了。这个画面真漂亮，很立体的制作。

马黑黑

加林森 发表于 2022-4-10 11:33
老黑的这个制作好复杂，得慢慢学习了。这个画面真漂亮，很立体的制作。

那个圆环多面体是立体的

马黑黑

梦油 发表于 2022-4-10 11:27
你好，黑黑朋友。你的制作巧夺天工啊。

过奖了，一般般，过得去，差不多……

加林森

马黑黑 发表于 2022-4-10 12:00
那个圆环多面体是立体的

嗯嗯，知道的。

梦油

马黑黑 发表于 2022-4-10 12:01
过奖了，一般般，过得去，差不多……

羡慕、羡慕啊！

马黑黑

梦油 发表于 2022-4-10 13:36
羡慕、羡慕啊！