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

福利资源

发表文章数:936

热门标签

,
首页 » 技术文档 » WP教程 » 正文
福利购

一、前言

感觉网站太单调?对于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代码的插入地方,可以直接添加:

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

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

三、总结

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

未经允许不得转载:作者:福利资源, 转载或复制请以 超链接形式 并注明出处 福利资源网
原文地址:《网站美化:输入框打字冒光特效、头像特效等博客特效》 发布于2019-07-31

分享到:
赞(0) 打赏 生成海报

评论 1

1 + 7 =
  1. #1

    下载在哪

    owen23712个月前 (11-03)回复

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册