Question

我认为这很简单，但我不确定它是如何实施的。所以，让我说我有一个输入字段，最初以页面为中心（垂直和水平）。但是，我想在用户开始输入时将输入框设置为页面顶部的动画，如何实现？我最初的想法是分配top:0并将其转换为焦点。它比那复杂吗？

请赐教。

＆＃13;

input.input-student-search {
  position: absolute;
  top: 50%;
  transform: translateY(0px);
  padding: 27px 145px 27px 38px;
  margin: 10px;
  width: 100%;
  border: none;
  box-shadow: 0 10px 20px rgba(198, 198, 198, 0.02), 0 6px 6px rgba(221, 221, 221, 0.23);
  border-radius: 6px;
  text-align: left;
  &:focus {
    top: 0;
  }
}

＆＃13;

Answer 1

我就这样做了：

.txt {
    position: relative;
    text-align: center;
    width: 90%;
    margin: 0 20px 0 20px;
    top: 200px;
    transition: top 0.4s;
}

.txt:focus{
    top:0;
}

Here is the JSFiddle demo

Answer 2

只需将top:0放入:focus样式：

input.input-student-search:focus {
  top:0;
}

＆＃13;

input.input-student-search {
  background-color:#AAA;
  position: absolute;
  top: 50%;
  transform: translateY(0px);
  padding: 27px 145px 27px 38px;
  margin: 10px;
  width: 100%;
  border: none;
  box-shadow: 0 10px 20px rgba(198, 198, 198, 0.02), 0 6px 6px rgba(221, 221, 221, 0.23);
  border-radius: 6px;
  text-align: left;
  transition:top 1s linear; 
}
input.input-student-search:focus {
  top:0;
}

＆＃13;

<input class="input-student-search" type="text"/>

＆＃13;

如何在css中输入焦点上从页面中心到页面顶部为输入框设置动画？

2 个答案: