个人博客美化(四) freecrazy 2021-12-29T21:06:59+08:00 754

添加网站运行时间、鼠标效果、图标效果

一、前因

接着美。

二、鼠标图标

有了鼠标特效,不整个鼠标图标,就如同人头戴着狗头面具,有人喜有人厌,为迎合大众,还是戴个人皮面具吧。

网页的鼠标原理很简单(搜了半天资料才敢写这个“简单”二字),使用css的cursor属性引用图标即可。

书到用时方觉有,以前玩腻的window美化网站发挥效用了——https://zhutix.com/tag/cursors/

找个你喜欢的鼠标图标下载下来,解压后复制进你的网站中,尽量使用cur文件,兼容性强点。

在你的css文件中,加入下面代码搞定。

* {
  cursor: url("./normal.cur"), auto !important;
}

效果,嗯,截图半天发现鼠标截不进来,有兴趣的,移步这里查看吧——https://blog.freecrazy.cn

三、网页图标

默认的一些图标可能没有长在你的看点上,找些好看的图标把它咔嚓掉。

你可以用阿里的或者bootstrap等,我这个hugo主题用的是semantic,去到官网查看使用方法,一般官网都会有具体的说明的。

我们只需要把图标 <i class="save icon"></i> 中的 class 改成文档中的值即可。

四、网站运行时间

js中添加代码

// start sitetime

function siteTime() {
  // 建站时间 2021.10.22 18:30:33 改成自己的
  start = new Date("10/22/2021 18:10:33");
  now = new Date();
  all_second = (now.getTime() - start.getTime());
  day_second = 24 * 60 * 60 * 1000;
  day_num = all_second / day_second;
  day = Math.floor(day_num);
  hour_num = (day_num - day) * 24;
  hour = Math.floor(hour_num);
  minute_num = (hour_num - hour) * 60;
  minute = Math.floor(minute_num);
  second = Math.floor((minute_num - minute) * 60);

  document.getElementById("sitetime").innerHTML = "本站运行时间: " + day + "天" + hour + "小时" + minute + "分" + (second > 9 ? second : "0" + second) + "秒"
}

setInterval(siteTime, 1000);

//end sitetime

网站中找个显示地方添加 <span id="sitetime">载入运行时间...</span> 搞定。

效果:

五、总结

有些效果玩着玩着就不想要了,有些主题折腾着折腾着就发现还是原版好看,有些人走着走着就错过了拐角点(让你玩手机)。

收工!

© 2021 - 2024 闲余悟道

载入运行时间...

avatar
关于我

癫狂乐天,狂放不羁,叛世逆俗,天纯不可一世。

跑酷

游戏玩腻,自个寻的,只喜纯跑,不喜炫技

滑板

身处异乡,未找到跑酷伙伴,转投滑板,oli练到死

骑行

通勤会的,通着通着成了爱好,不攀里数,不懂车构,菜腿一枚

爬山

老妈生错了生肖,喜欢在台阶或石头上蹦跶

设计

大学学的,PS效率实用流

代码

培训得的,已弃坑,得益于此,软件玩得起飞,如本博客内容

剪辑

无聊学的,人生苦短,想学的太多,学会罢了,我应该会了了吧……

写作

读书多了自然而然就……he,tui,人人都会,正在精进中

独自环过岛

海南岛,9天骑行,一人一包一帐篷,事故故事一堆堆

只身入过藏

心之所向,21点的太阳妙不可言

万里路

不少,如……

万卷书

微多,如……


人生苦短,繁华三千,可纵情声色,亦可摇桨泛舟。

碎年流光,若都平淡如水,岂非虚度一遭。

波澜不惊的一生虽不可恨,但数载光阴就历尽沧桑的生活应该更畅快。

别试图在文章末尾评论处留言,那只是摆设,不过若是打赏,我定会收到心意。联系方式本页社交链接中有猫腻。

清心决

心若冰清,天塌不惊。

万变犹定,神怡气静。

尘垢不沾,俗相不染。

虚空甯宓,浑然无物。

无有相生,难易相成。

份与物忘,同乎混涅。

天地无涯,万物齐一。

飞花落叶,虚怀若谷。

千般烦忧,才下心头。

即展眉头,灵台清幽。

心无挂碍,意无所执。

解心释神,莫然无魂。

水流心不惊,云在意俱迟。

一心不赘物,古今自逍遥。

自由转载-非商用-转载注明出处即可。