滑滑滑稽稽稽

滑滑滑稽稽稽

这里是·弔人の博客~ 俺の愛馬が！
bilibili
telegram
github
首頁归档友联·朋友们的网站

取百家之長，分享一下我的css~

#雅1555
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
這是一個CSS樣式表，包含了許多不同的樣式設置，如按鈕特效、渐变色和彩色、防剧透、字體設置等。其中還包括了一些背景圖片的設置，如爱心、蓝黄粉配色等。此外，還有不同顏色的調用框，如普通為蓝色，error為红色，success為绿色。
/* 按鈕等部件的顏色 */

:root {
    --theme-color: aqua !important;
    --font-fans: Noto Color Emoji
    /* --font-fans: 'SF Compact Rounded','PingFang SC','Microsoft YaHei',Lato,sans-serif;
    --header-height: max(50vh, 450px);
    cursor: url('https://img1.imgtp.com/2023/05/01/x2i3pilm.jpg') 0 0, auto; */
}

/* 按鈕特效的轉換 */

.button:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);   

}
.xlog-post:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
.xlog-post {
    padding: 2rem;
}

/*---滑鼠選擇樣式歸檔文章列表動態變大*/
.items-center.-mx-2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
}

/*--各種漸變色和彩色*/

.whitespace-pre-wrap {
    background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
    color: transparent;
     -webkit-background-clip: text;
     -webkit-animation: slide 2s infinite linear;
     animation: slide 5s infinite linear;
     text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5)
     }
