是心动啊 – H.H.J.U

是心动啊

/ 0评 / 2

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

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

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

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

实现的方式有很多,我用的是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,稳重一些:

            首次发布于  2022-04-19 18:02 星期二

发表评论

您的电子邮箱地址不会被公开。

普人特福的博客cnzz&51la for wordpress,cnzz for wordpress,51la for wordpress