我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛
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个视觉效果到这里就结束了,很久没写文章了,完成的有点粗糙,希望后续能够推出更多优质的效果给到大家,当然如果大家有什么好看的效果或者交互,也可以进行留言,我一定会认真研读。
新的一年,希望大家,新年快乐,兔年吉祥!