我的博客个性化

添加抖动元素(块级)

添加方式
将以下代码添加至主题目录/source/less/_base.less文件下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.shake:hover {
transition: all 0.3s ease;
}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

使用方法
在标签元素class类中添加shake

添加血小板

添加方式
1.live2d资源目录添加至主图目录/source下
2.在主题目录/layout/_partial/head.ejs文件中引入live2dcss文件

1
2
<!-- 血小板-->
<link rel="stylesheet" href="/live2d/css/live2d.css" />

3.在主题目录/layout/_partial/footer.ejs文件中添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 血小板 -->
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="560" height="500" class="live2d"></canvas>
<div class="hide-button">隐藏</div>
</div>
<!-- 血小板-->
<script type="text/javascript">
var message_Path = '/live2d/'
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
loadlive2d("live2d", "/live2d/model/xiaoban/model.json");
</script>

4.为了移动端更好的阅读效果,请将以下代码添加至主题目录/source/less/_footer.less文件下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media (max-width: @on_phone) {
#footer{
background-color:transparent;
padding-bottom: 180px ;
}
#landlord{
width: 200px;
height: 170px;
.message{
width: 200px;
left: 43px;
top: 15px;
}
}
#live2d{
width: 200px;
height: 170px;
bottom: -80px;
left: 43px;
}
}

添加页面点击小心心特效,文本输入特效、运行时间

添加方式
注意:由于博客使用了防盗链,请将脚本另存为
1.将’https://blog.treelo.xin/cool/clicklove.js'另存在主题目录/source/下
2.将’https://blog.treelo.xin/cool/cooltext.js'另存在主题目录/source/下
3.将’https://blog.treelo.xin/cool/sitetime.js'另存在主题目录/source/下
4.修改sitetime.js参数
5.在主题目录/layout/_partial/footer.ejs文件中引入

1
2
3
4
<!-- 点击特效,输入特效 运行时间 -->
<script type="text/javascript" src="/cool/cooltext.js"></script>
<script type="text/javascript" src="/cool/clicklove.js"></script>
<script type="text/javascript" src="/cool/sitetime.js"></script>

6.在主题目录/layout/_partial/footer.ejs文件中上方添加

1
<div id="sitetime"></div>

 评论



本站使用 Material X 作为主题 , 总访问量为 次 。
隐藏