hexo网页题头文章标题的字体抖音效果

Post author: bet-yc
Post link: <a href="https://bet-yc.github.io/2020/04/28/%E6%A0%87%E9%A2%98%E6%A0%8F%E7%89%B9%E6%95%88/" title="hexo网页题头文章标题的字体抖音效果">https://bet-yc.github.io/2020/04/28/标题栏特效/
Copyright Notice: All articles in this blog are licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"> BY-NC-SA unless stating additionally.

当鼠标放在标题上就能看到效果

第一步

在/themes/next/source/css/custom/custom.styl中添加下面的代码即可

如何没有custom.styl这个文档

就在/themes/next/source/css/main.styl中添加下面的代码

/*标题抖动效果*/
.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);
    }
}

最后一步，部署完成后打开你的网站试一试就能看到效果了

1	hexo cl && hexo g -d