当评论遇上动画:发射!

11天前308

前段时间,我在捣鼓我的 DEMO 站 时,灵感如泉涌,特别是受到 若志 随笔 的启发,我决定直接将评论邮件推送功能嵌入到主题中,而非依赖插件来实现。

这一尝试虽然让我收获了不少乐趣,但也遇到了一个小问题——游客评论时,由于邮件发送是同步进行的,导致提交评论时响应有些延迟。

懒惰如我,暂时没有将同步发送改为异步的打算(毕竟,谁不想偷点懒呢?),于是我开始思考如何在等待过程中增加一些趣味元素,让用户体验不至于那么单调。

就在一次使用网易邮箱的偶然瞬间,我发现发送邮件时,那个“发送”按钮会瞬间变成纸飞机图标,并优雅地飞离,这一细节瞬间点燃了我的创意火花。于是,我决定将这份灵感融入到我的网站中,为评论按钮也添上类似的动画。

想要看看这有趣的动画吗?可以点击这里 评论按钮动画示例,相信你会喜欢的!

这个小动画的实现其实非常简单,它主要依赖于动画和 JavaScript 来控制元素。我已经将它成功应用到了我的测试站上,效果还不错。

当然,你也可以根据自己的需求进行修改,比如评论成功时显示对勾图标、错误时叉号等,让动画更加贴合你的网站风格。

感兴趣的朋友可以直接访问 评论按钮动画示例,查看源码使用,记得根据自己的具体需求进行适当的修改哦!

* 若非特殊说明,本站文章均为博主原创,码字不易,如需转载,请注明出处!有疑问可留言交流,谢谢。

JavascriptCSS分享35 

当评论遇上动画:发射! - Jdeal | Life is like a Design.