前言

Hello，你好，很高兴能够在掘金相识，此文章是CSS专栏中的开篇，也是实际项目当中加入的一些元素、经验分享在这里，如有需要直接拿去即可~

什么是交互动画？

交互动画是一种通过用户与界面的交互触发或控制的动画效果。在网页设计和应用程序开发中，交互动画被广泛应用于提升用户体验、引导用户操作、增强视觉吸引力等方面。

交互动画可以在用户与界面进行交互时触发，例如当用户鼠标悬停在一个按钮上时，按钮可能会出现动画效果来提示用户可以点击；或者当用户点击一个链接时，页面可能会有平滑的过渡效果，使页面内容以动画方式逐渐呈现出来。

交互动画也可以用于表现用户操作的反馈，例如当用户提交一个表单时，界面可能会出现一个加载动画来提示用户正在处理中，以减少用户的焦虑感；或者当用户拖拽一个元素时，界面可能会实时更新显示元素的位置变化，以增加用户的直观感知。

总的来说，交互动画是一种通过用户与界面的交互来实现的动态效果，可以提升用户体验、增强界面的可理解性和可用性。之外呢，在工作中的提升，对你也是有很大的帮助。

据了解，此风格多用于门户登录网站中，显得高端大气且简约，便于用户操作，也是非常有意思的，废话不多说，直接上代码！

此类型是笔者更为喜欢的也是更新颖的，褪去了js的辅助，纯CSS即可实现。

其实，无论用到什么交互效果，整体上不难，难的在于开发思路，以上是目前所接触的业务中的小改动~

如果觉得文章可以，希望点个「点赞」，心情豁然开朗，工作如鱼得水。更多的知识总结和日常分享在公粽号里分享啦【小李的李li】