一、前言

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

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

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

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

wordpress主题dux全站半透明效果

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

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

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

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

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

二、网站半透明化

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

找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(http://cdn.jishusongshu.com/images/2020/02/normal3.png), default;}
a:hover{cursor:url(http://cdn.jishusongshu.com/images/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）免费下载素材

推荐可免费下载素材的网站>>素材圈

（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可发邮件。

分享到：

赞(0) 打赏