CSS 固定底部向外生长的过渡

Question

我有一个图标，我希望它在滚动时变大。

我希望这个图标按比例向上、向左和向右扩展，所以它的底部中心位置需要在它开始的地方保持固定。

我想为此使用纯 CSS，没有 JS。

我可以通过各种方式让它展开，但所有这些都会使整个事物向上或向下移动。

这就是我的用处，如有任何帮助，我们将不胜感激。

#sm-image {
  width: 20px;
  height: 20px;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#sm-image:hover {
  width: 36px;
  height: 36px;
  top: -10px;
  left: -10px;
  bottom: 0;
  margin-right: -10px;
  margin-bottom: 0;
}

<img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg"></img>
<div style="width:100%;background-color:red;height:2px;"></div>

提前致谢。

JSFiddle

Answer 1

您可能要考虑绝对定位图标并将其包装在相对定位的容器中。这是基本框架：

#icon-container {
  width: 36px;
  height: 36px;
  border: 1px dashed red;
  position: relative;            /* 1 */
}
#sm-image {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;                      /* 2 */
  left: 50%;                      /* 3 */
  transform: translateX(-50%);    /* 4 */
  transition: width .5s, height .5s;
}
#sm-image:hover {
  width: 36px;
  height: 36px;
}

<div id="icon-container">
  <img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
</div>
<div style="width:100%;background-color:red;height:2px;"></div>

https://jsfiddle.net/aub9amy0/3/

备注：

establish bounding box (nearest positioned ancestor) for absolutely positioned child
保持图标固定在容器底部
保持图标在容器中水平居中

Answer 2

与其更改 width 和 height 并尝试在过程中重新定位元素，不如使用 scale() transform-function and set the transform-origin 作为底部中心。

#sm-image{
  width:20px;
  height:20px;
  transform-origin:50% 100%;
  transition:transform .5s;
}
#sm-image:hover{
  transform:scale(1.25);
}

<img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
<div style="width:100%;background-color:red;height:2px;"></div>

CSS 固定底部向外生长的过渡

CSS transition with fixed bottom growing outwards

html

css

webkit

css-transitions