Briefness模板一些小修改-抖音字体效果LOGO

简体中文 | 繁体中文 | English | 日本語 | 한국인 | Русский

本站之前在关于Briefness模板一些修改博文中有提到设置文字LOGO的方法。
今天就在文字LOGO上面做下文章，灵感来自昨晚逛某站的时候看到简介使用的是抖音效果的字体，感觉闪下眼睛的效果可以用在Briefness模板的文字LOGO上，给单调的网站加上一笔色彩。
修改文字LOGO：https://niuc.org/archives/30.html，由于之前的文章有介绍就不多说了，今天只说怎么实现抖音字体效果。

自定义CSS
本站使用的插件是：CustomCssAndJs
下载地址：https://github.com/kyuuseiryuu/typecho-plugin-custom-css-js
安装好插件，直接在插件设置页自定义CSS输入一下CSS代码保存即可。

.doudong{
    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 #ff004f,2px 2px 0 #00f7ef
    }
    50% {
        text-shadow: 2px -2px 0 #ff004f,-2px 2px 0 #00f7ef
    }
    75% {
        text-shadow: -2px 2px 0 #ff004f,2px -2px 0 #00f7ef
    }
    100% {
        text-shadow: 2px 2px 0 #ff004f,-2px -2px 0 #00f7ef
    }
}
@keyframes uk-flicker {
    0% {
        opacity: 0
    }
    10% {
        opacity: .6;
        transform: scale(.8)
    }
    20% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    50% {
        opacity: .2;
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
};
  }
}

加载CSS效果
自定义好CSS后前往外观编辑页选择header.php编辑以下代码。
就是将class="logo">修改class="logo doudong">保存即可。
编辑前

<h1><a href="<?php $this->options->siteUrl(); ?>" class="logo">自定义文字LOGO<img src="<?php $this->options->logoUrl(); ?>" alt="" style="width:auto;height:auto;"></a></h1>

编辑后

<h1><a href="<?php $this->options->siteUrl(); ?>" class="logo doudong">自定义文字LOGO<img src="<?php $this->options->logoUrl(); ?>" alt="" style="width:auto;height:auto;"></a></h1>

完成以上两个步骤就可以前往主页刷新看最终效果了。

本文CSS效果来自：https://www.madapang.com/technology/csstiktok.html