/* 按钮等部件的颜色 */
: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
*/
感谢各位大佬作出的分享以及给予的思路
有大佬可以讲解一下鼠标样式怎么搞吗......
已解决，感谢 @MACSITE 大佬的帮助～