0%

NexT主题添加标题抖动特效

将鼠标停留在标题上,会有抖动特效。

本文整理了两种特效,CSS代码如下。

CSS代码

Mimi版

代码由Mimi提供,Orz

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.site-title:hover, .post-title:hover {
animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes shake-it {
0% {
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25% {
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50% {
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100% {
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}

Cangshui版

原文链接,里面提供了两种特效,这里只展示了第一种特效

但是需要改动一下,才有鼠标停留抖动特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.site-title:hover, .post-title:hover {
animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
}
@keyframes uk-text-shadow-glitch {
0% {
text-shadow: none
}
25% {
text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
}
50% {
text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
}
75% {
text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
}
100% {
text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
}
}

有一说一,Cangshui版没有Mimi版好康

NexT主题改动方法

将上面的代码(二选一)复制到博客目录\themes\next\source\css下的main.styl文件中即可。

Hexo v4.2.0、NexT v7.7.1