如何创建简单的 CSS 3D 动画
如何创建简单的 CSS 3D 动画
我为什么写这篇文章
前几天，我正在看一段视频，其中凯尔来自 网络开发简化 和 凯文鲍威尔 ，CSS 布道者，正在苦苦挣扎 CSSBattle .
顿时，我就想和朋友一起玩这些类型的挑战是多么有趣，所以我搜索了“css Battles”，然后我深入这个神奇的网站！
首先引起我注意的是一张名为 CSSBattle 的“学习” .我单击了按钮，然后像往常一样开始在页面中随机移动鼠标，直到看到这个很酷的卡片动画：
Card Hover State Animation
CSS：动画
HTML
HTML 部分非常简单。基本上，我们需要创建一张卡片，并在其中放置我们想要向用户展示的内容。例如：
HTML
CSS
在进入动画之前，让我们对这张卡片进行一些样式设置：
CSS
现在是施展魔法的时候了！让我们添加这个很酷的动画：
CSS Animation
如您所见，它并不复杂。现在你可以调整 盒子阴影 和 转换 属性以获得不同类型的动画。
最后结果
这是最终的结果：
Final Result
现在轮到你调整这种动画并尝试创建 CSSBattle的学习 的更复杂的卡。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
