我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
2023不期而遇，距离春节还有8天，不止在座的各位，还有我，现在都是归心似箭，无心上朝，然后今天就给大家 实现一些有趣的动效吧，让我们一起走进那些诗人美好的画面中：
打字效果
雄兔脚扑朔，雌兔眼迷离，双兔傍地走，安能辩我是雄雌。 — — 南北朝·佚名《木兰诗/木兰辞》
打字机动画将通过使用CSS steps()函数一步一步地将文本元素的宽度从0更改为100%，从而显示文本元素。
一个闪烁动画将使光标动起来。
需要注意的是：
ch单位ch是一个相对长度单位, 表示数字0的宽度，需要设置等宽的字体.- 本文采用了
em.
闪烁效果
茕茕白兔，东走西顾，衣不如新，人不如故。 — — 汉·佚名《古艳歌》
animation-direction反向交替alternate-reverse对动画的闪烁效果
毛玻璃效果
白兔捣药成，问言与谁餐？ — — 唐·李白《古朗月行》
通过css hsla 函数控制颜色、浓度、亮度、饱和度等, 配置filter模糊实现毛玻璃的这样一个效果
环形文字
可笑嫦娥不了事，却走玉兔来人间. 分寸不落猎人口，滁州野人获以还. 霜毛丰茸目睛殷，红绦金链相系擐. 驰献旧守作异玩，况乃已在蓬莱山. 月中辛勤莫捣药，桂旁杵臼今应闲. 我欲拔毛为白笔，研朱写诗破公颜. — — 宋·梅尧臣《永叔白兔》
通过svg标签和transition搭配使用
渐变效果
新秋白兔大于拳，红耳霜毛趁草眠。天子不教人射击，玉鞭遮到马蹄前。 — — 唐·王建《宫词》
使用css3属性背景裁剪-webkit-background-clip：text,配合移动动画
结尾
本次整理的5个视觉效果到这里就结束了，很久没写文章了，完成的有点粗糙，希望后续能够推出更多优质的效果给到大家，当然如果大家有什么好看的效果或者交互，也可以进行留言，我一定会认真研读。
新的一年，希望大家，新年快乐，兔年吉祥！
