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

Archeb

点击我的头像可查看 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. 
   
2. body:before {
   
3.         content: close-quote;
   
4.         width: 551px;
   
5.         right: 10px;
   
6.         top: 30px;
   
7.         position: fixed;
   
8.         background: center,url();
   
9.         background-size: cover;
   
10.         background-position: center;
    
11.         height: 200px;
    
12. }
    
13. 
    
14. body {
    
15.         background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
    
16.         background-size: cover;
    
17.         background-attachment: fixed;
    
18.         background-position: center;
    
19. }
    
20. 
    
21. #ct {
    
22.         opacity: 0.8;
    
23. }
    
24. 
    
25. #hd {
    
26.         visibility: hidden;
    
27. }
    
28. 
    
29. #ct:hover {
    
30.         opacity: 0.95;
    
31. }
    
32. 
    
33. #ct {
    
34.         opacity: 0.85;
    
35.         transition: opacity 0.5s;
    
36.         border-radius: 7px;
    
37.         box-shadow: 0px 0px 20px 6px rgba(0,0,0,0.12),0px 0px 20px 6px rgba(0,0,0,0.12);
    
38. }
    
39. 
    
40. #ft {
    
41.         visibility: hidden;
    
42. }
    
43. 
    
44. #pprl li {
    
45.         padding: 3px 0 3px 0!important;
    
46. }
    
47. 
    
48. #pprl {
    
49.         height: 120px;
    
50. padding-bottom:0!important;
    
51. }
    
52. .block .dxb_bc{
    
53. padding-bottom:0!important;
    
54. }
    
55. 
    
56. #pprl em {
    
57.         display: none;
    
58. }
    
59. 
    
60. #pprl a {
    
61.         font-size: 26px
    
62. }
    
63. 
    
64. .hm img {
    
65.         border-radius: 50%;
    
66.         margin-top: -110px;
    
67.         box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.12);
    
68.         padding: 2px;
    
69.         background: #FFF;
    
70.         border: 1px solid;
    
71.         border-color: #F2F2F2 #CDCDCD #CDCDCD #F2F2F2;
    
72. }
    
73. 
    
74. div#frame1_left {
    
75.         overflow: visible;
    
76. }
    
77. 
    
78. .hm .mbn a {
    
79.         visibility: hidden;
    
80. }
    
81. 
    
82. #profile .blocktitle span {
    
83.         display: none;
    
84. }
    
85. 
    
86. #scrolltop {
    
87.         display: none!important;
    
88. }
    
89. 
    
90. #toptb {
    
91.         display: none!important;
    
92. }
    
93. 
    
94. .ct2 .sd {
    
95.         overflow: visible;
    
96. }
    
97. 
    
98. .xs2 {
    
99.         visibility: hidden;
    
100. }
     
101. 
     
102. #pprl:before {
     
103.         content: close-quote;
     
104.         width: 235px;
     
105.         height: 70px;
     
106.         display: block;
     
107.         margin-left: -10px;
     
108.         background-image: url(https://qwq.moe/img/mjj.svg);
     
109. }
     
110. .ul_list {
     
111.     display: none;
     
112. }
     
113. #pprl li:nth-child(1) {
     
114.     width: 210px;
     
115.     color: #333;
     
116.     text-align: center;
     
117.     margin-top: -105px;
     
118.     font-size:24px;
     
119.     text-shadow: 1px 1px 20px rgba(33,33,33,0.3), 1px 1px 5px rgba(33,33,33,0.1);
     
120. }
     
121. #pprl li:nth-child(3){
     
122. margin-top:55px;
     
123. }
     
124. 
     
125. #pprl li:nth-child(2) {
     
126.         display: none
     
127. }
     
128. html{
     
129.     overflow: hidden;
     
130. }
     
131. body{
     
132.     overflow: scroll;
     
133.     height: 100vh;
     
134.     overflow-x:hidden;
     
135. }
     
136. ::-webkit-scrollbar {
     
137.   width: 12px;
     
138.   background-color: transparent;
     
139. }
     
140. ::-webkit-scrollbar-thumb {
     
141.   border-radius:12px;
     
142.   background-color: rgba(0, 0, 0, 0.2);
     
143.   width
     
144.   transition: all 0.3s;
     
145. }
     
146. ::-webkit-scrollbar-thumb:hover {
     
147.   background-color: rgba(0, 0, 0, 0.4);
     
148. }
     
149. ::-webkit-scrollbar-thumb:active {
     
150.   background-color: rgba(0, 0, 0, 0.5);
     
151. }
     
152. 
     
153. .gol{
     
154.     display:none;
     
155. }
     
156. #thread_content li a{
     
157.     transition:margin 0.3s;
     
158. }
     
159. #thread_content li a:hover {
     
160.     margin-left: 3px;
     
161.     text-decoration: none;
     
162. }
     
