首先感谢苏晓晴的随机二次元图片API接口
https://www.toubiec.cn/164.html

代码

将body更换随机动漫背景，并固定住，不随鼠标滚轮滑动而滚动。

1
2
3
4
5
6

body {
            background-image: url(https://acg.toubiec.cn/acgurl?cid=acg&return=ssl);//随机API接口
            background-repeat: no-repeat; /*不平铺*/
            background-attachment: fixed; /*北景图片固定*/
            background-position: center 0px; /*居中*/
       }

预览地址

http://tools.kaygb.top/parts/images.php

这是我逛b站的时候看到的一个蛮有意思的css动画，于是我就敲了下来，下面直接上源码
预览地址：文字背景动画效果源码

html部分

1
2

<div id="ease-target"><span id="ease\_go\_top"><i class="fa fa-chevron-up"></i></span>
</div>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 返回顶部
var ease\_go\_top = document.getElementById("ease\_go\_top");
 function ease_scrollToTop(t){
 var x = 0;
 var scroll_Top = document.body.scrollTop || document.documentElement.scrollTop;
 var time = setInterval(function(){
 x+=scroll_Top*30/t;
 if(x>scroll_Top){
 clearInterval(time);
 document.body.scrollTop = 0;
 document.documentElement.scrollTop = 0;
 }else{
 document.body.scrollTop = scroll_Top-x;
 document.documentElement.scrollTop = scroll_Top-x;
 }
 },30)
 }
 ease\_go\_top.onclick = function(){
 ease_scrollToTop(1000);
 }
// end-返回顶部

添加css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#ease\_go\_top{
 position: fixed;
 right: 10px;
 bottom: 10px;
 width: 50px;
 height: 50px;
 text-align: center;
 background: rgba(255,255,255,0.6);
 font-size: 30px;
 cursor: pointer;
 
}
#ease\_go\_top i{
 font-size: 30px;
}

一般站长都会为了浏览器的地址栏小绿锁而配置ssl，配置完成之后可以通过https进行访问，但是却有感叹号显示当前连接不安全。

打开主题目录下的single.php，在合适位置添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12

<?php if(is_single()){ ??>
​

<div class="ease-post-links ease-bg-light">
<div class="ease-next-post-link">
上一篇：<?php previous\_post\_link('%link'); ??></div>
<br></br><div class="ease-previous-post-link">
下一篇：<?php next\_post\_link('%link'); ??></div>
</div>


<?php }else{ }??>

这里解释一下为什么加了判断，因为我的page.php的直接来自single.php,如果不加判断的话回在page页面出现上下篇的链接。 最后在style.css修改样式就可以。

首先写个div和img

<pre data-language="HTML">```markup
<div class="post-thumbnail">
    <img src="https://cdn.eas1.cn/wp-content/uploads/2019/08/qrcode_for_gh_b81da5d60ae4_1280.jpg" />
</div>

``` 这里采用相对定位和绝对定位的方式隐藏多余部分

.post-thumbnail{
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.post-thumbnail img{
    width: 100%;
    height: auto;
    position: absolute;
}

原图

加上css之后的图片