本站之前在关于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