美化额外的css
建立一个网站,项目
|
|
17
|

1524 字
|
1.9 小时

额外的css美化主题

我们已经基本设置了和使用Argon，如果希望页面更加好看，具有动画效果不死板那么就需要配置额外的css了

配置步骤

首先打开WordPress后台，打开仪表盘>开始定制>打开外观定制器>额外css

如果你比较懒直接复制一下代码粘贴进去就好了ps第八个模块仅适用Argon主题文章列表卡片布局1使用

/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:echo;
src:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}

body{
        font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif
}

/*横幅字体大小*/
.banner-title {
  font-size: 2.5em;
}
.banner-subtitle{
  font-size: 28px;

    -webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;
}

/*文章标题字体大小*/
.post-title {
    font-size: 25px
}

/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;

}

/*评论区字体大小*/
p {
    font-size: 1.2rem

}

/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}

/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}
/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}

/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}

/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}

/* 公告居中 */
.leftbar-announcement-title {
    font-size: 20px;
/*     text-align: center; */
                 color: #00FFFF
}

.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.8;
/*     text-align: center; */
            color:#00FFFF;
}

/* 一言居中 */
.leftbar-banner-title {
    font-size: 20px;
    display: block;
    text-align: center;
        opacity: 0.8;
}

/* 个性签名居中 */
.leftbar-banner-subtitle {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.8;
    display: block;
    text-align: center;
}

/*========颜色设置===========*/

/*文章或页面的正文颜色*/
body{
    color:#364863
}

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}

/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*========透明设置===========*/

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.8) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}

/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}

/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/

/*========排版设置===========*/

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {margin:0;}
/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}

/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}

/*顶栏菜单放大*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/

.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'echo';

}
.navbar-brand {
    font-family: 'echo';
    font-size: 1.2rem;
    margin-right: 1.0 rem;
    padding-bottom: 0.2 rem;

    -webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;
}

/*菜单大小*/
.nav-link-inner--text {
    font-size: 1.25em;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.8rem;
    height: 1.8rem;
}
/*菜单间距*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.4em;
    padding-left: 1.4em;
}

/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

/* Github卡片样式*/
.github-info-card-header a {
    /*Github卡片抬头颜色*/
    color: black !important;
    font-size: 1.5rem;
}
.github-info-card {
    /*Github卡片文字（非链接）*/
    font-size: 1rem;
    color: black !important;
}
.github-info-card.github-info-card-full.card.shadow-sm {
    /*Github卡片背景色*/
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
}

/*      左侧栏外观CSS     */

/* 头像 */
#leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

/*  头像亮暗  */
#leftbar_overview_author_image:hover {
    transform: scale(1.23);
    filter: brightness(150%);
}

/* 名称 */
#leftbar_overview_author_name {
      margin-top: 15px;
    font-size: px;align-content;
    color:#00FFFF;
}
#leftbar_overview_author_name {
    margin-top: 15px;
    font-size: 18px;
    color: #00FFFF;
    animation: enhancedComboShake 12s ease-in-out infinite;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    text-shadow: 0 0 5px #00FFFF; /* 添加基础发光效果 */
}

@keyframes enhancedComboShake {
    /* 第一次抖动 - 第2秒（更频繁） */
    0%, 14%, 16% {
        transform: translateX(0) scale(1);
    }
    15% {
        transform: translateX(-5px) scale(1.05); /* 增加幅度 */
    }

    /* 第二次抖动 - 第4秒 */
    30%, 32%, 34% {
        transform: translateX(0) scale(1);
    }
    31% {
        transform: translateX(6px) scale(1.06);
    }
    33% {
        transform: translateX(-6px) scale(1.06);
    }

    /* 第三次抖动 - 第6秒 */
    46%, 48%, 50% {
        transform: translateX(0) scale(1);
    }
    47% {
        transform: translateY(-4px) rotate(-3deg); /* 增加旋转角度 */
    }
    49% {
        transform: translateY(4px) rotate(3deg);
    }

    /* 第四次抖动 - 第8秒（新增） */
    62%, 64%, 66%, 68% {
        transform: translateX(0) scale(1);
    }
    63% {
        transform: translateX(-8px) translateY(-2px) rotate(-2deg);
    }
    65% {
        transform: translateX(8px) translateY(2px) rotate(2deg);
    }
    67% {
        transform: translateX(-4px) translateY(-4px) rotate(-1deg);
    }

    /* 第五次抖动 - 第10秒（新增） */
    78%, 80%, 82%, 84% {
        transform: translateX(0) scale(1);
    }
    79% {
        transform: translateX(7px) scale(1.08);
    }
    81% {
        transform: translateX(-7px) scale(1.08);
    }
    83% {
        transform: translateX(3px) scale(1.04);
    }

    /* 第六次抖动 - 第11.5秒（新增，快速连续抖动） */
    92%, 93%, 94%, 95%, 96%, 97% {
        transform: translateX(0) scale(1);
    }
    92.5% {
        transform: translateX(-4px) rotate(-2deg);
    }
    93.5% {
        transform: translateX(4px) rotate(2deg);
    }
    94.5% {
        transform: translateX(-3px) rotate(-1deg);
    }
    95.5% {
        transform: translateX(3px) rotate(1deg);
    }
    96.5% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

/* 增强悬停效果 */
#leftbar_overview_author_name:hover {
    animation: none;
    text-shadow: 0 0 20px #00FFFF, 0 0 35px #00FFFF, 0 0 45px #00FFFF;
    transform: scale(1.15);
    background-color: rgba(0, 255, 255, 0.1);
    border-radius: 5px;
    padding: 2px 8px;
}
/* 简介 */
#leftbar_overview_author_description {
    font-size: 14px;
    margin-top: -4px;
    opacity: 0.8;
    color:#c21f30;
}

/* 标题，链接等 */
a, .btn-neutral {
    color:#AF7AC5 ;

}

/* 页脚透明 */
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}
/*补充*/
.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'echo';
    /* 添加过渡效果 */
    transition: all 0.3s ease-in-out;
    position: relative;
    display: inline-block; /* 确保transform效果正常 */
}

.navbar-nav .nav-link:hover {
    /* 上移并稍微放大 */
    transform: translateY(-2px) scale(1.05);
    /* 添加高亮效果 - 使用与品牌相同的渐变 */
    background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 添加阴影增强立体感 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-family: 'echo';
    font-size: 1.2rem;
    margin-right: 1.0rem;
    padding-bottom: 0.2rem;
    -webkit-text-fill-color: transparent;        
    background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);        
    -webkit-background-clip: text;
    /* 为品牌标志也添加过渡效果 */
    transition: all 0.3s ease-in-out;
}

.navbar-brand:hover {
    /* 品牌标志也可以有轻微的悬停效果 */
    transform: scale(1.05);
    opacity: 0.9;
}
/* 文章标题基础样式和悬停效果 - 修正版 */
.post-header-text-container {
    /* 放大标题 */
    transform: scale(1.25) translateY(-14.5px);
    /* 向上移动 */
    margin-top: -5px;
    /* 文字居中 */
    text-align: center;
    /* 平滑过渡效果 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* 确保元素可以正常变换 */
    display: inline-block;
    /* 添加内边距确保点击区域 */
    padding: 5px 15px;
    /* 保持原有字体颜色 */

}

/* 鼠标悬停时的增强效果 - 修正版 */
.post-header-text-container:hover {
    /* 进一步放大和上移 */
    transform: scale(1.15) translateY(-10px);
    /* 高亮效果 - 不使用渐变，使用纯色阴影 */
    text-shadow: 0 0 8px rgba(131, 101, 253, 0.7);
    /* 添加背景容器效果 */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* 保持字体颜色不变 */
}
/* 针对移动设备优化 */
@media (max-width: 768px) {
  .post-header-text-container {
    /* 减小移动端的缩放比例和上移距离 */
    transform: scale(1.1) translateY(-8px); /* 相比原来的1.25和-14.5px，数值减小了 */
    /* 调整内边距，避免在小屏幕上占用过多空间 */
    padding: 3px 10px;
    /* 可以调整上边距 */
    margin-top: -3px;
  }

  .post-header-text-container:hover {
    /* 在移动端，悬停效果可以更温和，或者与默认状态相同 */
    transform: scale(1.12) translateY(-9px); /* 只做非常细微的变化 */
    /* 可以简化阴影，提升移动端性能 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

1.自定义字体与字体大小调整

自定义字体

/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:echo;
src:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}

body{
        font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif
}

字体大小调整

/*横幅字体大小*/
.banner-title {
  font-size: 2.5em;
}
.banner-subtitle{
  font-size: 28px;

    -webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;
}

/*文章标题字体大小*/
.post-title {
    font-size: 25px
}

/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;

}

/*评论区字体大小*/
p {
    font-size: 1.2rem

}

/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}

