banner
MACSITE

@MACSITE

兴趣是学习的动力,学习也能成为消遣!--你愁啥-ncs.fun

美化xlog基本定稿

应该不再修改 xlog 页面样式了,除非我看到更漂亮的页面😜
先说说对 xlog 的印象,作为基本博客肯定够用了,
对于有强迫症想要都随自己心意修改的博主,真的是太难了。
除了刚上手时有些不习惯以外就没啥不满意的地方了,除了被墙!
下边是样式图

image

下边提供定稿 css 代码


/*--副标题彩色*/
.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);   

}
/*--导航条移到顶部*/
.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;

}
/*-- 顶部代码雨*/
.border-zinc-100 {
       background-image:url('https://xlog.app/_next/image?url=https%3A%2F%2Fipfs.4everland.xyz%2Fipfs%2Fbafkreibiivd46q6qfd6dzri6j6ltw53tzrudcqk7fmxhsj32qbqer7zkra&w=1920&q=75');
	background-repeat:repeat; 
}

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。