博客前端美化记录(持续更新)
0x00 前言
俗话说的好，不会写前端的程序员不是好黑客，我个人对于前端也是非常感兴趣的。抱着对前端的兴趣，我尝试着学过一点点前端知识，无奈从技术和审美两方面的不过关 ，但这依然阻挡不了我学习前端的热情。 本篇文章记录我博客的一些简单的美化，如果能帮到大家，那将是我的荣幸 ，本文章长期更新
博客信息
程序：Typecho
主题：Cuteen
Version：4.1
作者：@Veen zhao
0x01 底部添加网站运行时间
效果：
首先在function.php中添加以下代码
// 设置时区
date_default_timezone_set('Asia/Shanghai');
/**
* 秒转时间，格式 年 月 日 时 分 秒
*
* @author Roogle
* @return html
*/
function getBuildTime(){
// 在下面按格式输入本站创建的时间
$site_create_time = strtotime('2010-09-10 00:00:00');
$time = time() - $site_create_time;
if(is_numeric($time)){
$value = array(
"years" => 0, "days" => 0, "hours" => 0,
"minutes" => 0, "seconds" => 0,
);
if($time >= 31556926){
$value["years"] = floor($time/31556926);
$time = ($time%31556926);
}
if($time >= 86400){
$value["days"] = floor($time/86400);
$time = ($time%86400);
}
if($time >= 3600){
$value["hours"] = floor($time/3600);
$time = ($time%3600);
}
if($time >= 60){
$value["minutes"] = floor($time/60);
$time = ($time%60);
}
$value["seconds"] = floor($time);
echo ''.$value['years'].'年'.$value['days'].'天'.$value['hours'].'小时'.$value['minutes'].'分';
}else{
echo '';
}
}然后在要输出的地方调用以下代码：
<?php getBuildTime(); ?>0x02 侧边栏添加个人主页
效果：
首先在后台自定义css样式中添加以下样式：
/**sidebarcss**/
.sidebar-box-two{
min-height:unset;
}
.social{
display: flex;
justify-content: space-around;
}
.social img {
width: 40px;
height: auto;
margin: 20px 0;
border-radius: 50px;
}
.texiao:hover{
transform: scale(1.2);
transition: all .5s;
}然后在cuteen主题目录下base/sidebar.php中30行左右，侧边栏个人信息div下面添加以下代码（根据个人信息进行修改）：
<div class="sidebar-box sidebar-box-two">
<div class="social">
<a href="https://space.bilibili.com/35199034" rel="nofollow" target="_blank"><img src="https://imgcdn.fei05.xyz/imgs/2020/10/87c3e3c0f3c8439c.png"></a>
<a href="https://github.com/Y5neKO" rel="nofollow" target="_blank" ><img src="https://imgcdn.fei05.xyz/imgs/2020/10/0c47209a8a787a48.png"></a>
<a href="https://twitter.com/ys_neko" rel="nofollow" target="_blank" ><img src="https://imgcdn.fei05.xyz/imgs/2020/10/86c0facc6d98b96a.png"></a>
<a href="https://user.qzone.qq.com/1727058834" rel="nofollow" target="_blank" ><img src="https://imgcdn.fei05.xyz/imgs/2020/10/642c35e8fb893b26.png"></a>
</div>
</div>0x03 侧边栏添加仿Mac小圆点
效果：
首先，我们在主题css文件中搜索sidebar-box选择器
一共有三处，我们把每一处的样式都复制一份，然后将选择器命名为sidebar-box-2，这一步是为了防止后面要用到的before伪元素影响其他使用了sidebar-box选择器的样式
改完css后，我们在后台自定义css样式中添加以下样式：
/**自定义小圆点**/
.sidebar-box-2:before {
display:inline-block;
z-index:1;
content:" ";
position:relative;
-webkit-border-radius:50%;
border-radius:50%;
background:#f92900!important;
width:12px;
height:12px;
-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;
box-shadow:20px 0 #fbc606,40px 0 #448ef6;
float:right;right:55px;top:35px;
border-color:transparent;
margin-top:-15px;
}添加完后我们只要在sidebar.php中需要使用此样式的元素中把sidebar-box改成调用sidebar-box-2这个class就行了（注意不要删掉其他class），例如我在最新回复这里调用：
0x04 侧边栏个人信息实时显示哔哩哔哩粉丝数
效果：
这里可以先参考我之前的两篇文章：
Cuteen主题的设置也大同小异；
首先在任意包含主页的php文件中添加以下代码，用以解析api返回的json数据
<?php
//哔哩哔哩粉丝获取
$data = file_get_contents("https://api.bilibili.com/x/relation/stat?vmid=35199034");
$arr = json_decode($data,true);
?>然后在sidebar.php中27行左右，侧边栏个人信息内添加以下代码：
<div class="sidebar-tags-number"><a href="https://space.bilibili.com/35199034" target="_blank">粉丝<?php echo($arr["data"]["follower"]);?></a></div>因为直接添加会因为字符过长导致排成两行，我们可以在描述文字后面添加一个br换行符来解决
这样的话还会有一个超链接的下划线，可以使用以下样式取消超链接的下划线
<!--取消a标签下划线-->
<style type="text/css">a {text-decoration:none}</style>0x05 鼠标样式美化
效果：
见当前博客
直接在后台自定义css样式中添加以下样式即可（可以下载自己要用的鼠标样式）：
/**普通指针样式**/
body{
cursor:url(https://cdn.jsdelivr.net/gh/xb2016/kratos-pjax@0.4.4/static/images/cursor.cur),default;
}
/**链接指针样式**/
a:hover{
cursor:url(https://cdn.jsdelivr.net/gh/xb2016/kratos-pjax@0.4.4/static/images/pointer.cur),pointer;
}0x06 彩色动态打字机效果
效果：
首先在任意位置添加或引用js：
<script>
var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(),
l.style.color = t(),
n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step--:(c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
r.textContent = c.text,
r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
setTimeout(i, d)
}
var l = "",
o = ["Walk between the black and white.", ].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>然后在你想要输出的字体元素上引用chakhsu这个id就行（class请自行匹配），例如我在主页标题下面输出此效果：
<p id="chakhsu" class="mt-3 h5 text-white d-flex"></p>
0x07 网站动态标题
效果：
在任意引用位置或后台底部自定义内容添加以下js代码：
<!--动态标题-->
<script>
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
} else {
document.title = "(ฅ>ω<*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>0x08 头像呼吸光环及旋转效果
效果：
在后台自定义css样式中添加以下样式：
/**头像旋转呼吸光环**/
.friends-img.mr-2.lazy.loaded:hover{
transform:rotate(360deg);
}
.comment-avatar:hover{
transform:rotate(360deg);
}
.sidebar-comment-avatar.mr-1:hover{
transform:rotate(360deg);
}
.friends-img.mr-2.lazy.loaded,.comment-avatar,.sidebar-comment-avatar.mr-1 {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: all 0.5s;
}
@keyframes light {
0% {
box-shadow: 0 0 4px #ff1354;
}
25% {
box-shadow: 0 0 16px #1ebbff;
}
50% {
box-shadow: 0 0 4px #0ed39f;
}
75% {
box-shadow: 0 0 16px #4fe7f4;
}
100% {
box-shadow: 0 0 4px #f35444;
}
}0x09 文章和图片圆角和阴影效果
效果：
在后台自定义css样式中添加以下样式（圆角弧度和阴影大小可修改）：
/**圆角阴影**/
img.lazy.loaded{
border-radius: 15px;
box-shadow: darkgrey 0px 0px 5px 5px;
}
.post-ctx,.post-comment.mt-4,.sidebar-box {
background-clip: border-box;
border-radius: 15px;
box-shadow: -2px 8px 17px 0 rgb(157 167 255 / 36%), 0 6px 20px 0 rgb(255 255 255 / 19%);
}
.sidebar-banner{
border-radius: 20px 20px 0px 0px;
}0x10 点赞打赏图标跳动（要恰饭的嘛）
效果：
见文章底部
后台自定义css样式添加以下样式：
/**点赞打赏跳动**/
#like.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex,#headingMoney.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}0x11 页面元素跳动
效果：
见本博客Logo效果
在后台自定义css样式添加以下样式：
/**页面元素抖动**/
.Pshake{
display: inline-block;
will-change: transform; /*可以删除*/
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation: Pshake_Crazy 1s ease-in-out infinite;
animation: Pshake_Crazy 1s ease-in-out infinite;
}
@keyframes Pshake_Crazy{
10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);}
20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);}
30%{transform:translate(1.5px,0.5px) rotate(0.5deg);}
40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);}
50%{transform:translate(2.5px,1.5px) rotate(1.5deg);}
60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);}
70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);}
80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);}
90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);}
0%,100%{transform:translate(0,0) rotate(0);}
}然后在需要此效果的元素里调用Pshake类就行了
0x12 给文字添加抖音效果
效果：
见本博客大标题效果
首先通过css实现静态效果，通过css选择器添加text-shadow属性就行；
在后台主题自定义css样式添加以下样式：
/**抖音文字**/
.tiktok{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}静态效果弄出来了，我们通过css设计一个动画来达到动态效果：
@keyframes shake-it{
0%{
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25%{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50%{
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100%{
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}然后在需要此效果的元素中添加tiktok类就行了
0x13 给网站挂一个灯笼
因为快要过年了嘛，所以我们可以给自己的网站也挂上灯笼，看上去多喜庆
效果：
见我的博客顶部
在主题的footer.php文件的body标签以内添加以下代码，css+html代码如下：
<!-- 灯笼样式开始 -->
<style>
@media only screen and (max-width: 760px) {
.deng-box, .deng-box1 {
display:none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.right {
float: left!important;
}
}
.deng-box {
position: fixed;
top: 20px;
left: 10px;
z-index: 3;
}
.deng-box1 {
position: fixed;
top: 20px;
right: 10px;
z-index: 3;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: 华文行楷;
font-size: 26px;
color: #dc8f03;
font-weight: bold;
line-height: 44px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
</style>
<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>
<!-- 元宵节灯笼样式结束 -->本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020年12月18日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
