首页 › C O D E › 【亚の空间】主题空间装修

亚洛斯 发表于 2026-2-22 19:18:16

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

本帖最后由 亚洛斯 于 2026-2-22 20:55 编辑

首先展示一下整体的效果：
https://i.postimg.cc/ydkPghCQ/整体.gif
整个整体都采用了css代码，使用了大量的before、after、hover这些伪元素，部分设计会在后边展开讲解。
最后感谢@RaSharim 的部分代码协力以及脚本装修仓库，如果需要可前往超链接查看使用
我的空间令牌也会在文末附件附上。
对于这类非基于原本discuz论坛空间diy页面自定义的空间，主要分三步走；
static/image/hrline/4.gif
1.xml框架的确定
首先你需要做的自行写好你的空间的框架xml代码，确定好空间的比例，有哪些模块，例如我的空间布局为1：2：1，那么主体框架就改为如下的代码：
<root>
<item id="diypage">

    <item id="frame`frame1">
      <item id="attr">
      <item id="name"><!]></item>
      <item id="className"><!]></item>
      </item>

      <item id="column`frame1_left">
      <item id="attr">
          <item id="name"><!]></item>
          <item id="className"><!]></item>
      </item>

      <item id="column`frame1_center">
      <item id="attr">
          <item id="name"><!]></item>
          <item id="className"><!]></item>
      </item>

      <item id="column`frame1_right">
      <item id="attr">
          <item id="name"><!]></item>
          <item id="className"><!]></item>
      </item>

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

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


static/image/hrline/4.gif
2.css的编写在成功导入xml框架之后，你的浏览器会提醒你输入css代码，此时点取消即可，此时你的空间就是默认的未装修状态。接下来就是可长可短的css思考时间，这里以我的空间几个效果为例①头像上浮、翻转、上浮文字显示特效一开始上浮特效我只是设计了简单的主体上移，但是很快测试就发现了，头像上移后无法显示完全全被截断，所以在这之前需要确保编写一段代码保证超区域限制显示：#ct,
#diypage,
#frame1,
#frame1_right,
#frame1_center,
#frame1_middle,
#profile,
#profile_center {
    overflow: visible !important;
}

然后就是写一段让元素 .hm上移翻转的css代码#profile .hm {
    position: absolute !important;
    top: -150px !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    perspective: 800px;
    border: 5px solid rgba(255,255,255,0.6) !important;
}
#profile .hm img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    backface-visibility: hidden;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}
#profile .hm:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url("https://i.postimg.cc/Hn6tbBYY/me-Tyson.png") center/cover no-repeat;
    transform: rotateY(-180deg);
    backface-visibility: hidden;
    transition: transform 0.8s ease;
}
#profile .hm:hover img {
    transform: rotateY(180deg);
}
#profile .hm:hover:after {
    transform: rotateY(0deg);
}<i>
</i>以及设置上浮显示文字的css效果#profile::before {
    content: "Meine Liebste";
    position: absolute;
    top: -190px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Times New Roman", "Georgia", serif;
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    background: linear-gradient(90deg, #FFEBA6, #A6C4FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    white-space: nowrap;
}
#profile:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}<b>
</b>②右侧区域互动效果#statistic {
    width: 230px !important;
    height: 130px !important;
    margin: 40px auto !important;
    position: relative;
    overflow: visible !important;
}
#statistic::before {
    content: "Vorbeiziehende und Punkte";
    position: absolute;
    top: 120%;
    right: -290px;
    transform: translateY(-50%) translateX(-20px) scaleX(0.8);
    font-family: "Times New Roman", "Georgia", serif;
    font-size: 22px;
    font-weight: bold !important;
    font-style: italic;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #c9a23f, #f5d77a, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    white-space: nowrap;
    transition:
      opacity 0.5s ease,
      transform 0.6s cubic-bezier(.22,1,.36,1);
}
#statistic:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scaleX(1);
}
#statistic::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -140px;
    transform: translateY(-50%) rotate(-20deg);
    width: 140px;
    height: 140px;
    background: url("https://i.postimg.cc/5y7z3WgT/dave.png") no-repeat center/contain;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.5s ease,
      right 0.5s ease,
      transform 0.5s ease;
}
#statistic:hover::after {
    opacity: 1;
    right: -220px;
    transform: translateY(-50%) rotate(0deg);
}<b>
</b>③好友头像旋转放大效果#friend .avt {
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid rgba(255,255,255,0.6)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}
#friend .avt img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
#friend .avt:hover {
    transform: scale(1.08) rotate(-35deg);
}<b>
</b>④文字的凸显和框选效果#thread_content li {
    width: 450px !important;
    height: 18px !important;
    margin: 2px auto !important;
   position: relative;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.4s ease;
}
#thread_content li:hover {
    background:rgba(131, 183, 218, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: 13px !important;
    font-weight: bold !important;
    transform: translateX(2px);
}<b>
</b>效果如下展示：https://i.postimg.cc/63y02Vxr/头像.gifhttps://i.postimg.cc/gJnDXybq/动效.gifhttps://i.postimg.cc/Pq6y539V/文本.gif左栏图片放大内容和勋章效果参考这两篇帖子，需要的自取：1.【奇幻工坊】【空间模板】只需“三步”即可拥有同款空间2.【花里胡哨】CSS制作伪单色边框悬停平滑转变为渐变色边框static/image/hrline/4.gif3.CSS的内容导入在设计完你想要的元素的css效果之后。再次重复步骤1，然后这次把css内容复制进去，然后刷新页面即可大功告成啦。如果你使用了我的装修令牌，那大致的效果就会如下：https://i.postimg.cc/ydkPghCQ/%E6%95%B4%E4%BD%93.gifstatic/image/hrline/4.gif尾言：本次装修大概花了三四天，一是因为一开始被xml折磨了，后边用脚本解决了，二则是因为贪心不足蛇吞象，想要的效果太多了，导致越写越多，越删越多，最后删删改改才有了我个人最喜欢的PASSWORD主题互动元素。另外大河内说的有道理，折腾这么多不如直接重新写网页设计UI，例如他的空间。如果你对前端的设计也感兴趣，可以去看看菜鸟教程上的css内容，至少讲得很清楚。我也是看了很久才看会了一些。部分内容也得问问gpt调教一下。最后附上我的空间框架、自由模块内容、和整体的css代码，如有需要同款，也欢迎使用令牌一键导入~最后的最后难得求点追随和血液~祝开年工作顺利。

CHMHS 发表于 2026-2-22 19:23:21

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

凯诺斯 发表于 2026-2-22 19:25:31

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

akersD 发表于 2026-2-22 19:28:08

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

相见忧 发表于 2026-2-22 19:30:37

https://img.gamemale.com/album/202509/04/083047t3sjzml6szil4o26.gif好漂亮的空间{:4_86:}，我也来学习学习一下如何装修

毛茸茸兽兽 发表于 2026-2-22 19:31:58

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

Se7en 发表于 2026-2-22 19:36:23

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

lofty 发表于 2026-2-22 19:41:07

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

PUCK 发表于 2026-2-22 19:42:19

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

zibatco2 发表于 2026-2-22 19:44:25

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

crino66666 发表于 2026-2-22 19:44:57

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

因本 发表于 2026-2-22 19:51:34

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

星之子 发表于 2026-2-22 19:52:42

本帖最后由 星之子 于 2026-2-22 20:42 编辑

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

顺带一提，赠礼的代码我是这样设置的：
https://img.gamemale.com/album/201507/02/113342to7t7zj24jot5s7t.gifhttps://img.gamemale.com/album/201903/31/141637dqowosrr6o66wszv.gifhttps://img.gamemale.com/album/202602/15/020037sbg3ssnsgo1d0pbn.gif千杯https://img.gamemale.com/album/201404/12/023039r465s6wuz65a5sx4.jpg12喷雾https://img.gamemale.com/album/201404/12/023039r465s6wuz65a5sx4.jpg13飘飘https://img.gamemale.com/album/201404/12/023039r465s6wuz65a5sx4.jpg15每个赠礼下面单独用带金币和咒术图标的文字标明了价格，所以需要给可以点击的赠礼按钮本身加上［i］和［/i］的斜体标签，方便后续代码中使用选择器选中。
如果不这样做，小图标和按钮一样也是图片，会被选择器一并选中；也会被添加圆角、在鼠标悬浮时一并也有scale放大和彩框效果，这种细节上的缺失是难以容忍的。
其实圆角可以设置成百分比，这样小图标就不会因为圆角太大而变形。但考虑到按钮本身不是严格方形（40*43px）用百分比圆角会偏椭圆，所以采取了迂回的方法。

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

youngq 发表于 2026-2-22 19:53:41

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

凯登 发表于 2026-2-22 19:56:53

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

苹果 发表于 2026-2-22 19:57:55

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

娱乐法师火布偶 发表于 2026-2-22 20:00:31

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

Adam123456 发表于 2026-2-22 20:12:07

每次看见好看的空间都好喜欢捏{:4_86:}

水晶螳螂 发表于 2026-2-22 20:20:00

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

万俟 发表于 2026-2-22 20:23:27

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

查看完整版本: 【亚の空间】主题空间装修