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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pug*_*azh 0

尝试下面的代码片段。

.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%);
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	156 次
最近记录：	9 年，3 月前