/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}

/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}

/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}

2.颜色设置

/*========颜色设置===========*/

/*文章或页面的正文颜色*/
body{
    color:#364863
}

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}

/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}

/* 标题，链接等 */
a, .btn-neutral {
    color:#AF7AC5 ;

}

3.透明效果

/*========透明设置===========*/

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.8) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}

/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}

/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/

/*页脚透明*/
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}

4.布局排版模块

/*========排版设置===========*/

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {margin:0;}
/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}

/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}

5. 导航栏样式模块

/*顶栏菜单放大*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/

.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'echo';

}
.navbar-brand {
    font-family: 'echo';
    font-size: 1.2rem;
    margin-right: 1.0 rem;
    padding-bottom: 0.2 rem;

    -webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;
}

/*菜单大小*/
.nav-link-inner--text {
    font-size: 1.25em;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.8rem;
    height: 1.8rem;
}
/*菜单间距*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.4em;
    padding-left: 1.4em;
}

/*补充*/
.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'echo';
    /* 添加过渡效果 */
    transition: all 0.3s ease-in-out;
    position: relative;
    display: inline-block; /* 确保transform效果正常 */
}

.navbar-nav .nav-link:hover {
    /* 上移并稍微放大 */
    transform: translateY(-2px) scale(1.05);
    /* 添加高亮效果 - 使用与品牌相同的渐变 */
    background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 添加阴影增强立体感 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-family: 'echo';
    font-size: 1.2rem;
    margin-right: 1.0rem;
    padding-bottom: 0.2rem;
    -webkit-text-fill-color: transparent;        
    background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);        
    -webkit-background-clip: text;
    /* 为品牌标志也添加过渡效果 */
    transition: all 0.3s ease-in-out;
}

.navbar-brand:hover {
    /* 品牌标志也可以有轻微的悬停效果 */
    transform: scale(1.05);
    opacity: 0.9;
}

6. 左侧栏样式模块

/* 公告居中 */
.leftbar-announcement-title {
    font-size: 20px;
/*     text-align: center; */
                 color: #00FFFF
}

.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.8;
/*     text-align: center; */
            color:#00FFFF;
}

/* 一言居中 */
.leftbar-banner-title {
    font-size: 20px;
    display: block;
    text-align: center;
        opacity: 0.8;
}

/* 个性签名居中 */
.leftbar-banner-subtitle {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.8;
    display: block;
    text-align: center;
}

/*      左侧栏外观CSS     */

/* 头像 */
#leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

/*  头像亮暗  */
#leftbar_overview_author_image:hover {
    transform: scale(1.23);
    filter: brightness(150%);
}

/* 名称 */
#leftbar_overview_author_name {
      margin-top: 15px;
    font-size: px;align-content;
    color:#00FFFF;
}
#leftbar_overview_author_name {
    margin-top: 15px;
    font-size: 18px;
    color: #00FFFF;
    animation: enhancedComboShake 12s ease-in-out infinite;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    text-shadow: 0 0 5px #00FFFF; /* 添加基础发光效果 */
}

/* 简介 */
#leftbar_overview_author_description {
    font-size: 14px;
    margin-top: -4px;
    opacity: 0.8;
    color:#c21f30;
}

7. 侧边栏名字抖动模块

