NiuC - Hello World - CSS
type: channel
link: https://www.niuc.org/tag/CSS/
items: Briefness模板一些小修改-抖音字体效果LOGO

Briefness模板一些小修改-抖音字体效果LOGO
type: item
date: 2023-02-11T09:59:38+08:00
description: 本站之前在关于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">保存即可。编辑前 <a href="<?php $this->options->siteUrl(); ?>" class="logo">自定义文字LOGO<img src="<?php $this->options->logoUrl(); ?>" alt="" style="width:auto;height:auto;"> 编辑后 <a href="<?php $this->options->siteUrl(); ?>" class="logo doudong">自定义文字LOGO<img src="<?php $this->options->logoUrl(); ?>" alt="" style="width:auto;height:auto;"> 完成以上两个步骤就可以前往主页刷新看最终效果了。本文CSS效果来自：https://www.madapang.com/technology/csstiktok.html