如何仅使用 CSS 进行过渡

Question

您好，我的网站上有一个搜索箭头，向右它会向左和向右过渡。因为箭头在我网站的右侧，所以我希望它只向左过渡。

换句话说，我希望搜索图标保持原位，而不是移动和输入以过渡到左侧，这样您就可以输入内容了。我希望这是有道理的。

body {
  background: darkgrey;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  /*   position: absolute; */
  color: lightblue;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<div class="search-box">
  <input class="search-txt" type="text" name="" placeholder="Type to Search">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Answer 1

只需在 css 中添加一些焦点和有效检查。如果您只想让输入从原来的位置向左滑动，请告诉我，我会更改代码

body {
  background: darkgrey;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-txt , .search-txt:focus, .search-txt:valid {
  width: 240px;
  padding: 0 6px 0 50px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  position: absolute;
  color: lightblue;
  left: 10px;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 40px;
}

<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<div class="search-box">
  <input class="search-txt" type="text" name="" placeholder="Type to Search" required>
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Answer 2

您只需更改以下几个属性：

.search-box {
  position: absolute;
  top:50%; 
  right:50%;
  transform: translate(0, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

请在下面找到完整的代码。希望能帮助到你。

body {
  background: darkgrey;
}

.search-box {
  position: absolute;
  top:50%; 
  right:50%;
  transform: translate(0, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  /*   position: absolute; */
  color: lightblue;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<div class="search-box">
  <input class="search-txt" type="text" name="" placeholder="Type to Search">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

如何仅使用 CSS 进行过渡

How to Make Transition Left Only with CSS

html

css

css-transitions

transition