Amazonサイバーマンデー開催中!12/9まで!

翻转卡动画集合,可以实现由CSS [旋转和翻转,瓷砖设计等]

上次,我们介绍了使用材料设计 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。