上次,我们介绍了使用材料设计 CSS 制作的卡。
【無料】CSSで作る流行りのマテリアルデザインのオシャレカードコレクション这一次,我将介绍一个翻转卡动画集合,增加了动画。
各种运动,如旋转和翻转是有趣的,必须真正纳入网页设计!
由于有许多东西只使用CSS工作,所以很容易实现显示速度和更快。
可点击翻转卡
种子笔纯 CSS 点击 able flip cards 由 Kacper Parz_cki (@kacpertn4t) on CodePen.
实现 Lazy 加载的翻转卡
《华盛顿邮报》和《Alex Paul》(@alex_paul) 的《法典》。
向上和向下旋转翻转卡
由 Dmitry Korobov (@DmitryKorobov) 在 codePen.
向上、向下、向左和向右旋转翻转卡集合
笔 CSS 3D Flip Cards 由 Welling Guzman (@wellingguzman) 在 CodePen.
闪烁卡
Kayleigh (@kayfo23) 在 CodePen 上。
3D 旋转翻转卡,使字符浮动
The Pen 3D Flip Cards Pure CSS 和 HTML 由 Arash Rasteh (@ArashRasteh) 在 CodePen.
多功能上下旋转,左右旋转翻转卡
Aron (@Aoyue) 在 CodePen 上。
点击旋转翻转卡
The Pen 3D 产品卡由 Zac (@Zacaree) 在 CodePen.
视差翻转卡,使字符浮动
Hakkam Abdullah (@Moslim) 在 CodePen 上。
8 张视差翻转卡
The Pen Parallax Flipping Cards 由 tyrell Rummage (@tyrellrummage) 在 CodePen 上。
点击翻转卡翻转和放大
五电卡 – 集团11元素由马里奥·杜阿特(@MarioDesigns)在CodePen。
翻转卡,在翻转中显示 SW 字符动画
Rita Bradley (@ritalbradley) 在 CodePen 上。
WEB 名片风格翻转卡
五人闪光卡 | css knockout 文本 + flip animation 由 eina O (@thelittleblacksmith) on CodePen。
一种通用翻转卡,只需单击即可翻转左右
See Pen Flipping card 由 Sergey Nikishkin (@nikishkin) on CodePen。