hexo标题抖音特效

|
| 字数统计: 152

效果展示

鼠标触碰题目会有如下效果

image-20200313015633238

实现

修改\themes\next\source\css_custom\custom.styl，添加如下语句即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//标题抖音化
.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);
    }
}

重新hexo g -d即可