Question

我有两个绝对定位的元素。一个是点，另一个是只有角的盒子-两者都是动画。我希望点始终位于悬停时显示的有角框的中心。但是我遇到的问题是，当我将浏览器窗口变小时，将弯角框稍微移到左侧，而当我将它变大时，将弯角框稍微移至右侧。两个元素都具有固定的宽度，并且都以百分比定位。我做错了什么？这是我所拥有的：

.wrapper {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: blue;
}

.pulse {
  position: absolute;
  top: 41.8%;
  left: 45.614%;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

.pulse:hover+.corners {
  visibility: visible;
  transform: scale(2);
  transition: all .6s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.corners {
  position: absolute;
  top: 43.65%;
  left: 46.35%;
  pointer-events: none;
  visibility: hidden;
}

.corners:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.corners-inner:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners-inner:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

<div class="wrapper">
  <span class="pulse"></span>
  <div class="corners"><span class="corners-inner"></span></div>
</div>

Answer 1

.wrapper {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: blue;
}

.pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

.pulse:hover+.corners {
  visibility: visible;
  transform: scale(2);
  transition: all .6s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

.corners:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.corners-inner:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners-inner:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

2个绝对定位的元素未按比例放置在一起的问题

1 个答案: