代码之家 › 专栏 › 技术社区 › Bryan Dellinger

变换后的定心跨度

css-transitions css

Bryan Dellinger · 技术社区 · 8 年前

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

我在这里创建了一个fiddle,在这里我使用css转换完成了它。

我的问题是,有没有一种方法可以垂直和水平定位悬停时滑入的跨距,而不必使用左上角的css属性?

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

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;
}

<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 回复 | 直到 8 年前

user7207170 user7207170 8 年前

您可以使用这些值,而不是围绕这些值进行调整:

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>