css - 在输入之外点击,返回false?
问题描述
我在 CSS 中创建了简单的动画。源代码在这里: https ://drive.google.com/open?id=1MWOHpjTeqr_CBQaCvE4ccoY8nD8kjGFo 但是我有一个问题,当您单击“搜索”并且所有动画将结束然后单击输入之外的某个位置时,输入再次变为圆圈。在输入之外单击时如何取消对 Circle 的支持?
body{
margin: 0;
padding: 0;
background-color: #999999;
}
input{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: none;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #404040;
text-align: center;
color: #fff;
font-size: 50px;
font-family: 'Catamaran';
outline: none;
}
input:hover{
background-color: #ff8533;
transition: 0.8s;
cursor: pointer;
}
input:focus{
animation: test 1s;
animation-fill-mode: forwards;
text-align: left;
}
::placeholder{
color: #fff;
font-weight: 600;
letter-spacing: 1px;
}
@keyframes test{
100%{width: 450px; border-radius: 30px; height: 100px; background-color: #595959; border: 1px solid #404040; cursor: auto; padding: 0px 20px;}
}
@keyframes test2{
100%{
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #404040;
cursor: pointer;
padding: 0px;
}
}
<html>
<head>
<title>Web Developing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="Search">
</body>
</html>
解决方案
最好的办法是在第一次聚焦时使用 JavaScript 向输入添加一个类。不过,您也可以通过将动画转换为过渡并给它一个非常长的反向过渡延迟来做到这一点。请注意,text-align
无法转换,因此占位符需要额外调整才能正常工作。
body{
margin: 0;
padding: 0;
background-color: #999999;
}
input{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
border-width: 0px;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #404040;
text-align: center;
color: #fff;
font-size: 50px;
font-family: 'Catamaran';
outline: none;
transition: all 1s 999999s;
}
input:hover{
background-color: #ff8533;
transition: 0.8s;
cursor: pointer;
}
input:focus{
transition: all 1s;
text-align: left;
width: 450px;
border-radius: 30px;
height: 100px;
background-color: #595959;
border-width: 1px;
border-style: solid;
border-color: #404040;
cursor: auto;
padding: 0px 20px;
}
::placeholder{
color: #fff;
font-weight: 600;
letter-spacing: 1px;
}
@keyframes test{
100%{width: 450px; border-radius: 30px; height: 100px; background-color: #595959; border: 1px solid #404040; cursor: auto; padding: 0px 20px;}
}
@keyframes test2{
100%{
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #404040;
cursor: pointer;
padding: 0px;
}
}
<html>
<head>
<title>Web Developing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="Search">
</body>
</html>
推荐阅读
- opencv - OpenCV 程序有时会失败,有时会工作
- sql - SQL:提取所有其他 pk 列存在的 id?
- .net-core - 有没有办法生成针对 .net 标准或 .net 核心的 COM 互操作程序集?
- c# - 加载或创建新的族实例时为空
- html - Angular 7(更改)-输入类型日期的功能不起作用,但为什么格式错误?
- javascript - 如何用javascript中的字符替换所有空行?
- php - PHP - 这种语法实际上执行命令吗?
- javascript - JavaScript,forEach 对象数组在条件下停止
- python - 如何通过指定关键字对熊猫数据框中的列名进行排序
- sql - 计算月数;是大于 3 的超过 2000 笔交易的月数