Question

我在YouTube上观看了有关悬停效果的视频，我正在尝试自己做，但问题是它不适用于Google Chrome：:before和:after背景溢出过渡执行。

在Firefox中，它可以正常工作。我以为可能会发生这种情况，因为我没有使用任何前缀，所以我在代码中包含了前缀，但问题并没有消失

要明确我的问题 background of :before and :after show out of button border

body {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

a {
  overflow: hidden;
  display: block;
  position: relative;
  text-decoration: none;
  color: #000;
  border: 4px solid #000;
  padding: 10px 30px;
  font-size: 20px;
  letter-spacing: 12px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  text-transform: uppercase;
  transition:color 1s ease-in-out;
  transition-delay: 1s;
}

a:before {
  content:'';
  position: absolute;
  top: 50%;
  left: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,left,opacity;
  transition-delay: 0s,1s,1.5s;
  transition-duration: 1s,1s,0s;
}

a:hover:before {
  border-radius:100%;
  -webkit-border-radius:100%;
  opacity:1;
  left: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,left,transform;
  transitiion-delay:0s,0.5s,2s;
  transition-duration: 0s,0.5s,1s;
}

a:after {
  content:'';
  position: absolute;
  top: 50%;
  right: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,right,opacity;
  transition-delay: 0s,1s,1.5s;
  transition-duration: 1.5s,1s,0s;
}

a:hover:after {
  opacity:1;
  right: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,right,transform;
  transitiion-delay:0s,0.5s,2s;
  transition-duration: 0s,0.5s,1s;
}

a:hover{
  color:#FFF;
}

<a href="#">Button</a>

Answer 1

您写了transitiion次而不是transition。

您的过渡似乎正在起作用（即使您不说自己想做的事情），也只是很长一段时间。

您可以延迟播放以更改动画的持续时间，这是延迟较短的代码：

body {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

a {
  overflow: hidden;
  display: block;
  position: relative;
  text-decoration: none;
  color: #000;
  border: 4px solid #000;
  padding: 10px 30px;
  font-size: 20px;
  letter-spacing: 12px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  text-transform: uppercase;
  transition:color .2s ease-in-out;
  transition-delay: .1s;
}

a:before {
  content:'';
  position: absolute;
  top: 50%;
  left: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,left,opacity;
  transition-delay: 0s,.5s,.5s;
  transition-duration: .5s,.5s,0s;
}

a:hover:before {
  border-radius:100%;
  -webkit-border-radius:100%;
  opacity:1;
  left: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,left,transform;
  transition-delay:0s,0.2s,.2s;
  transition-duration: 0s,0.2s,.2s;
}

a:after {
  content:'';
  position: absolute;
  top: 50%;
  right: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,right,opacity;
  transition-delay: 0s,.2s,.2s;
  transition-duration: .2s,.2s,0s;
}

a:hover:after {
  opacity:1;
  right: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,right,transform;
  transition-delay:0s,0.2s,.2s;
  transition-duration: 0s,0.2s,.2s;
}

a:hover{
  color:#FFF;
}

<a href="#">Button</a>

Answer 2

我不确定您的问题是什么，但是如果没有转换，则可能是因为您写了transit ii on-delay而不是transition-delay。

我已经在Chrome和Firefox上尝试过您的代码，但没有发现区别。

您可以在以下网站上详细了解是否需要前缀：https://caniuse.com/#search=transform

悬停效果在Google Chrome中无法正常工作

2 个答案: