问如何在x轴的两侧(+ve和-ve)进行过渡？
EN

Stack Overflow用户

提问于 2016-07-22 16:47:35

回答 1查看 56关注 0票数 1

我有一个按钮，悬停将改变它的宽度从50px到300px，.But，它只是这样做的一侧(无论是积极的或消极的)，我希望它改变它的宽度为300px与150px在任何一边。

.container-2 {
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.container-2 #search {
  width: 50px;
  -webkit-transition: width .55s ease-in-out;
  -moz-transition: widtg .55s ease-in-out;
  -ms-transition: width .55s ease-in-out;
  -o-transition: width .55s ease-in-out;
}
.container-2:hover #search {
  outline: none;
  width: 300px;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="box">
    <div class="container-2">
      <span class="icon">
          <i class="fa fa-search"></i>
        </span>
      <input type="search" id="search" placeholder="Search Wikipedia" />

    </div>
  </div>

</body>

</html>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-22 17:33:54

这是一个使用两种不同实现的小提琴。第一个是原始的居中技巧。第二个是使用flex-box。如果你可以逃脱惩罚，使用flex。

下面是没有使用flexbox的CSS：

#container-1 {
  text-align: center;
}
#button-1 {
  margin: auto;
}

这就是flexbox：

#container-2 {
  display: flex;
  justify-content: center;
}

JSFiddle with CSS centering implementations

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38522066

复制

相似问题

问如何在x轴的两侧(+ve和-ve)进行过渡？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在x轴的两侧(+ve和-ve)进行过渡？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在x轴的两侧(+ve和-ve)进行过渡？
EN