|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?注册
x
本帖最后由 freeguy 于 2021-12-26 18:50 编辑
具体效果点我
与直接在个人空间DIY不同,这个是利用discuz自带接口实现的,不过也照样安全。前置条件:电脑浏览器
方法
①打开pastebin,Ctrl+A全选RAW Paste Data,复制
②在一个有回复评论框的帖子,F12 - Console - 粘贴 - 回车执行
③然后他会弹出一个框,你再把css输入进那个框里面,第二段、第三段代码是一个CSS样式的例子
④确定,然后到自己空间看效果(尝试该方法的一定要把贴子看完)
如果你不会用,一键版 →→→ https://www.hostloc.com/thread-665260-1-1.html
第一段代码
https://pastebin.com/YEqpfbbt
第二段代码(空间风格1)
- body:before {
- content: close-quote;
- width: 551px;
- right: 10px;
- top: 30px;
- position: fixed;
- background: center,url();
- background-size: cover;
- background-position: center;
- height: 200px;
- }
- body {
- background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
- background-size: cover;
- background-attachment: fixed;
- background-position: center;
- }
- #ct {
- opacity: 0.8;
- }
- #hd {
- visibility: hidden;
- }
- #ct:hover {
- opacity: 0.95;
- }
- #ct {
- opacity: 0.85;
- transition: opacity 0.5s;
- border-radius: 7px;
- box-shadow: 0px 0px 20px 6px rgba(0,0,0,0.12),0px 0px 20px 6px rgba(0,0,0,0.12);
- }
- #ft {
- visibility: hidden;
- }
- #pprl li {
- padding: 3px 0 3px 0!important;
- }
- #pprl {
- height: 120px;
- padding-bottom:0!important;
- }
- .block .dxb_bc{
- padding-bottom:0!important;
- }
- #pprl em {
- display: none;
- }
- #pprl a {
- font-size: 26px
- }
- .hm img {
- border-radius: 50%;
- margin-top: -110px;
- box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.12);
- padding: 2px;
- background: #FFF;
- border: 1px solid;
- border-color: #F2F2F2 #CDCDCD #CDCDCD #F2F2F2;
- }
- div#frame1_left {
- overflow: visible;
- }
- .hm .mbn a {
- visibility: hidden;
- }
- #profile .blocktitle span {
- display: none;
- }
- #scrolltop {
- display: none!important;
- }
- #toptb {
- display: none!important;
- }
- .ct2 .sd {
- overflow: visible;
- }
- .xs2 {
- visibility: hidden;
- }
- #pprl:before {
- content: close-quote;
- width: 235px;
- height: 70px;
- display: block;
- margin-left: -10px;
- background-image: url(https://sample.org/sample/png);
- }
- .ul_list {
- display: none;
- }
- #pprl li:nth-child(1) {
- width: 210px;
- color: #333;
- text-align: center;
- margin-top: -105px;
- font-size:24px;
- text-shadow: 1px 1px 20px rgba(33,33,33,0.3), 1px 1px 5px rgba(33,33,33,0.1);
- }
- #pprl li:nth-child(3){
- margin-top:55px;
- }
- #pprl li:nth-child(2) {
- display: none
- }
- html{
- overflow: hidden;
- }
- body{
- overflow: scroll;
- height: 100vh;
- overflow-x:hidden;
- }
- ::-webkit-scrollbar {
- width: 12px;
- background-color: transparent;
- }
- ::-webkit-scrollbar-thumb {
- border-radius:12px;
- background-color: rgba(0, 0, 0, 0.2);
- width
- transition: all 0.3s;
- }
- ::-webkit-scrollbar-thumb:hover {
- background-color: rgba(0, 0, 0, 0.4);
- }
- ::-webkit-scrollbar-thumb:active {
- background-color: rgba(0, 0, 0, 0.5);
- }
- .gol{
- display:none;
- }
- #thread_content li a{
- transition:margin 0.3s;
- }
- #thread_content li a:hover {
- margin-left: 3px;
- text-decoration: none;
- }
- .mls img{
- border-radius:50%;
- }
- .hm img{
- transition:transform 0.5s;
- }
- .hm img:hover{
- transform:rotate(360deg);
- }
- .mls img{
- transition:transform 0.5s;
- }
- .mls img:hover{
- transform:rotate(-360deg);
- }
- #thread_content .xl li {
- width: 50%;
- }
- #thread_content .xl {
- display: flex;
- flex-wrap: wrap;
- }
- #friend_content .ml {
- display: flex;
- justify-content: center;
- }
- #friend_content {
- padding: 0;
- }
- #personalinfo_content p{
- display:none;
- }
- #thread_content .xl{
- display:flex;
- flex-wrap:wrap;
- }
- #thread_content .xl li{
- width:50%;
- }
复制代码 第三段代码(空间风格2)
- body:before {
- content: close-quote;
- width: 551px;
- right: 10px;
- top: 30px;
- position: fixed;
- background-size: cover;
- background-position: center;
- height: 200px
- }
- body {
- background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
- background-color: #d5fbfe;
- background-size: cover;
- background-attachment: fixed;
- background-position: center
- }
- #ct {
- opacity: .8
- }
- #hd {
- visibility: hidden
- }
- #ct:hover {
- opacity: .9
- }
- #ct {
- opacity: .7;
- transition: opacity .5s;
- border-radius: 7px;
- box-shadow: 0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)
- }
- #ft {
- visibility: hidden
- }
- #pprl li {
- padding: 3px 0 3px 0!important
- }
- #pprl {
- height: 400px
- }
- #pprl em {
- display: none
- }
- #pprl a {
- font-size: 26px
- }
- .hm img {
- border-radius: 50%;
- margin-top: -110px;
- box-shadow: 0 0 10px 6px rgba(0,0,0,.12);
- padding: 2px;
- background: #fff;
- border: 1px solid;
- border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2
- }
- div#frame1_left {
- overflow: visible
- }
- .hm .mbn a {
- visibility: hidden
- }
- #profile .blocktitle span {
- display: none
- }
- #scrolltop {
- display: none!important
- }
- #toptb {
- display: none!important
- }
- .ct2 .sd {
- overflow: visible
- }
- .xs2 {
- visibility: hidden
- }
- #pprl:before {
- content: close-quote;
- width: 235px;
- height: 35px;
- display: block;
- margin-left: -10px;
- background-image: url(https://sample.org/sample.png)
- }
- #thread {
- display: none
- }
- #pprl li {
- display: none
- }
复制代码 第四段代码,网页透明滚动条(可和风格1/风格2同时使用)
- html{
- overflow: hidden;
- }
- body{
- overflow: scroll;
- height: 100vh;
- overflow-x:hidden;
- }
- ::-webkit-scrollbar {
- width: 12px;
- background-color: transparent;
- }
- ::-webkit-scrollbar-thumb {
- border-radius:12px;
- background-color: rgba(0, 0, 0, 0.2);
- width
- transition: all 0.3s;
- }
- ::-webkit-scrollbar-thumb:hover {
- background-color: rgba(0, 0, 0, 0.4);
- }
- ::-webkit-scrollbar-thumb:active {
- background-color: rgba(0, 0, 0, 0.5);
- }
- .gol{
- display:none;
- }
复制代码 还原
①复制第一段代码
②在一个有回复评论框的帖子,F12 - Console - 粘贴 - 回车执行
③然后他会弹出一个框,提交一次空白内容
④确定,然后到自己空间看效果。
更多说明
代码中的https://sample.org/sample.png 只是个例子,没有实际图片。
代码中的https://api.ixiaowai.cn/api/api.php是一个随机图片的api(大白话:每次访问显示一张随机图片),作用是个人空间每次访问背景不一样。关于这个,你可以自己找自己喜欢的,比如https://www.jinrishici.com/,或者看看「这个列表」
原帖链接做了一些便于理解的增加。
|
|