网站美化:输入框打字冒光特效、头像特效等博客特效

  • 2
  • 307 °C
  • A+
所属分类:网站建设
摘要

感觉网站太单调?对于WordPress用户来说,如何为自己的博客添彩呢?本文介绍几个好玩的小东西:输入框打字冒光特效、纯CSS loading特效、头像旋转特效。

网站美化:输入框打字冒光特效、头像特效等博客特效

一、前言

感觉网站太单调?对于WordPress用户来说,如何为自己的博客添彩呢?本文介绍几个好玩的小东西。

  1. 输入框打字冒光特效
  2. 纯CSS loading特效
  3. 头像旋转特效

二、使用方法

1、输入框打字冒光特效

效果展示如下图所示:

网站美化:输入框打字冒光特效、头像特效等博客特效

使用方法:

下载activate-power-mode.js:文件在文章末尾下载

如果是WordPress网站,可以先上传activate-power-mode.js到当前主题目录/assets/js文件夹中,然后打开主题的footer.php,并在</body>标签前,插入如下代码即可:

刷新网页,在输入文本框中输入内容,就可以看到此特效。

2、纯CSS loading特效

效果展示如下图所示:

网站美化:输入框打字冒光特效、头像特效等博客特效

使用方法:

如果是WordPress网站,在当前主题目录下的header.php文件的<body>标签前添加如下代码:

最后,开主题的footer.php,并在</body>标签前,插入如下代码:

刷新页面,就会出现这个loading加载特效。

3、头像旋转特效

效果展示如下图所示:

网站美化:输入框打字冒光特效、头像特效等博客特效

在当前主题的style.css中添加如下代码:

如果使用的主题自带了自定义样式css代码的插入地方,可以直接添加:

网站美化:输入框打字冒光特效、头像特效等博客特效

最后,刷新浏览器就可以看到头像旋转效果。

三、总结

个人网站能折腾,能玩的地方太多了,慢慢完善吧~

 

本站整理自

http://suppore.cn/

文件下载 activate-power-mode.js
下载地址
Jack Cui

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar Tianna 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 同济大学 2

      wordpress数据库建在云主机上,更新效果的时候是下载下相应的文件重传吗?感觉有些麻烦,有没有什么更好的方法吗?

        • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省沈阳市 东北大学七舍

          @Tianna 使用xshell的ssh链接云服务器,下载lrzsz,使用lrzsz实现上传下载功能。在我的CSDN博客的TX1教程里,有使用说明。