【亚の空间】主题空间装修

首先展示一下整体的效果：

整个整体都采用了css代码，使用了大量的before、after、hover这些伪元素，部分设计会在后边展开讲解。
最后感谢@RaSharim 的部分代码协力以及脚本装修仓库，如果需要可前往超链接查看使用
我的空间令牌也会在文末附件附上。
对于这类非基于原本discuz论坛空间diy页面自定义的空间，主要分三步走；

1.xml框架的确定
首先你需要做的自行写好你的空间的框架xml代码，确定好空间的比例，有哪些模块，例如我的空间布局为1：2：1，那么主体框架就改为如下的代码：

1. <root>
   
2.   <item id="diypage">
   
3. 
   
4.     <item id="frame`frame1">
   
5.       <item id="attr">
   
6.         <item id="name"><![CDATA[frame1]]></item>
   
7.         <item id="className"><![CDATA[frame cl]]></item>
   
8.       </item>
   
9. 
   
10.       <item id="column`frame1_left">
    
11.         <item id="attr">
    
12.           <item id="name"><![CDATA[frame1_left]]></item>
    
13.           <item id="className"><![CDATA[z column]]></item>
    
14.         </item>
    
15. 
    
16.       <item id="column`frame1_center">
    
17.         <item id="attr">
    
18.           <item id="name"><![CDATA[frame1_center]]></item>
    
19.           <item id="className"><![CDATA[z column]]></item>
    
20.         </item>
    
21. 
    
22.       <item id="column`frame1_right">
    
23.         <item id="attr">
    
24.           <item id="name"><![CDATA[frame1_right]]></item>
    
25.           <item id="className"><![CDATA[z column]]></item>
    
26.         </item>
    
27. 
    
28.       </item>
    
29.     </item>
    
30.   </item>
    
31. </root>

复制代码

当然，如果你实在头疼，直接食用装修仓库一键导出你需要的框架结构代码即可，省得自己写的晕头转向的
在获得你的框架xml代码后，随后在有评论框的地方（包括回帖框、记录评论框、留言板）使用注入代码附带你的xml代码就可是你的初始模样，例如我的空间原始样图：

对于空间布局的参考，你也可以查看如下的帖子：
1.【冬宫学府】【教程】进阶版泥潭个人空间Css代码装修技巧教程丨UI制作篇
2.【奇幻工坊】【空间模板】只需“三步”即可拥有同款空间
3.【花马金裘】【油猴脚本】一个更好用的保存空间及分享的脚本——装修仓库

2.css的编写

在成功导入xml框架之后，你的浏览器会提醒你输入css代码，此时点取消即可，此时你的空间就是默认的未装修状态。

接下来就是可长可短的css思考时间，这里以我的空间几个效果为例

①头像上浮、翻转、上浮文字显示特效

一开始上浮特效我只是设计了简单的主体上移，但是很快测试就发现了，头像上移后无法显示完全全被截断，所以在这之前需要确保编写一段代码保证超区域限制显示：

1. #ct,
   
2. #diypage,
   
3. #frame1,
   
4. #frame1_right,
   
5. #frame1_center,
   
6. #frame1_middle,
   
7. #profile,
   
8. #profile_center {
   
9.     overflow: visible !important;
   
10. }
    

复制代码

然后就是写一段让元素 .hm上移翻转的css代码

1. #profile .hm {
   
2.     position: absolute !important;
   
3.     top: -150px !important;
   
4.     width: 200px !important;
   
5.     height: 200px !important;
   
6.     border-radius: 50% !important;
   
7.     overflow: hidden !important;
   
8.     perspective: 800px;
   
9.     border: 5px solid rgba(255,255,255,0.6) !important;
   
10. }
    
11. #profile .hm img {
    
12.     width: 100% !important;
    
13.     height: 100% !important;
    
14.     object-fit: cover !important;
    
15.     display: block !important;
    
16.     backface-visibility: hidden;
    
17.     transition: transform 0.8s ease;
    
18.     transform-style: preserve-3d;
    
19. }
    
20. #profile .hm:after {
    
21.     content: "";
    
22.     position: absolute;
    
23.     top: 0;
    
24.     left: 0;
    
25.     width: 100%;
    
26.     height: 100%;
    
27.     border-radius: 50%;
    
28.     background: url("https://i.postimg.cc/Hn6tbBYY/me-Tyson.png") center/cover no-repeat;
    
29.     transform: rotateY(-180deg);
    
30.     backface-visibility: hidden;
    
31.     transition: transform 0.8s ease;
    
32. }
    
33. #profile .hm:hover img {
    
34.     transform: rotateY(180deg);
    
35. }
    
36. #profile .hm:hover:after {
    
37.     transform: rotateY(0deg);
    
38. }<i>
    
39. </i>

复制代码

以及设置上浮显示文字的css效果

1. #profile::before {
   
2.     content: "Meine Liebste";
   
3.     position: absolute;
   
4.     top: -190px;
   
5.     left: 50%;
   
6.     transform: translateX(-50%);
   
7.     font-family: "Times New Roman", "Georgia", serif;
   
8.     font-size: 22px;
   
9.     font-weight: bold;
   
10.     font-style: italic;
    
11.     background: linear-gradient(90deg, #FFEBA6, #A6C4FF);
    
12.     -webkit-background-clip: text;
    
13.     -webkit-text-fill-color: transparent;
    
14.     opacity: 0;
    
15.     transition: opacity 0.6s ease, transform 0.6s ease;
    
16.     pointer-events: none;
    
17.     white-space: nowrap;
    
18. }
    
19. #profile:hover::before {
    
20.     opacity: 1;
    
21.     transform: translateX(-50%) translateY(-6px);
    
22. }<b>
    
23. </b>

复制代码

②右侧区域互动效果

1. #statistic {
   
2.     width: 230px !important;
   
3.     height: 130px !important;
   
4.     margin: 40px auto !important;
   
5.     position: relative;
   
6.     overflow: visible !important;
   
7. }
   
8. #statistic::before {
   
9.     content: "Vorbeiziehende und Punkte";
   
10.     position: absolute;
    
11.     top: 120%;
    
12.     right: -290px;
    
13.     transform: translateY(-50%) translateX(-20px) scaleX(0.8);
    
14.     font-family: "Times New Roman", "Georgia", serif;
    
15.     font-size: 22px;
    
16.     font-weight: bold !important;
    
17.     font-style: italic;
    
18.     letter-spacing: 1px;
    
19.     background: linear-gradient(90deg, #c9a23f, #f5d77a, #b8860b);
    
20.     -webkit-background-clip: text;
    
21.     -webkit-text-fill-color: transparent;
    
22.     opacity: 0;
    
23.     white-space: nowrap;
    
24.     transition:
    
25.         opacity 0.5s ease,
    
26.         transform 0.6s cubic-bezier(.22,1,.36,1);
    
27. }
    
28. #statistic:hover::before {
    
29.     opacity: 1;
    
30.     transform: translateY(-50%) translateX(0) scaleX(1);
    
31. }
    
32. #statistic::after {
    
33.     content: "";
    
34.     position: absolute;
    
35.     top: 50%;
    
36.     right: -140px;
    
37.     transform: translateY(-50%) rotate(-20deg);
    
38.     width: 140px;
    
39.     height: 140px;
    
40.     background: url("https://i.postimg.cc/5y7z3WgT/dave.png") no-repeat center/contain;
    
41.     opacity: 0;
    
42.     pointer-events: none;
    
43.     transition:
    
44.         opacity 0.5s ease,
    
45.         right 0.5s ease,
    
46.         transform 0.5s ease;
    
47. }
    
48. #statistic:hover::after {
    
49.     opacity: 1;
    
50.     right: -220px;
    
51.     transform: translateY(-50%) rotate(0deg);
    
52. }<b>
    
53. </b>

复制代码

③好友头像旋转放大效果

1. #friend .avt {
   
2.     width: 50px;
   
3.     height: 50px;
   
4.     border-radius: 50% !important;
   
5.     overflow: hidden !important;
   
6.     border: 3px solid rgba(255,255,255,0.6)!important;
   
7.     display: flex;
   
8.     align-items: center;
   
9.     justify-content: center;
   
10.     transition: transform 0.4s ease;
    
11. }
    
12. #friend .avt img {
    
13.     width: 100% !important;
    
14.     height: 100% !important;
    
15.     object-fit: cover !important;
    
16.     display: block !important;
    
17. }
    
18. #friend .avt:hover {
    
19.     transform: scale(1.08) rotate(-35deg);
    
20. }<b>
    
21. </b>

复制代码

④文字的凸显和框选效果

1. #thread_content li {
   
2.     width: 450px !important;
   
3.     height: 18px !important;
   
4.     margin: 2px auto !important;
   
5.      position: relative;
   
6.     border-radius: 5px;
   
7.     overflow: hidden;
   
8.     transition: all 0.4s ease;
   
9. }
   
10. #thread_content li:hover {
    
11.     background:rgba(131, 183, 218, 0.4);
    
12.     backdrop-filter: blur(5px);
    
13.     -webkit-backdrop-filter: blur(5px);
    
14.     font-size: 13px !important;
    
15.     font-weight: bold !important;
    
16.     transform: translateX(2px);
    
17. }<b>
    
18. </b>

复制代码

效果如下展示：

左栏图片放大内容和勋章效果参考这两篇帖子，需要的自取：

1.【奇幻工坊】【空间模板】只需“三步”即可拥有同款空间

2.【花里胡哨】CSS制作伪单色边框悬停平滑转变为渐变色边框

3.CSS的内容导入

在设计完你想要的元素的css效果之后。再次重复步骤1，然后这次把css内容复制进去，然后刷新页面即可大功告成啦。

如果你使用了我的装修令牌，那大致的效果就会如下：

尾言：

本次装修大概花了三四天，一是因为一开始被xml折磨了，后边用脚本解决了，二则是因为贪心不足蛇吞象，想要的效果太多了，导致越写越多，越删越多，最后删删改改才有了我个人最喜欢的PASSWORD主题互动元素。

另外大河内说的有道理，折腾这么多不如直接重新写网页设计UI，例如他的空间。

如果你对前端的设计也感兴趣，可以去看看菜鸟教程上的css内容，至少讲得很清楚。我也是看了很久才看会了一些。部分内容也得问问gpt调教一下。

最后附上我的空间框架、自由模块内容、和整体的css代码，如有需要同款，也欢迎使用令牌一键导入~

最后的最后难得求点追随和血液~

祝开年工作顺利。

看到别人的空间都很好看，自己却不会弄，感谢出教程

亚大佬的空间装修得很华丽惹，感觉好专业呀

终于有大佬出教程了 ，不懂带码直接复制黏贴哈哈

好漂亮的空间，我也来学习学习一下如何装修

互动性挺强的欸～翻转和旋转还是第一次见到～

大佬空間好漂亮互動性也不錯，教程好詳細感謝分享。

完全的小白能学会吗？我没有一点编程经验

现在大家都开始卷空间了，老年人看不太懂只能默默点赞了

亚大佬的空间装修做得好有质感很棒啊~也感谢很详细的教程分享惹啊

wow，还会变换的么，太好看了！

超美的空间，那个hover每个板块时弹出不同角色头像的创意很酷！

看来设计和开发确实是两个不同的岗，前者负责原创精神、负责审美上的取舍和细节上的打磨，后者负责代码实现。目前看来，AI至少能代劳后者。

顺带一提，赠礼的代码我是这样设置的：

1. [i][url=https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=zengsongAction&medalid=45&zs_uid=733330&checkUID=733330][img=44,0]https://img.gamemale.com/album/201507/02/113342to7t7zj24jot5s7t.gif[/img][/url][/i][i][url=https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=zengsongAction&medalid=174&zs_uid=733330&checkUID=733330][img=44,0]https://img.gamemale.com/album/201903/31/141637dqowosrr6o66wszv.gif[/img][/url][/i][i][url=https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=zengsongAction&medalid=840&zs_uid=733330&checkUID=733330][img=44,0]https://img.gamemale.com/album/202602/15/020037sbg3ssnsgo1d0pbn.gif[/img][/url][/i][b][color=#333]千杯[img=9,9]https://img.gamemale.com/album/201404/12/023039r465s6wuz65a5sx4.jpg[/img]12[/b][b]喷雾[img=9,9]https://img.gamemale.com/album/201404/12/023039r465s6wuz65a5sx4.jpg[/img]13[/b][b]飘飘[img=9,9]https://img.gamemale.com/album/201404/12/023039r465s6wuz65a5sx4.jpg[/img]15[/color][/b]

复制代码

每个赠礼下面单独用带金币和咒术图标的文字标明了价格，所以需要给可以点击的赠礼按钮本身加上［i］和［/i］的斜体标签，方便后续代码中使用选择器选中。
如果不这样做，小图标和按钮一样也是图片，会被选择器一并选中；也会被添加圆角、在鼠标悬浮时一并也有scale放大和彩框效果，这种细节上的缺失是难以容忍的。
其实圆角可以设置成百分比，这样小图标就不会因为圆角太大而变形。但考虑到按钮本身不是严格方形（40*43px）用百分比圆角会偏椭圆，所以采取了迂回的方法。

为下面的楼中楼而补充的图片：

不错哦，我也该学学这些了，把自己的空间装扮满意，万事不将就

nb啊，可惜我没太多时间搞这个，说不定到时候空间插件能升级一下更好用。

设计得很有趣，区块放上鼠标居然还有彩蛋一样的效果，有时间我也想捣鼓看看(￣ω￣)

效果很不错，不过具体的CSS代码可能需要让AI解读注释一下了

每次看见好看的空间都好喜欢捏

欧米茄真的是外行一点都看不懂，不过感觉好厉害的样子，小弟点个跟随膜拜膜拜惹

那个头像旋转的效果看起来好可爱啊，莫名其妙有种敬事房翻牌子的感觉