css - CSS 卡片文本在动画上更改/移动
问题描述
我有我制作的这张 css 卡:
https://codepen.io/octaviandd/pen/BaNPvrR?editors=1100
.card_front {
z-index: 2;
transform: rotateY(0deg);
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
font-size: 1.3em;
}
.card_back {
transform: rotateY(180deg);
background-image: linear-gradient(to right, #07d697, #0ccfa3);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card_back p {
padding: 10px 30px;
text-align: center;
line-height: 1.68;
font-size: 18px;
margin-bottom: 30px;
}
.card_back button {
padding: 20px 50px;
border: 0;
box-shadow: 0.2rem 0.5rem 0.5rem rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
这只是一个基本的卡片翻转,但我遇到的问题是,当动画发生时,文本宽度正在发生变化,而且它的位置也在变化。
我该如何修复这个?
解决方案
如果在 card_back 类中指定了字体系列,它对你有用吗?
.card_back {
transform: rotateY(180deg);
background-image: linear-gradient(to right, #07d697, #0ccfa3);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Sen", sans-serif;
}
推荐阅读
- python - 将文件解析为python中的列表列表
- java - 带有 SimpleJdbcCall 调用函数的 PLS-00306
- reactjs - 如何在 React Native 中将参数传递到下一个屏幕
- javascript - 从输入表单传递数据以更改 redux 状态
- python - 返回列表的最高值
- javascript - 在 node.js angular 和 mysql 工作台之间建立数据库连接
- elasticsearch - Kibana Dashboard Share 无需登录
- kubernetes - 如何在部署中引用 ReplicaSet?
- c# - 写入我的 Access 数据库时出现语法错误
- javascript - 在 React.js 中,onClick 函数在没有页面刷新的情况下不显示详细信息