如何使用纯 CSS 创建翻牌动画
2023-09-11 14:20:21 时间
下面的示例向您展示了如何使用纯 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 实现翻转卡片效果的端到端示例
相关文章
- 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
- [js] - 导航展出动画
- CSS - 解决子级用css float浮动 而父级div没高度不能自适应高度
- 动画效果解析工厂:Mask 动画
- iOS之UI--转场动画
- fbx模型动画提取教程附带一个用代码提取的方法
- css动画 aniamtion & @keyframes
- [CSS] Purgecss to remove unused css
- Css 动画的回调
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 110行JavaScript代码实现的雪花纷飞动画效果
- css 焦点扩散渐变动画(整理)
- css三角号旋转90度,上下移动动画效果demo效果(整理)
- 面包导航切换动画效果
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
- uni——抽卡动画(animation、按钮禁用、样式添加等)
- css js jquery移动动画
- android 延长开机动画,当FallbackHome消失时结束开机动画
- Android 9.0 10.0 11.0 开机动画支持mp4 视频播放
- Android 10.0添加关机动画和关机音乐
- jquery的toggle动画效果显示隐藏
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05
- 【CSS】css转换、css过渡、css动画_09