Question

尝试创建一个在语义ui上可用的动画按钮，特别是动画购物车https://semantic-ui.com/elements/button.html

我在这里创建了一个小提琴，我使用css转换完成了它。

我的问题是，有没有办法垂直和水平定位悬停时滑动的跨度而不必使用top，left css属性？

span {
  position: absolute;
  top: -45px;
  left: 14px;
  transition: top .6s linear;
}

＆＃13;

button {
  position: relative;
  transition: all .6s linear
}

i {
  color: #FFF;
  font-size: 34px !important;
  /* 24px preferred icon size */
  vertical-align: middle;
  transition: transform .6s linear;
}

span {
  position: absolute;
  top: -45px;
  left: 14px;
  transition: top .6s linear;
}

button:hover > i {
  transform: translate3d(0px, 45px, 0px);
}

button:hover > span {
  top: 12px;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <button class="btn btn-primary">
   <i class="material-icons">face</i>
   <span>Face</span>
 </button>

＆＃13;

Answer 1

您可以使用以下内容而不是调整值：

top: 50%;
left: 50%;
transform:translate(-50%,-50%);

以上用于使具有绝对定位的元素相对于其父容器居中。因此，最初将跨度设置为负顶部值并将过渡设置设置为50％将使其居中。

span {
  position: absolute;
  top: -50%;
  left: 50%;
  transform:translate(-50%,-50%);
  transition: top .6s linear;
}

button:hover > span {
    top: 50%;
}

button{
  position: relative;
  transition: all .6s linear
}

i {
  color: #FFF;
  font-size: 34px !important; /* 24px preferred icon size */
  vertical-align: middle;
  transition: transform .6s linear;
}

span {
  position: absolute;
  top: -50%;
  left: 50%;
  transform:translate(-50%,-50%);
  transition: top .6s linear;
}

button:hover > i {
    transform: translate3d(0px, 45px, 0px);
}

button:hover > span {
    top: 50%;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <button class="btn btn-primary">
   <i class="material-icons">face</i>
   <span>Face</span>
 </button>

变换后的中心跨度

1 个答案: