一、前言

当看到小灰灰博客时,感到亲切与喜爱 

喜欢其滚动时幻灯片式加载和清新的背景图

起初只是想要它半透明的顶栏

找到了博客园-护城河的文章

wordpress主题dux全站半透明效果

实现效果:网站显示除背景图片外,其余半透明效果,后台没有变化。

环境:wordpress4.9.7、centos7、lnmp1.5、主题dux

注意:其rgba(0,0,0,0.5)应改为rgba(255,255,255,0.5)

 

我跃跃欲试,觉定在本地网站试水

如何在电脑本地安装WordPress网站?

二、网站半透明化

(dux主题)备份文件:主题目录/css/main.css

然后开始折腾,右键元素-检查

找class,改样式,主要是背景色

background-color: rgba(255,255,255,0.5)
/*0.5表示透明度为50%*/

不断打磨样式,最终效果:

个人感觉还行,这里说下细节

1、顶栏半透明及彩条

.header{
    background:rgba(255,255,255,0.78)url('https://www.jishusongshu.com/images/dytopbar.gif') repeat-x 0 100%;
    }

2、网站鼠标指针

body{cursor:url(https://www.jishusongshu.com/wp-content/uploads/2020/02/normal3.png), default;}
a:hover{cursor:url(https://www.jishusongshu.com/wp-content/uploads/2020/02/link3.png), pointer;}

更多指针:精美网站鼠标指针,你见过多少?

3、滚动条样式

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background-color: rgba(73,177,245,.2);
    border-radius: 2em;
}
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 2em;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
::-moz-selection {
    color: #fff;
    background-color: #49b1f5;
}

三、其他美化

1、网站背景图

body{
	background-image:url('https://www.jishusongshu.com/bing/api');
	background-repeat:no-repeat;background-attachment:fixed;
}

2、网页加载动画

(1)加载动画插件

笔者找了很多,最后推荐WP Smart Preloader

选择自定义动画,填入自定义的html和css

(2)免费下载素材

推荐一个网站:https://www.sucaiq.com/

(3)修改插件样式

为使加载动画呈半透明,做如下修改

wp-smart-preloader/assets/css/wsp-front-preloader.css

.smart-page-loader {
...
    background: rgba(0,0,0,0.5);
...
}

为使夜间模式(插件wp-dark-mode)仍半透明,我们忽略夜间模式适配:

wp-smart-preloader/assets/js/wsp-main-script.js

<div class="smart-page-loader wp-dark-mode-ignore"></div>

四、后记

其他主题的修改类似于此,感兴趣可以试一试。

已换其他主题,如需要dux的main.css可发邮件。