如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。

作者：坚果

公众号：“大前端之旅”

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

HTML

<body><h1>大前端之旅</h1><h3>Flipping Card: An Example</h3><div class="card"><div class="card__content"><div class="card__front"><h1>?</h1></div><div class="card__back"><h1>This is a big secret</h1></div></div></div>
</body>

CSS

  .card {margin: auto;width: 300px;height: 400px;perspective: 1000px;background-color: transparent;}.card__content {position: relative;width: 100%;height: 100%;text-align: center;transition: all 1s;transform-style: preserve-3d;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);}.card:hover .card__content {transform: rotateY(180deg);}.card__front,.card__back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;color: white;}.card__front {background-color: red;font-size: 150px;}.card__back {background-color: indigo;transform: rotateY(180deg);font-size: 36px;}

完整代码

<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><style>.card {margin: auto;width: 300px;height: 400px;perspective: 1000px;background-color: transparent;}.card__content {position: relative;width: 100%;height: 100%;text-align: center;transition: all 1s;transform-style: preserve-3d;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);}.card:hover .card__content {transform: rotateY(180deg);}.card__front,.card__back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;color: white;}.card__front {background-color: red;font-size: 150px;}.card__back {background-color: indigo;transform: rotateY(180deg);font-size: 36px;}</style><title>大前端之旅</title>
</head><body><h1>大前端之旅</h1><h3>Flipping Card: An Example</h3><div class="card"><div class="card__content"><div class="card__front"><h1>?</h1></div><div class="card__back"><h1>This is a big secret</h1></div></div></div>
</body></html>

最后的话

我们已经研究了一个使用纯 CSS 实现翻转卡片效果的端到端示例

如何使用纯 CSS 创建翻牌动画相关推荐

html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
纯CSS实现图片动画
纯CSS实现图片动画 1.先网上下载一张sprites动画图片,直接百度搜sprites图片就可. 2.用css设置一个关键帧,确定好起始位置和终止位置, 通过background-position调 ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
纯css 渐变背景色动画文字贴合环绕图片
渐变背景色动画渐变色背景是不能通过纯css 动画设置的.所以换一种思路通过 background-size 设置背景的大小,让我们渐变色背景一开始的时候不展示全部的背景,然后通过css动画改变 b ...
html顺序进场动画,十六种炫酷纯css加载动画（一）
一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...
纯CSS创建心形翻转动画
首先,需要创建一个元素,代码如下 <!DOCTYPE html> <html> <meta charset="utf-8"><head&g ...

如何使用纯 CSS 创建翻牌动画

HTML

CSS

完整代码

最后的话

如何使用纯 CSS 创建翻牌动画相关推荐

最新文章

热门文章