.break-words{
    background-image: -webkit-linear-gradient(left,#3dbfb7 25%,#39C5bb 50%,#1edbce 75%,#00ffee 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: slide 2s infinite linear;
    animation: slide 5s infinite linear;
}
.xlog-post-title{
    background-image: -webkit-linear-gradient(left,#00ffeecd 25%,#17d9cce4 50%,#28cdc2d2 75%,#33bdb4 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: slide 2s infinite linear;
    animation: slide 5s infinite linear;
}

/* 主頁跳轉到文章的按鈕透明設置 */

.xlog-post{
    background-color: transparent;
}

/* AI 生成的摘要 字體設置 */

.leading-loose{
    font-weight: bolder;  
    font-style: italic;  
    color: aqua;
}

     /*--導航條移到頂部*/
.xlog-site-navigation {
    position:absolute;
    top:0px;   
}
/*--連接按鈕位置不變*/
.pl-1 {
    margin-left:auto;
}
/*--調整橫幅位置*/
.py-12 {
      padding-bottom: 20px;
    padding-top: 45px;  
}
/*--調整連接上下位置*/
.flex.text-gray-500 {
        padding-bottom: 10px;

}
/* blockquote*/

/* 緣之空 */

/* body{ 
    background-image: url(https://img1.imgtp.com/2023/04/29/jwGDuQ5w.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    background-attachment: fixed;
} */

/* 愛心 總之就是非常可愛 */

/* body{ 
    background-image: url(https://img1.imgtp.com/2023/05/01/NVnaZTNS.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    background-attachment: fixed;
} */

/* 藍黃粉配色 總之就是非常可愛 */

/* body{ 
    background-image: url(https://img1.imgtp.com/2023/05/01/1xRo9a6B.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    background-attachment: fixed;
} */

/* 惠惠 */

/* body{ 
    background-image: url(https://img1.imgtp.com/2023/05/01/mhyoOtKF.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    background-attachment: fixed;
} */

/* 史萊姆 */

/* body{
    background-image: url(https://i.328888.xyz/2023/04/29/iK3Jya.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    background-attachment: fixed;
} */



.spoiler {
    filter: blur(8px);
    transition: filter .5s;
}

.spoiler:hover {
    filter: blur(0px);
}


/* #防劇透： */
/* 使用案例：
:span[This is a spoiler]{.spoiler} */
.cm-line span{
    color: black;
    /* caret-color: transparent !important;
    display: block;
    padding: 0 2px 0 6px; */
}

/* #一般情況下的調用樣式（有更多形式的，在173行） */

.prose blockquote {
    border-radius: 0.1875rem;
    background: rgba(var(--tw-colors-i-gray-100),0.8);
    padding: .625rem 1.25rem;
    border-left: 0.25rem solid rgb(var(--tw-colors-i-gray-500));
}

/* #行內代碼以及代碼塊 */

:not(pre)>code, pre {
    background-color: #39ccb28f;
    color: rgb(223 235 34);
}

/* #設置最上方（名字的左右）為透明 注意：transparent為css內默認的透明顏色 */

.border-zinc-100 {
    --banner-bg-color:transparent;
}

/* #普通，全局的字體設置 */

h6{
    color: #fffb00;
}

span{
    color: #c519a8;
    font-weight: bolder;
}

h2{
    color: aqua;
}
p{
    color: #39C5bb;
}
time{
    color: #f8c3cd;
}

/* 不同顏色的調用框 普通為藍色，error為紅色，success為綠色 */

.note {
    border-radius: 0.1875rem;
    margin: 1rem 0;
    padding: 1rem;
    position: relative;
    background: rgba(var(--tw-colors-i-gray-100),0.8);
    border-left: 0.25rem solid rgb(var(--tw-colors-i-blue-500));
    padding-left: 1rem;
}

.error {
    border-left: 0.25rem solid rgb(var(--tw-colors-i-rose-500));
}

.success {
    border-left: 0.25rem solid rgb(var(--tw-colors-i-teal-500));
}

/* 實例：
:::div{.note}
This is info text block 
:::

:::div{.note.error}
This is error text block
:::

:::div{.note.success}
This is success text block
::: */

/* 另外一種防劇透（黑幕）
使用實例：<span class="heimu" title="此處為懸浮在黑條上顯示的字">wssb</span> */

.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #39Ccb2;
    color: #39C5bb;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: aqua !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
    color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #BA0000 !important;
}

/* 評論區透明 */

.input.is-block {
    width: 100%;
     background-color: #39ccb28f;
          color: aqua;
}
.placeholder{
    color: #36a29a;
}

/* 在各種地方加入自定義的話語 */

.xlog-post-summary:after {
  content: "警告：警惕人工智能奪走人類的語言歸納能力！！！";
  font-weight: bolder;  
  font-style: italic;
  color: red;
}

.xlog-comment-count:after {
    content: "        ·快來評論哼哼啊啊啊啊啊啊↓";
    font-weight: bolder;  
    font-style: italic;
    color: #39Ccb2;
}

.xlog-site-name:after {
    content: "ᵀᴹ";
    font-style: italic;
    color: #39Ccb2;
}

.mt-auto:before {
    content: "關注滑稽醬喵~關注滑稽醬謝謝喵~";
    text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
    font-style: italic;
    font-weight: bolder; 
    color: wheat;
}

/* 滑鼠樣式的改變 */

button {

	cursor:url(ipfs://bafkreiadiqnddwnt4lvklowtsuvkt37nw73m7zxsvtexua5hditfg7m5p4), auto;  
}
.cursor-pointer {

	cursor:url(ipfs://bafkreiadiqnddwnt4lvklowtsuvkt37nw73m7zxsvtexua5hditfg7m5p4), auto;  
}
.xlog-user {

	cursor:url(ipfs://bafkreiadiqnddwnt4lvklowtsuvkt37nw73m7zxsvtexua5hditfg7m5p4), auto;  
}
.flex.-mx-5 {

	cursor:url(ipfs://bafkreiadiqnddwnt4lvklowtsuvkt37nw73m7zxsvtexua5hditfg7m5p4), auto;  
}
.space-y-8 {

	cursor:url(ipfs://bafkreiadiqnddwnt4lvklowtsuvkt37nw73m7zxsvtexua5hditfg7m5p4), auto;  
}

/* 註釋 使用實例 ：
<p class="zhushi">圖片註釋</p>
*/

.zhushi {
	margin: 1em 0; 
	color: #555555; 
	font-size: 0.75em; 
	text-align: center; 
}


/* 檢測用戶是否使用移動設備 */  
    @media only screen and (max-width: 767px) {  
      /* 改變樣式 */  
    body {  
        background-image: url(https://img1.imgtp.com/2023/05/01/mhyoOtKF.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center ;
        background-attachment: fixed; 
    }   
    .mt-auto:after {
        content: "您當前採用“手機端”打開此網頁";
        text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        font-style: italic;
        font-weight: bolder; 
        color: wheat;
}
}
/* 檢測用戶是否使用台式電腦 */  
    @media only screen and (min-width: 768px) and (max-width: 991px) {  
      /* 改變樣式 */  
    body {  
        background-image: url(https://img1.imgtp.com/2023/05/01/EiUP9R8D.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center ;
        background-attachment: fixed; 
    } 
    .mt-auto:after {
        content: "您當前採用“台式電腦”打開此網頁";
        text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        font-style: italic;
        font-weight: bolder; 
        color: wheat;
}
}
  
/* 檢測用戶是否使用筆記本電腦 */  
    @media only screen and (min-width: 992px) {  
      /* 改變樣式 */  
    body {  
        background-image: url(https://img1.imgtp.com/2023/05/01/EiUP9R8D.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center ;
        background-attachment: fixed; 
    }  
    .mt-auto:after {
        content: "您當前採用“筆記本電腦”打開此網頁";
        text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        font-style: italic;
        font-weight: bolder; 
        color: wheat;
}
}  


/* 
目前參考的文獻資料：
https://mac.ncs.fun/mei-hua-xlog
https://birdgg.me/xlog-cutom-css
https://endercat.xlog.app/zai-bo-ke-shang-shi-yong-hei-tiao-zi-md
https://mac.ncs.fun/mei-hua-xlog-ji-ben-ding-gao
https://ncs.fun/mou-ren-yao-de-xlog-shu-biao-yang-shi
*/
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。