Pale Blue Dot

  • 首页
  • 随想
  • 爱好
  • 友链
  • 关于
HHJU
不过是些鸡零狗碎
  1. 首页
  2. 爱好
  3. 正文

是心动啊

2022年4月19日 612点热度 0人点赞 0条评论

(苹果浏览器需要刷新页面才能显示音乐播放栏)

记得在某个程序员的博客里看到一句话:年纪大了,反而开始喜欢花里胡哨的东西。

我自己的博客一直力求干净整洁,但是时间久了总觉得有些单调。

今天就给底部运行时间统计处加一个跳动的小心心。

实现的方式有很多,我用的是Font Awesome 4.7图标库。(最新版本6.1 pro,需要可以下载:百度网盘,提取码:r5y0;阿里云盘,提取码:s24r)

为了实现动态效果,还需要去font-awesome-animation下载css/font-awesome-animation.min.css文件。

下载完成以后上传到主题的static文件夹,

接下来在主题的header.php文件里加入相关css文件:

<link href="<?php bloginfo('template_url'); ?>/static/font-awesome/css/font-awesome.min.css?<?php echo THEME_DB_VERSION; ?>" type="text/css" rel="stylesheet">
<link href="<?php bloginfo('template_url'); ?>/static/font-awesome/css/font-awesome-animation.min.css?<?php echo THEME_DB_VERSION; ?>" type="text/css" rel="stylesheet">

最后,在需要的地方插入代码:

<i class="fa fa-heartbeat faa-pulse animated faa-fast" aria-hidden="true" style="color:red;" id="myheart"></i>

实现效果如下:

怎么样,这个心跳是不是充满活力?

当然,如果觉得跳的太快,身体受不了的话,可以把faa-fast改成slow,稳重一些:

标签: css font awesome 图标 心跳 花里胡哨
最后更新:2022年4月20日

harley

直男,属兔,80后。

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

COPYRIGHT © 2025 H.H.J.U. ALL RIGHTS RESERVED.

Theme Kratos

豫ICP备2021005277号-2

本站已运行: