Question

先生，我很抱歉我的英语。我想将此效果添加到网站但不起作用。效果名称从左侧滑动，但内容：“”;没有工作帮助效果

  <div class="button-wrapper">
<div class="button slideleft"><span>Slide from left</span></div>

.button.slideleft:after {
  content: "";
  backface-visibility: hidden;
  background-color: #333;
  border-radius: 50%;
  height: 70px;
  right: 100%;
  position: absolute;
  top: 50%;
  transform-origin: 0% 50%;
  transform: scale3d(1, 5, 1);
  -webkit-transition: -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 70px;
  z-index: -1;
}
.button.slideleft:hover span {
  color: white;
}
.button.slideleft:hover:after {
  -webkit-transform: scale3d(5, 3.5, 1);
          transform: scale3d(5, 3.5, 1);
}

this effect

链路

Answer 1

您的<div class="button slideleft">样式为position: absolute;，您错过了其父元素样式position: relative。尝试将此添加到您的CSS：

.button-wrapper {
    position: relative;
    overflow: hidden;
}

按钮悬停效果不起作用

1 个答案: