html - 文本在 css 动画上轻推
问题描述
在遵循本教程的同时使用 html 和 css 制作动画登录屏幕。我注意到,每当您专注于输入字段时,文本都会像这样轻推:
如何解决这个问题?通过测试我发现它与文本居中有关。
参考这里是原始代码
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
解决方案
如果你的意思是过渡期间的颤抖,那么它确实与重新计算居中有关。如果我们正在谈论向右移动,那么您只需要从最终的过渡尺寸中减去双边框宽度。
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 40px;
text-align: center;
background: #191919;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] {
margin: 20px auto;
display: block;
width: 200px;
padding: 14px 10px;
text-align: center;
border: 2px solid #3498db;
border-radius: 24px;
outline: none;
color: white;
background: none;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus {
width: 276px;
border-color: #2ecc71;
}
.box input[type="submit"] {
display: block;
margin: 20px auto;
padding: 14px 40px;
text-align: center;
border: 2px solid #2ecc71;
border-radius: 24px;
outline: none;
color: white;
background: none;
cursor: pointer;
transition: 0.25s;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="password">
<input type="submit" name="" value="Login">
</form>
推荐阅读
- android - android studio中的XML文件行给出错误它说URI未注册
- google-maps - 谷歌地图全屏在特殊情况下不显示
- django - 元素可用于多于一个的组
- vb.net - 使用 Flatten 函数画圆
- url - 在 TYPO3 9 中禁用路由
- java - Java中使用Kadane算法的子数组的最大总和
- java - 如何使用 JAXB 从 nexus 存储库生成 java 类
- react-native - React-Native-Numeric-Input 中的值没有变化
- sql - 为什么 postgres 在查询形状为“A UNION A”时不重新使用子查询结果?
- ruby-on-rails - 需要帮助了解如何使用与 JSON API 规范的关系