全球主机交流论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

CeraNetworksBGVM服务器IP归属甄别会员请立即修改密码
查看: 13075|回复: 127

【个人空间DIY】大伙来看看我空间好看不

  [复制链接]
发表于 2020-3-24 14:26:09 | 显示全部楼层 |阅读模式
本帖最后由 Archeb 于 2020-3-30 09:54 编辑

点击我的头像可查看 PC版效果最佳

感谢原来 https://www.hostloc.com/thread-663279-1-1.html @高板惠乃果  的思路,我把它做成了只需要js网页运行的

说明:使用的是discuz自带的接口,一切安全的,所有支持个人空间自定义的discuz论坛都可用

以下代码,
①打开pastebin,Ctrl+A全选RAW Paste Data,复制
②在一个有回复评论框的帖子,F12 - Console - 粘贴 - 回车执行
③然后他会弹出一个框,你再把css输入进那个框里面
④确定,然后到自己空间看效果

https://pastebin.com/YEqpfbbt

配合伪元素和SVG,能做出非常非常非常多有趣的效果

如果你不会用,一键版 →→→ https://www.hostloc.com/thread-665260-1-1.html

不过需要具备前端知识

下面这个是我的CSS


  1. body:before {
  2.         content: close-quote;
  3.         width: 551px;
  4.         right: 10px;
  5.         top: 30px;
  6.         position: fixed;
  7.         background: center,url();
  8.         background-size: cover;
  9.         background-position: center;
  10.         height: 200px;
  11. }

  12. body {
  13.         background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
  14.         background-size: cover;
  15.         background-attachment: fixed;
  16.         background-position: center;
  17. }

  18. #ct {
  19.         opacity: 0.8;
  20. }

  21. #hd {
  22.         visibility: hidden;
  23. }

  24. #ct:hover {
  25.         opacity: 0.95;
  26. }

  27. #ct {
  28.         opacity: 0.85;
  29.         transition: opacity 0.5s;
  30.         border-radius: 7px;
  31.         box-shadow: 0px 0px 20px 6px rgba(0,0,0,0.12),0px 0px 20px 6px rgba(0,0,0,0.12);
  32. }

  33. #ft {
  34.         visibility: hidden;
  35. }

  36. #pprl li {
  37.         padding: 3px 0 3px 0!important;
  38. }

  39. #pprl {
  40.         height: 120px;
  41. padding-bottom:0!important;
  42. }
  43. .block .dxb_bc{
  44. padding-bottom:0!important;
  45. }

  46. #pprl em {
  47.         display: none;
  48. }

  49. #pprl a {
  50.         font-size: 26px
  51. }

  52. .hm img {
  53.         border-radius: 50%;
  54.         margin-top: -110px;
  55.         box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.12);
  56.         padding: 2px;
  57.         background: #FFF;
  58.         border: 1px solid;
  59.         border-color: #F2F2F2 #CDCDCD #CDCDCD #F2F2F2;
  60. }

  61. div#frame1_left {
  62.         overflow: visible;
  63. }

  64. .hm .mbn a {
  65.         visibility: hidden;
  66. }

  67. #profile .blocktitle span {
  68.         display: none;
  69. }

  70. #scrolltop {
  71.         display: none!important;
  72. }

  73. #toptb {
  74.         display: none!important;
  75. }

  76. .ct2 .sd {
  77.         overflow: visible;
  78. }

  79. .xs2 {
  80.         visibility: hidden;
  81. }

  82. #pprl:before {
  83.         content: close-quote;
  84.         width: 235px;
  85.         height: 70px;
  86.         display: block;
  87.         margin-left: -10px;
  88.         background-image: url(https://qwq.moe/img/mjj.svg);
  89. }
  90. .ul_list {
  91.     display: none;
  92. }
  93. #pprl li:nth-child(1) {
  94.     width: 210px;
  95.     color: #333;
  96.     text-align: center;
  97.     margin-top: -105px;
  98.     font-size:24px;
  99.     text-shadow: 1px 1px 20px rgba(33,33,33,0.3), 1px 1px 5px rgba(33,33,33,0.1);
  100. }
  101. #pprl li:nth-child(3){
  102. margin-top:55px;
  103. }

  104. #pprl li:nth-child(2) {
  105.         display: none
  106. }
  107. html{
  108.     overflow: hidden;
  109. }
  110. body{
  111.     overflow: scroll;
  112.     height: 100vh;
  113.     overflow-x:hidden;
  114. }
  115. ::-webkit-scrollbar {
  116.   width: 12px;
  117.   background-color: transparent;
  118. }
  119. ::-webkit-scrollbar-thumb {
  120.   border-radius:12px;
  121.   background-color: rgba(0, 0, 0, 0.2);
  122.   width
  123.   transition: all 0.3s;
  124. }
  125. ::-webkit-scrollbar-thumb:hover {
  126.   background-color: rgba(0, 0, 0, 0.4);
  127. }
  128. ::-webkit-scrollbar-thumb:active {
  129.   background-color: rgba(0, 0, 0, 0.5);
  130. }

  131. .gol{
  132.     display:none;
  133. }
  134. #thread_content li a{
  135.     transition:margin 0.3s;
  136. }
  137. #thread_content li a:hover {
  138.     margin-left: 3px;
  139.     text-decoration: none;
  140. }
  141. .mls img{
  142. border-radius:50%;
  143. }
  144. .hm img{
  145.     transition:transform 0.5s;
  146. }
  147. .hm img:hover{
  148.     transform:rotate(360deg);
  149. }
  150. .mls img{
  151.     transition:transform 0.5s;
  152. }
  153. .mls img:hover{
  154.     transform:rotate(-360deg);
  155. }
  156. #thread_content .xl li {
  157.     width: 50%;
  158. }

  159. #thread_content .xl {
  160.     display: flex;
  161.     flex-wrap: wrap;
  162. }
  163. #friend_content .ml {
  164.     display: flex;
  165.     justify-content: center;
  166. }

  167. #friend_content {
  168.     padding: 0;
  169. }
  170. #personalinfo_content p{
  171. display:none;
  172. }
  173. #thread_content .xl{
  174.     display:flex;
  175.     flex-wrap:wrap;
  176. }
  177. #thread_content .xl li{
  178.     width:50%;
  179. }
复制代码


如何修改回去:再提交一次空白的
发表于 2020-3-24 21:36:47 | 显示全部楼层
本帖最后由 flyqie 于 2020-3-24 21:56 编辑

感谢楼主,这是我的修改过的CSS~
  1. body:before {
  2.         content: close-quote;
  3.         width: 551px;
  4.         right: 10px;
  5.         top: 30px;
  6.         position: fixed;
  7.         background-size: cover;
  8.         background-position: center;
  9.         height: 200px
  10. }

  11. body {
  12.         background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
  13.         background-color: #d5fbfe;
  14.         background-size: cover;
  15.         background-attachment: fixed;
  16.         background-position: center
  17. }

  18. #ct {
  19.         opacity: .8
  20. }

  21. #hd {
  22.         visibility: hidden
  23. }

  24. #ct:hover {
  25.         opacity: .9
  26. }

  27. #ct {
  28.         opacity: .7;
  29.         transition: opacity .5s;
  30.         border-radius: 7px;
  31.         box-shadow: 0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)
  32. }

  33. #ft {
  34.         visibility: hidden
  35. }

  36. #pprl li {
  37.         padding: 3px 0 3px 0!important
  38. }

  39. #pprl {
  40.         height: 400px
  41. }

  42. #pprl em {
  43.         display: none
  44. }

  45. #pprl a {
  46.         font-size: 26px
  47. }

  48. .hm img {
  49.         border-radius: 50%;
  50.         margin-top: -110px;
  51.         box-shadow: 0 0 10px 6px rgba(0,0,0,.12);
  52.         padding: 2px;
  53.         background: #fff;
  54.         border: 1px solid;
  55.         border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2
  56. }

  57. div#frame1_left {
  58.         overflow: visible
  59. }

  60. .hm .mbn a {
  61.         visibility: hidden
  62. }

  63. #profile .blocktitle span {
  64.         display: none
  65. }

  66. #scrolltop {
  67.         display: none!important
  68. }

  69. #toptb {
  70.         display: none!important
  71. }

  72. .ct2 .sd {
  73.         overflow: visible
  74. }

  75. .xs2 {
  76.         visibility: hidden
  77. }

  78. #pprl:before {
  79.         content: close-quote;
  80.         width: 235px;
  81.         height: 35px;
  82.         display: block;
  83.         margin-left: -10px;
  84.         background-image: url(https://pic.imgdb.cn/item/5e7a0c1c9dbe9d88c50bd808.png)
  85. }

  86. #thread {
  87.         display: none
  88. }

  89. #pprl li {
  90.         display: none
  91. }
复制代码
发表于 2020-3-25 08:20:53 | 显示全部楼层

body {background-attachment:scroll !important;}body {background-image:url(https://random.52ecy.cn/randbg.php)}div{display:none;}
发表于 2020-3-24 22:24:36 来自手机 | 显示全部楼层
emmm,报错:Uncaught SyntaxError: Unexpected token '{'
发表于 2020-3-24 15:37:50 | 显示全部楼层
还是我的空间最强
发表于 2020-3-31 08:23:02 | 显示全部楼层
度百 发表于 2020-3-30 23:25
牛批404效果,求分享啊!

https://www.hostloc.com/forum.php?mod=viewthread&tid=664244
 楼主| 发表于 2020-3-25 15:58:45 | 显示全部楼层
七夏浅笑 发表于 2020-3-25 15:11
成功了,好棒诶,第一次在论坛上折腾这么久

提供一个完美的透明滚动条方案
  1. html{
  2.     overflow: hidden;
  3. }
  4. body{
  5.     overflow: scroll;
  6.     height: 100vh;
  7.     overflow-x:hidden;
  8. }
  9. ::-webkit-scrollbar {
  10.   width: 12px;
  11.   background-color: transparent;
  12. }
  13. ::-webkit-scrollbar-thumb {
  14.   border-radius:12px;
  15.   background-color: rgba(0, 0, 0, 0.2);
  16.   width
  17.   transition: all 0.3s;
  18. }
  19. ::-webkit-scrollbar-thumb:hover {
  20.   background-color: rgba(0, 0, 0, 0.4);
  21. }
  22. ::-webkit-scrollbar-thumb:active {
  23.   background-color: rgba(0, 0, 0, 0.5);
  24. }

  25. .gol{
  26.     display:none;
  27. }
复制代码
发表于 2020-3-24 14:30:00 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
发表于 2020-3-24 14:31:16 | 显示全部楼层
哇塞,我要试试哎
发表于 2020-3-24 14:35:46 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
 楼主| 发表于 2020-3-24 14:36:22 | 显示全部楼层
h20 发表于 2020-3-24 14:35
这是哪个番的背景图?

动态背景API,我也不知道你看到了哪张
iqdb.org 可以搜
发表于 2020-3-24 14:37:27 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
 楼主| 发表于 2020-3-24 14:39:03 | 显示全部楼层
h20 发表于 2020-3-24 14:37
这个思路不错,我也搞一个


敲碗等抄
发表于 2020-3-24 14:39:52 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
发表于 2020-3-24 14:40:05 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|全球主机交流论坛

GMT+8, 2022-1-20 13:06 , Processed in 0.070476 second(s), 13 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表