先写一部分,没改完呢,怕最后懒癌发作不想写了😅
下边的教程就是本博客的样式
黑暗模式下更漂亮
导航栏图标直接复制拿走,
没找到美化 xlog 的教程自己动手丰衣足食#
上边的黑色横幅样式博主用的全透明图片
不用找了,图片就是一片空白
直接下载拿走放到 站点设置 - 常规 - 横幅#
直接把下边代码复制到 自定义 CSS#
/*--导航栏添加白色上边框*/
.items-center.text-gray-500 {
border-top: 1px solid white; // 只需要上边框,使用下边框也可
}
/*--副标题彩色*/
.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;
}
/*--文章概要变大*/
.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: 1rem;
}
/*---归档文章列表变大*/
.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);
}
/*--按钮变大*/
.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);
}