鼠标悬停动效卡片

鼠标悬停动效卡片介绍

这是一个非常炫酷的鼠标悬停动效卡片，适合用于文章中的内容展示、产品介绍、服务亮点等场景。当用户将鼠标悬停在卡片上时，卡片会旋转并放大，同时显示隐藏的内容，给用户带来视觉上的惊喜和互动体验。

卡片特点

1. 渐变背景：
   • 卡片背景使用了线性渐变效果，颜色从 #f89b29（橙色）过渡到 #ff0f7b（粉色），营造出时尚、活力的视觉效果。
2. 图标装饰：
   • 卡片顶部有一个 SVG 图标，默认显示为灰色（#333），鼠标悬停时会旋转并缩小消失。
3. 隐藏内容：
   • 卡片默认只显示图标，鼠标悬停时会显示隐藏的内容，包括标题和描述。
4. 平滑动画：
   • 所有动画效果都使用了 cubic-bezier 缓动函数，确保过渡效果平滑自然。
5. 响应式设计：
   • 卡片尺寸固定为 300px * 200px，但可以根据需要调整大小，适配不同设备和布局。

代码结构

以下是卡片的核心部分代码结构：

<div class="card">

<p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>