Question

我有一个div，它的高度和宽度都是动态的。我想要为该div设置一个虚线动画边框。我面临的问题是动画持续时间与高度和宽度无关。即无论高度和宽度如何，其动画应在所有角落处以相同的速度

  .dynamic {
    position: absolute;
    height: 30px;
    width: 300px;
    overflow: hidden
  }
  .dynamic::before {
    animation: slideDash 2.5s infinite linear;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    outline: 1px dashed #fff;
    box-shadow: 0 0 0 1px rgb(23, 163, 102);
    width: 200%;
  }
  .dynamic::after {
    animation: slideDash 2.5s infinite linear reverse;
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    outline: 1px dashed #fff;
    left: 0;
    box-shadow: 0 0 0 1px rgb(23, 163, 102);
    width: 200%;
  }
  .dynamic div::before {
    animation: slideDashRev 2.5s infinite linear reverse;
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    outline: 1px dashed #fff;
    box-shadow: 0 0 0 1px rgb(23, 163, 102);
    height: 200%;
  }
  .dynamic div::after {
    animation: slideDashRev 2.5s infinite linear;
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    outline: 1px dashed #fff;
    right: 0;
    box-shadow: 0 0 0 1px rgb(23, 163, 102);
    height: 200%;
  }
  @keyframes slideDash {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(0%);
    }
  }
  @keyframes slideDashRev {
    from {
      transform: translateY(-50%);
    }
    to {
      transform: translateY(0%);
    }
  }

<div class="dynamic">
  <div></div>
</div>

Answer 1

尝试下面的代码段。

.dynamic {
  position: relative;
  width: 300px;
  height: 30px;
  overflow: hidden;
  color: green;
}
.dynamic .line {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.dynamic .line:nth-of-type(1) {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-left: -164px;
  /* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  margin-left: 164px;
  /* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line i {
  left: 0;
  top: 0;
  width: 200%;
  display: block;
  position: absolute;
  border-bottom: 1px dashed;
  -webkit-animation: move 2.5s infinite linear reverse;
  animation: move 2.5s infinite linear reverse;
}
.dynamic .text {
  width: 100%;
  line-height: 30px;
  display: block;
  text-align: center;
  position: absolute;
  font-size: 18px;
}
@-webkit-keyframes move {
  from {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@keyframes move {
  from {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

<body>
  <div class="dynamic">
    <div class="line"><i></i>
    </div>
    <div class="line"><i></i>
    </div>
    <div class="line"><i></i>
    </div>
    <div class="line"><i></i>
    </div>
    <div class="text">Some text here</div>
  </div>

</body>

Answer 2

.dynamic {
    position: absolute;
    height: 50px;
    width:  50px;
    overflow: hidden
}

height和width具有相同的尺寸，使动画速度相同。

注意：您可以将50替换为您选择的任何维度。

Answer 3

只是纠正动画的方向

.dynamic {
  position: relative;
  width: 300px;
  height: 30px;
  overflow: hidden;
  color: red;
}
.dynamic .line {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.dynamic .line:nth-of-type(1) {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(1) i, .dynamic .line:nth-of-type(3) i {
  -webkit-animation: move 2.5s infinite linear reverse;
  animation: move 2.5s infinite linear reverse;
}
.dynamic .line:nth-of-type(2) i, .dynamic .line:nth-of-type(4) i {
  -webkit-animation: move 2.5s infinite linear;
  animation: move 2.5s infinite linear;
}
.dynamic .line i {
  left: 0;
  top: 0;
  width: 200%;
  display: block;
  position: absolute;
  border-bottom: 1px dashed;
}
.dynamic .text {
  width: 100%;
  line-height: 30px;
  display: block;
  text-align: center;
  position: absolute;
  font-size: 18px;
}
@-webkit-keyframes move {
  from {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@keyframes move {
  from {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

<body>
  <div class="dynamic">
    <div class="line"><i></i>
    </div>
    <div class="line"><i></i>
    </div>
    <div class="line"><i></i>
    </div>
    <div class="line"><i></i>
    </div>
    <div class="text">Same Direction!!</div>
  </div>

</body>

动画持续时间应相对于高度和宽度

3 个答案: