wordpress系列网站特效

前言

上一章讲解了wordpress的安装和配置,想必大家已经都进入了wordpress后台在迫不及待的建立自己的网站了吧!!!

本文将分享一些个人比较喜欢的网站特效,也是从其他各大博主哪里收集来的啦,在这里安利一下本站用的solstice23大神的Argon主题还有Bensz大神的博客很多特效都是参考的他的博客呢,下面的特效演示也是使用本主题演示.不过一般js/css/php的网站都是可以通用的啦!

具体效果大家可以参考一下我的博客,相比其他博客还是有很多的特效的,这些特效虽然没什么用途主要是好看吖(颜值控实锤),以后新鲜劲过了,说不定都会关掉,不过目前还是保留 (～￣▽￣)～

如果你有什么问题,可以评论区留言啊,我可以依据邮件第一时间知道大家的述求哦!!!

特效用到的css/js文件存放(重要)

下载js/css文件

有一大部分特效是需要引用js/css文件的,我们需要先将这些js/css文件下载下来,并可以通过url访问到以后然后通过编写footer来引用让他生效,js/css文件已经存放到我的云盘了,大家可以在左侧站点概览里面有一个百度云盘/ali云盘里面进行下载

存放js/css文件

下载完成之后,我们只需要使用ftp工具将这些文件上传到我们服务器中即可,不过可能大家有些服务器是个人使用性能和带宽都不是很高,有些js/css文件很大读取会很慢,这样子会大大拖慢网站速度,还会增加服务器的载荷.所以我建议大家去申请一个cdn对这些js/css文件进行托管加速,而不是直接放到自己服务器上进行请求...

如果大家使用cdn托管的话,就可以跳过了...直接使用cdn的文件地址即可

#在wordpress根目录下新建一个文件夹用来存放这些css/js文件
cd /usr/share/nginx/html/wordpress/  #wordpress根目录路径
mkdir /jscss #新建一个jscss文件夹
chmod -R 755 jscss #配置权限,然后将css/js文件都上传到这里,以便后面特效代码进行引用.
touch test.txt #新建一个测试txt用来测试url是否能成功访问到该文件
echo "test" >> test.txt

必须得wordpress目录下哦,因为这个目录已经在nginx中配置过反向代理了,没有的可以参考wordpress的安装和配置

上传完成以后,测试一下是否能成功访问 : http://[自己的站点ip/域名]/jscss/test.txt ,如果页面显示 test就可以了

下面也就会依据该css和js地址进行配置了

网站页脚显示运行时间、耗时和占用内存

#先cd进入我们wordpress的主题目录 [你存放wordpress文件的路径]/wordpress/wp-content/themes 下面的每一个文件夹对应的就是我们的主题了,
cd [你存放wordpress文件的路径]/wordpress/wp-content/argon #我们要修改的就是本文件夹下的footer.php
vim footer.php

<!--耗时及占用内存开始-->
                                        <span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
                                        <script type="text/javascript">
                                        function NewDate(str) {
                                        str = str.split('-');
                                        var date = new Date();
                                        date.setUTCFullYear(str[0], str[1] - 1, str[2]);
                                        date.setUTCHours(0, 0, 0, 0);
                                        return date;
                                        }
                                        function momxc() {
                                        <!--这里要改成自己博客的诞生时间-->
                                        var birthDay =NewDate("2023-04-01");
                                        var today=new Date();
                                        var timeold=today.getTime()-birthDay.getTime();
                                        var sectimeold=timeold/1000
                                        var secondsold=Math.floor(sectimeold);
                                        var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
                                        var daysold=Math.floor(e_daysold);
                                        var e_hrsold=(daysold-e_daysold)*-24;
                                        var hrsold=Math.floor(e_hrsold);
                                        var e_minsold=(hrsold-e_hrsold)*-60;
                                        var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
                                        document.getElementById("momk").innerHTML = "本站已安全运行："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
                                        setTimeout(momxc, 1000);
                                        }momxc();
                                        </script>
                                        <style>
                                        #momk{animation:change 10s infinite;font-weight:800; }
                                        @keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
                                        </style>
                                        <?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
                                        <!--耗时及占用内存结束-->

加完代码记得 :wq 保存退出,效果如下

文字颤抖

首先我们要在footer.php文件中插入css脚本

<!--文字抖动特效-->
<link href="http://[自己的站点ip/域名]/jscss/myface.css" rel="stylesheet">

然后再站点后台的argon主题设置的页脚来增加一下代码

<div class=""><span class="my-face">Copyright ©2023 版权所有 小沐恩୧(๑•̀⌄•́๑)૭</span></div>

然后就可以去站点看一下效果了

全页雪花樱花特效

需要的文件 mobile-detect.js , xiaxue.js , yinghua.js , 0.gif , 1.gif , 2.gif , 3.gif下载并上传到jscss文件夹中

vim footer.php