163. .mls img{
     
164. border-radius:50%;
     
165. }
     
166. .hm img{
     
167.     transition:transform 0.5s;
     
168. }
     
169. .hm img:hover{
     
170.     transform:rotate(360deg);
     
171. }
     
172. .mls img{
     
173.     transition:transform 0.5s;
     
174. }
     
175. .mls img:hover{
     
176.     transform:rotate(-360deg);
     
177. }
     
178. #thread_content .xl li {
     
179.     width: 50%;
     
180. }
     
181. 
     
182. #thread_content .xl {
     
183.     display: flex;
     
184.     flex-wrap: wrap;
     
185. }
     
186. #friend_content .ml {
     
187.     display: flex;
     
188.     justify-content: center;
     
189. }
     
190. 
     
191. #friend_content {
     
192.     padding: 0;
     
193. }
     
194. #personalinfo_content p{
     
195. display:none;
     
196. }
     
197. #thread_content .xl{
     
198.     display:flex;
     
199.     flex-wrap:wrap;
     
200. }
     
201. #thread_content .xl li{
     
202.     width:50%;
     
203. }
     

复制代码

如何修改回去：再提交一次空白的

夕日

还是我的空间最强

flyqie

感谢楼主，这是我的修改过的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. 
    
12. body {
    
13.         background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
    
14.         background-color: #d5fbfe;
    
15.         background-size: cover;
    
16.         background-attachment: fixed;
    
17.         background-position: center
    
18. }
    
19. 
    
20. #ct {
    
21.         opacity: .8
    
22. }
    
23. 
    
24. #hd {
    
25.         visibility: hidden
    
26. }
    
27. 
    
28. #ct:hover {
    
29.         opacity: .9
    
30. }
    
31. 
    
32. #ct {
    
33.         opacity: .7;
    
34.         transition: opacity .5s;
    
35.         border-radius: 7px;
    
36.         box-shadow: 0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)
    
37. }
    
38. 
    
39. #ft {
    
40.         visibility: hidden
    
41. }
    
42. 
    
43. #pprl li {
    
44.         padding: 3px 0 3px 0!important
    
45. }
    
46. 
    
47. #pprl {
    
48.         height: 400px
    
49. }
    
50. 
    
51. #pprl em {
    
52.         display: none
    
53. }
    
54. 
    
55. #pprl a {
    
56.         font-size: 26px
    
57. }
    
58. 
    
59. .hm img {
    
60.         border-radius: 50%;
    
61.         margin-top: -110px;
    
62.         box-shadow: 0 0 10px 6px rgba(0,0,0,.12);
    
63.         padding: 2px;
    
64.         background: #fff;
    
65.         border: 1px solid;
    
66.         border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2
    
67. }
    
68. 
    
69. div#frame1_left {
    
70.         overflow: visible
    
71. }
    
72. 
    
73. .hm .mbn a {
    
74.         visibility: hidden
    
75. }
    
76. 
    
77. #profile .blocktitle span {
    
78.         display: none
    
79. }
    
80. 
    
81. #scrolltop {
    
82.         display: none!important
    
83. }
    
84. 
    
85. #toptb {
    
86.         display: none!important
    
87. }
    
88. 
    
89. .ct2 .sd {
    
90.         overflow: visible
    
91. }
    
92. 
    
93. .xs2 {
    
94.         visibility: hidden
    
95. }
    
96. 
    
97. #pprl:before {
    
98.         content: close-quote;
    
99.         width: 235px;
    
100.         height: 35px;
     
101.         display: block;
     
102.         margin-left: -10px;
     
103.         background-image: url(https://pic.imgdb.cn/item/5e7a0c1c9dbe9d88c50bd808.png)
     
104. }
     
105. 
     
106. #thread {
     
107.         display: none
     
108. }
     
109. 
     
110. #pprl li {
     
111.         display: none
     
112. }

复制代码

robot

雪丫鬟 发表于 2020-3-25 01:22
求分享css代码

body {background-attachment:scroll !important;}body {background-image:url(https://random.52ecy.cn/randbg.php)}div{display:none;}

风影OvO

度百 发表于 2020-3-30 23:25
牛批404效果，求分享啊！

https://www.hostloc.com/forum.php?mod=viewthread&tid=664244

great999

emmm，报错：Uncaught SyntaxError: Unexpected token '{'

Archeb

七夏浅笑 发表于 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. 
    
26. .gol{
    
27.     display:none;
    
28. }

复制代码

riwsh

马克

vagaa

强！！！我弄一下
不会放弃

Function

哇塞，我要试试哎

Archeb

h20 发表于 2020-3-24 14:35
这是哪个番的背景图？

动态背景API，我也不知道你看到了哪张
iqdb.org 可以搜

Archeb

h20 发表于 2020-3-24 14:37
这个思路不错，我也搞一个

敲碗等抄