博客网站中能用到的代码
这篇文章介绍了如何使用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
2.在需要的位置,插入代码。
<i class="fa fa-home" aria-hidden="true"></i>首页
效果如下
使用动态图标
只需要导入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>
效果如下(图片不是动图所以图标没有动)
网页运行时间
<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>
效果如下
全站变黑白
适合在特殊时间使用,兼容所有主流浏览器,直接添加到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>
效果如下
文章版权声明:除非注明,否则均为小宜技术猫原创文章,转载或复制请以超链接形式并注明出处。
发表评论