个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个按钮，悬停时会将其宽度从 50px 更改为 300px。但它只在一侧这样做(正面或负面)。我想要将其宽度更改为 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>最佳答案
这是一个使用两种不同实现的 fiddle 。第一个是原始的居中技巧。第二个是 flex 盒子。如果你能摆脱它，使用 flex。
这是不使用 flexbox 的 CSS:
#container-1 {
text-align: center;
}
#button-1 {
margin: auto;
}
这就是 flexbox:
#container-2 {
display: flex;
justify-content: center;
}
关于html - 如何在 x 轴的两侧(+ve 和 -ve)过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38522066/
26
4
0
我是一名优秀的程序员,十分优秀！