@keyframes enhancedComboShake {
    /* 第一次抖动 - 第2秒（更频繁） */
    0%, 14%, 16% {
        transform: translateX(0) scale(1);
    }
    15% {
        transform: translateX(-5px) scale(1.05); /* 增加幅度 */
    }

    /* 第二次抖动 - 第4秒 */
    30%, 32%, 34% {
        transform: translateX(0) scale(1);
    }
    31% {
        transform: translateX(6px) scale(1.06);
    }
    33% {
        transform: translateX(-6px) scale(1.06);
    }

    /* 第三次抖动 - 第6秒 */
    46%, 48%, 50% {
        transform: translateX(0) scale(1);
    }
    47% {
        transform: translateY(-4px) rotate(-3deg); /* 增加旋转角度 */
    }
    49% {
        transform: translateY(4px) rotate(3deg);
    }

    /* 第四次抖动 - 第8秒（新增） */
    62%, 64%, 66%, 68% {
        transform: translateX(0) scale(1);
    }
    63% {
        transform: translateX(-8px) translateY(-2px) rotate(-2deg);
    }
    65% {
        transform: translateX(8px) translateY(2px) rotate(2deg);
    }
    67% {
        transform: translateX(-4px) translateY(-4px) rotate(-1deg);
    }

    /* 第五次抖动 - 第10秒（新增） */
    78%, 80%, 82%, 84% {
        transform: translateX(0) scale(1);
    }
    79% {
        transform: translateX(7px) scale(1.08);
    }
    81% {
        transform: translateX(-7px) scale(1.08);
    }
    83% {
        transform: translateX(3px) scale(1.04);
    }

    /* 第六次抖动 - 第11.5秒（新增，快速连续抖动） */
    92%, 93%, 94%, 95%, 96%, 97% {
        transform: translateX(0) scale(1);
    }
    92.5% {
        transform: translateX(-4px) rotate(-2deg);
    }
    93.5% {
        transform: translateX(4px) rotate(2deg);
    }
    94.5% {
        transform: translateX(-3px) rotate(-1deg);
    }
    95.5% {
        transform: translateX(3px) rotate(1deg);
    }
    96.5% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

/* 增强悬停效果 */
#leftbar_overview_author_name:hover {
    animation: none;
    text-shadow: 0 0 20px #00FFFF, 0 0 35px #00FFFF, 0 0 45px #00FFFF;
    transform: scale(1.15);
    background-color: rgba(0, 255, 255, 0.1);
    border-radius: 5px;
    padding: 2px 8px;
}

8. 文章卡片标题动画&移动端优化

该css解决了卡片布局1标题过小，没有居中，（容易让读者点到图片而无法跳转到文章里面）同时鼠标悬浮特效太细微等缺点按需使用

ps:(必须一起配合使用，不然移动端看放大的标题会缺失)

注意：

  • 必须选择Argon主题文章列表卡片布局1

  • 所有文章都要加上特色图不然不加特色图的文章标题会偏小

标题放大和悬浮移动动画

/* 文章标题基础样式和悬停效果 - 修正版 */
.post-header-text-container {
    /* 放大标题 */
    transform: scale(1.25) translateY(-14.5px);
    /* 向上移动 */
    margin-top: -5px;
    /* 文字居中 */
    text-align: center;
    /* 平滑过渡效果 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* 确保元素可以正常变换 */
    display: inline-block;
    /* 添加内边距确保点击区域 */
    padding: 5px 15px;
    /* 保持原有字体颜色 */

}

/* 鼠标悬停时的增强效果 - 修正版 */
.post-header-text-container:hover {
    /* 进一步放大和上移 */
    transform: scale(1.15) translateY(-10px);
    /* 高亮效果 - 不使用渐变，使用纯色阴影 */
    text-shadow: 0 0 8px rgba(131, 101, 253, 0.7);
    /* 添加背景容器效果 */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* 保持字体颜色不变 */
}

移动端优化

/* 针对移动设备优化 */
@media (max-width: 768px) {
  .post-header-text-container {
    /* 减小移动端的缩放比例和上移距离 */
    transform: scale(1.1) translateY(-8px); /* 相比原来的1.25和-14.5px，数值减小了 */
    /* 调整内边距，避免在小屏幕上占用过多空间 */
    padding: 3px 10px;
    /* 可以调整上边距 */
    margin-top: -3px;
  }

  .post-header-text-container:hover {
    /* 在移动端，悬停效果可以更温和，或者与默认状态相同 */
    transform: scale(1.12) translateY(-9px); /* 只做非常细微的变化 */
    /* 可以简化阴影，提升移动端性能 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

9.其他组件

/* Github卡片样式*/
.github-info-card-header a {
    /*Github卡片抬头颜色*/
    color: black !important;
    font-size: 1.5rem;
}
.github-info-card {
    /*Github卡片文字（非链接）*/
    font-size: 1rem;
    color: black !important;
}
.github-info-card.github-info-card-full.card.shadow-sm {
    /*Github卡片背景色*/
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
}

/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}
shi著
argon建站
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Markdown入门教程 (1)

							
							

							
Markdown图片压缩上传图床自动化工具