<!--全页特效开始-->
<script src="http://[自己的站点ip/域名]/jscss/mobile-detect.js"></script>
<!-- https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur -->
<script type="text/javascript">
    // 设备检测
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone();
    if(!md.phone()){
        if(!md.tablet()){
        // 雪花
    $.getScript("http://[自己的站点ip/域名]/jscss/xiaxue.js");

        // 樱花
    $.getScript("http://[自己的站点ip/域名]/jscss/yinghua.js");

        document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')
        }
    }
</script>
<!--全页特效结束-->

鼠标指针特效(移动的仙女棒)

来源于Bensz的argon主题的鼠标移动特效,好喜欢就copy过来了

#将云盘中的fairyDustCursor.min.js文件下载上传到jscss文件夹中,然后再footer.php中引用即可
$.getScript("http://[自己的站点ip/域名]/jscss/fairyDustCursor.min.js");#放到上面雪花樱花的引用代码下即可

鼠标样式只需要在footer.php 文件的之前插入以下代码就可,需要提前下载Arrow.cur , Hand.cur , IBeam.cur文件到jscss文件夹中

<style type="text/css">
.main-content img,body{cursor:url(http://[自己的站点ip/域名]/jscss/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(http://[自己的站点ip/域名]/jscss/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(http://[自己的站点ip/域名]/jscss/IBeam.cur),auto}
</style>

卡片3D特效

来源于Bensz的argon主题,感觉这样子可以使站点更加生动就copy过来了

在footer.php文件的之前插入以下代码,前提需要下载 vanilla-tilt.js 到jscss文件夹中

<!--鼠标悬停3D效果start-->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>

<!--2.JS脚本-->
<script type="text/javascript" src="http://[自己的站点ip/域名]/jscss/vanilla-tilt.js"></script>

<!--3.动作-->
<script type="text/javascript">
    // 设备检测。依赖前述mobile-detect项目。
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone();
    if(!md.phone() && !md.tablet()){
        window.pjaxLoaded = function(){
            // 正文卡片
            VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })

            // 说说卡片
            VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
        }
        $(window.pjaxLoaded);
        $(document).on('pjax:end', window.pjaxLoaded);
    }
</script>
<!--鼠标悬停3D效果end-->

鼠标点击文字特效

也是copy Bensz的argon主题, 比较简单在footer.php文件的之前插入以下代码就可以了

<!--鼠标名单开始-->
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
    $("body").click(function(e) {    
        var a = new Array("❤身体健康❤", "❤万事如意❤", "❤心想事成❤", "❤笑口常开❤", "❤年年有余❤", "❤金榜题名❤", "❤前程似锦❤", "❤一帆风顺❤");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            // "z-index": -1,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
    });
</script>
<!--鼠标名单结束-->

里面文字大家可以自定义哦

文字撒花特效

在footer.php文件的末尾之前加入以下代码,需要提前下载 input-with-fire.js 到jscss文件夹中

<!--网站输入效果开始-->
<script src="http://[自己的站点ip/域名]/jscss/input-with-fire.js"></script>

网站字体

在站点后台的外观-自定义-额外CSS里面添加以下代码,前提需要下载13.woff2字体到jscss文件夹中

/*========字体设置===========*/

@font-face{
    font-family:myFont;
    src:url(http://[自己的站点ip/域名]/jscss/13.woff2) format('woff2')
}
body {
font-family: "myFont" !important
}

这里的[13.woff2]字体是汉唐仪美人体[并非商用字体],个人博客是公开的,最好还是使用[免费的商用字体],在字体天下等网站里免费下载,通过转换网站转换成woff2格式文件即可

额外CSS

我的额外css,大家可以根据自己喜好来做取舍

/*========字体设置===========*/

@font-face{
    font-family:myFont;
    src:url(https://cloud.sangmuen.com/font/13.woff2) format('woff2')
}
body {
font-family: "myFont" !important
}

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

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

/*正文字体大小（不包含代码）*/
.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
}

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

/*文章或页面的正文颜色*/
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;
}

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

/*左侧栏层级置于上层*/
#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: 1.2rem;
    font-family: 'myFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1.1rem;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}

/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 0rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 24px;
}

悼念色

遇到国家重要人物逝世、抗战纪念日等重大时点，为了表示悲悼，很多网站会选择全黑白的配色。效果如下

在额外CSS的最下面添加以下代码


/*网站黑白色（悼念）*/
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

春节灯笼挂件

在footer.php文件的末尾之前插入以下代码,需要下载deng.css文件到jscss文件夹下

<!--春节灯笼-->
<link href="http://[自己的站点ip/域名]/jscss/deng.css" rel="stylesheet">
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">快乐</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

小结

以上就是我在各大神博客里找到的我喜欢的一些样式了,也在此声明一下以上的代码,JS,CSS都不是原创都是copy其他博客大神的开源代码.

接下来就会整理给大家分享一下使用cdn加速网站的教程,其中有什么问题可以评论区留言提问哦.

敬请期待!!!

前言