博客网站中能用到的代码

2020-12-05 56462阅读 20评论

这篇文章介绍了如何使用font awesome图标字体库,使用动态图标,添加网页运行时间,全站变黑白,网页标题的动态效果。

使用font-awesome图标字体库

Font Awesome中文网官网

第一步,只需要导入css文件,就可以在全文使用其图标

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

使用方法

1.在网站中找到自己看上的图标,保存它的名字XXXX

博客网站中能用到的代码  博客网站 美化代码 第1张

2.在需要的位置,插入代码。

<i class="fa fa-home" aria-hidden="true"></i>首页

效果如下

博客网站中能用到的代码  博客网站 美化代码 第2张

使用动态图标

Font Awesome Animation

只需要导入css文件,就可以在全文使用其动态特效图标

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">

使用方法

1.在网站中找到自己看上的动态效果,保存它的名字faa-YYYY,结合font awesome图标

2.在需要的位置,插入代码

<span class="faa-parent animated-hover"><i class="fa fa-home faa-wrench animated" aria-hidden="true"></i>首页</span>

效果如下(图片不是动图所以图标没有动)

博客网站中能用到的代码  博客网站 美化代码 第3张

网页运行时间

<span id="webtime"></span><!-- js --><script type="text/javascript">function show_runtime() {        window.setTimeout("show_runtime()", 1000);        X = new Date("12/31/2019 23:59:59");        Y = new Date();        T = (Y.getTime() - X.getTime());        M = 24 * 60 * 60 * 1000;        a = T / M;        A = Math.floor(a);        b = (a - A) * 24;        B = Math.floor(b);        c = (b - B) * 60;        C = Math.floor((b - B) * 60);        D = Math.floor((c - C) * 60);        document.getElementById("webtime").innerHTML = "网站已运行了: " + A + "天" + B + "小时" + C + "分" + D + "秒"    }    show_runtime();</script>

效果如下

博客网站中能用到的代码  博客网站 美化代码 第4张

全站变黑白

适合在特殊时间使用,兼容所有主流浏览器,直接添加到header或者博客自定义CSS里就可以生效了,开了缓存的记得清除下~

html {    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

网页标题的动态效果

<script>jQuery(document).ready(function() {    function c() {        /* 排除首页(记得自行修改下首页地址) */	if (location.href != "https://justlovesmile.top/") { document.title = document[a] ? "(つェ⊂)誒呀→《" + d + "》" : "(*´∇`*) 咦好了→《" + d + "》" }    }    var a, b, d = document.title;    "undefined" != typeof document.hidden ? (a = "hidden", b = "visibilitychange") : "undefined" != typeof document.mozHidden ? (a = "mozHidden", b = "mozvisibilitychange") : "undefined" != typeof document.webkitHidden && (a = "webkitHidden", b = "webkitvisibilitychange");    "undefined" == typeof document.addEventListener && "undefined" == typeof document[a] || document.addEventListener(b, c, !1)});</script>

效果如下

博客网站中能用到的代码  博客网站 美化代码 第5张

文章版权声明:除非注明,否则均为小宜技术猫原创文章,转载或复制请以超链接形式并注明出处。

发表评论

表情:
评论列表 (有 20 条评论,56462人围观)
网友昵称:小宜技术猫
小宜技术猫V博主19楼
01-30 来自广东 回复
2
网友昵称:小宜技术猫
小宜技术猫V博主18楼
01-30 来自广东 回复
1
网友昵称:小宜技术猫
小宜技术猫V博主17楼
01-04 来自广东 回复
(*^ω^*)
网友昵称:白鸽
白鸽V铁粉16楼
01-03 来自上海 回复
大佬!!!想要自动获取备案号的api源码[Frown]
网友昵称:小宜技术猫
01-04 来自广东 回复
@白鸽 暂时不发布
网友昵称:a以苏H.
a以苏H.V铁粉15楼
2021-07-18 来自天津 回复
非常不错[Facepalm]
网友昵称:萧凱
萧凱V铁粉14楼
2021-01-07 来自山东 回复
66666
网友昵称: Qwer
 QwerV铁粉13楼
2020-12-28 来自广西 回复
带走了
网友昵称:Qing
QingV铁粉12楼
2020-12-28 来自甘肃 回复
我来看看看
网友昵称:Aa卡卡网络传媒
Aa卡卡网络传媒V铁粉11楼
2020-12-24 来自安徽 回复
感谢
网友昵称:晨曦夕
晨曦夕V铁粉10楼
2020-12-21 来自湖南 回复
看看
网友昵称:凌轩
凌轩V铁粉9楼
2020-12-19 来自重庆 回复
拿走了谢谢
网友昵称:阿
V铁粉8楼
2020-12-18 来自浙江 回复
又来一次
网友昵称:小云川吖
小云川吖V铁粉7楼
2020-12-16 来自广东 回复
拿走了谢谢
网友昵称:w112599261
w112599261V铁粉6楼
2020-12-13 来自河南 回复
拿走
网友昵称:阿只
阿只V铁粉地板
2020-12-09 来自浙江 回复
看一下摸一下
网友昵称:colayun
colayunV铁粉凉席
2020-12-09 来自北京 回复
想你想你想你想你
网友昵称:阿只
阿只V铁粉板凳
2020-12-05 来自浙江 回复
看看看
网友昵称:328
328V铁粉椅子
2020-12-05 来自江苏 回复
牛批
网友昵称:ak
akV铁粉沙发
2020-12-05 来自广东 回复
看看
取消
微信二维码
微信二维码
支付宝二维码