Butterfly主题美化-页面毛玻璃效果

最新推荐文章于 2025-05-14 16:04:16 发布

原创

最新推荐文章于 2025-05-14 16:04:16 发布 · 2.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

本文介绍了一种使用自定义CSS文件来美化Hexo博客的方法，包括实现毛玻璃效果、搜索框美化、滚动条及背景渐变动画等，适用于提高个人网站的视觉体验。

文章目录

一、基本设置
- 1、创建css文件
- 2、引入
二、美化
三、最后效果
- **想要查看最后效果可以去我的博客：[淞的博客](https://uniqueyou.github.io/)**

一、基本设置

1、创建css文件

创建一个mycss.css文件移动到\themes\butterfly\source\css目录下。

2、引入

inject在的butterfly.yml中或者自定义的_config.butterfly.yml中

按以下方式引入css文件，不管以上哪种方式都以下面代码方式引入。

inject:
  head:
    - <link rel="stylesheet" href="/css/mycss.css">

二、美化

在创建的mycss.css文件中加入以下内容

1、所有页面毛玻璃效果

/*所有页面实现毛玻璃特效*/
#aside-content{
   
   
    background: rgba(255,255,255,0);
}

#aside-content > .card-widget:first-child {
   
   
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

#aside-content .card-widget {
   
   
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

.layout > div:first-child:not(.recent-posts) {
   
   
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

#recent-posts > .recent-post-item {
   
   
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

2、标题栏毛玻璃效果

/*标题栏*/
#page-header.nav-visible #nav {
   
   
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(50px);
}

3、搜索栏毛玻璃效果

/*搜索框美化*/
.search-dialog {
   
   
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
    border-radius: 0px;
}

#search-mask {
   
   
    background: rgba

最低0.47元/天解锁文章