止于至善

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