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

2017年10月16日12:46:18 7 2,072 °C

摘要

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

一、前言

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

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

二、使用方法

1、输入框打字冒光特效

效果展示如下图所示：

使用方法:

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

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

<script src="<?php bloginfo('template_directory'); ?>/assets/js/activate-power-mode.js "></script>  
<script>  
POWERMODE.colorful = true;  // 冒光特效  
POWERMODE.shake = false;    // 抖动特效  
document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
</script>

POWERMODE.colorful = true; // 冒光特效

POWERMODE.shake = false; // 抖动特效

document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效

</script>

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

2、纯CSS loading特效

效果展示如下图所示：

使用方法：

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

<style>
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e73c3c;
    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #fff;
    z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
    left: 0;
}
#loader-wrapper .loader-section.section-right {
    right: 0;
}
/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);
    /* IE 9 */
    transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);
    /* IE 9 */
    transform: translateX(100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-100%);
    /* IE 9 */
    transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s 1s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s 1s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

</style>
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

<style>

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1000;

}

#loader {

display: block;

position: relative;

left: 50%;

top: 50%;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #3498db;

-webkit-animation: spin 2s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

animation: spin 2s linear infinite;

/* Chrome, Firefox 16+, IE 10+, Opera */

z-index: 1001;

}

#loader:before {

content: "";

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #e73c3c;

-webkit-animation: spin 3s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

animation: spin 3s linear infinite;

/* Chrome, Firefox 16+, IE 10+, Opera */

}

#loader:after {

content: "";

position: absolute;

top: 15px;

left: 15px;

right: 15px;

bottom: 15px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #f9c922;

-webkit-animation: spin 1.5s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

animation: spin 1.5s linear infinite;

/* Chrome, Firefox 16+, IE 10+, Opera */

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(0deg);

/* IE 9 */

transform: rotate(0deg);

/* Firefox 16+, IE 10+, Opera */

}

100% {

-webkit-transform: rotate(360deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(360deg);

/* IE 9 */

transform: rotate(360deg);

/* Firefox 16+, IE 10+, Opera */

}

@keyframes spin {

0% {

-webkit-transform: rotate(0deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(0deg);

/* IE 9 */

transform: rotate(0deg);

/* Firefox 16+, IE 10+, Opera */

}

100% {

-webkit-transform: rotate(360deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(360deg);

/* IE 9 */

transform: rotate(360deg);

/* Firefox 16+, IE 10+, Opera */

}

#loader-wrapper .loader-section {

position: fixed;

top: 0;

width: 51%;

height: 100%;

background: #fff;

z-index: 1000;

}

#loader-wrapper .loader-section.section-left {

left: 0;

}

#loader-wrapper .loader-section.section-right {

right: 0;

}

/* Loaded styles */

.loaded #loader-wrapper .loader-section.section-left {

-webkit-transform: translateX(-100%);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateX(-100%);

/* IE 9 */

transform: translateX(-100%);

/* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */

transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */

}

.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateX(100%);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateX(100%);

/* IE 9 */

transform: translateX(100%);

/* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */

transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */

}

.loaded #loader {

opacity: 0;

-webkit-transition: all 0.3s ease-out;

/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */

transition: all 0.3s ease-out;

/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */

}

.loaded #loader-wrapper {

visibility: hidden;

-webkit-transform: translateY(-100%);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateY(-100%);

/* IE 9 */

transform: translateY(-100%);

/* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.3s 1s ease-out;

/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */

transition: all 0.3s 1s ease-out;

/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */

}

</style>

</div>

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

<script type="text/javascript">
$(window).load(function() {
$("#loader-wrapper").fadeOut(50);
});
</script>

$(window).load(function() {

$("#loader-wrapper").fadeOut(50);

});

</script>

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

3、头像旋转特效

效果展示如下图所示：

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

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:100px;height:100px; /*设置图像的长和宽*/
border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 20px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:20px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
.avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg); }

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:100px;height:100px; /*设置图像的长和宽*/

border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/

-webkit-border-radius: 20px;/*圆角效果：兼容webkit浏览器*/

-moz-border-radius:20px;

box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/

-webkit-box-shadow: inset 0 -1px 0 #3333sf;

-webkit-transition: 0.4s;

-webkit-transition: -webkit-transform 0.4s ease-out;

transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/

-moz-transition: -moz-transform 0.4s ease-out;

}

.avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/

box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

transform: rotateZ(360deg);/*图像旋转360度*/

-webkit-transform: rotateZ(360deg);

-moz-transform: rotateZ(360deg); }

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

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

三、总结

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

本站整理自：

http://suppore.cn/

文件下载 activate-power-mode.js

下载地址

微信公众号

分享技术，乐享生活：微信公众号搜索「JackCui-AI」关注一个在互联网摸爬滚打的潜行者。

发表评论取消回复

目前评论：7 其中：访客 4 博主 3

Tianna 上海市同济大学 2
回复 2017年11月28日下午12:59 沙发
wordpress数据库建在云主机上，更新效果的时候是下载下相应的文件重传吗？感觉有些麻烦，有没有什么更好的方法吗？
- Jack Cui Admin 辽宁省沈阳市东北大学七舍
  回复 2017年11月28日下午2:21 1层
  @Tianna 使用xshell的ssh链接云服务器，下载lrzsz，使用lrzsz实现上传下载功能。在我的CSDN博客的TX1教程里，有使用说明。
青山江西省萍乡市电信 1
回复 2018年9月8日下午9:07 板凳
还有很多特效等你使用
- Jack Cui Admin 辽宁省沈阳市东北大学三舍南(研究生)
  回复 2018年9月8日下午9:30 1层
  @青山哦？同款主题啊~有几个同款主题来访的，很好奇，怎么找到我的。
  - 青山江西省萍乡市电信 1
    回复 2018年9月9日上午7:23 2层
    @Jack Cui 我也忘了，从别人博客点进去的
    - Jack Cui Admin 辽宁省沈阳市东北大学三舍南(研究生)
      回复 2018年9月9日上午10:49 3层
      @青山哦哦，这样啊
lw177777 湖南省电信 0
回复 2022年5月15日下午5:48 地板
index.html:9 Uncaught ReferenceError: POWERMODE is not defined 这个咋处理

一、前言

二、使用方法

1、输入框打字冒光特效

2、纯CSS loading特效

3、头像旋转特效

三、总结

发表评论取消回复

目前评论：7 其中：访客 4 博主 3

登录 注册 找回密码

登录注册找回密码