大家好,我是 Just,这里是「设计师工作日常」,今天分享的是利用动画属性来模拟文字隐身消失的效果。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
① 关于transform
多属性的运用
②:nth-of-type(n)
伪选择器的使用
③animation
的使用
④filter
中模糊属性blur()
的使用
思路:给每个文字加上模糊、变形、位移等属性,并且设置动画参数来模拟文字渐渐隐身消失的视觉效果。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
每个文字都作为一个独立的标签。
css 部分代码
1、给所有的文字标签
textspan55
写出公共样式,并且加上animation
动画
2、定义
animation
动画参数,注意定义关键帧时,从 50% 开始做动画效果,前面的 50% 作为动画启动前的延迟;定义动画参数时,文字对象从模糊值、透明度、位移、旋转、变形和放大等方面进行调试,尝试不同的值来变化,调试出你喜欢的效果。
3、最后利用
:nth-of-type(n)
让每个文字元素延迟动画,文字元素依次进行动画效果,形成文字漂移隐身消失的视觉效果
完整代码如下
html 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!