本文共 881 字，大约阅读时间需要 2 分钟。

这篇文章介绍了如何使用font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效，之前还介绍过打字机效果，可以看看

>使用font awesome图标字体库

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

第二步，使用方法：

1.在网站中找到自己看上的图标,保存它的名字XXXX 2.在需要的位置,插入<i class="fa fa-XXXX" aria-hidden="true"></i>

首页

效果如下：

>使用动态图标

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

第二步，使用方法：

1.在网站中找到自己看上的动态效果,保存它的名字faa-YYYY，结合font awesome图标 2.在需要的位置,插入<span class="faa-parent animated-hover"><i class="fa fa-XXXX faa-YYYY" aria-hidden="true"></i></span>

首页

>网页运行时间

参考自

>全站变黑白

参考自

适合在公祭日哀悼使用，兼容所有主流浏览器，直接添加到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);}

>鼠标点击特效

>网页标题的动态效果

参考自

效果如下：

>网页樱花特效

参考自

只需要导入js就可以了

>鼠标触动音乐特效

参考自

经过我

转载地址：http://fbgwi.baihongyu.com/