6
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>
の方向を修正します。アニメーションの速度が異なることがわかります。私は偶数の期間のbcozを理解しています。しかし、とにかくこれを克服することがある –
うん、JSが関与することができますか？幅と高さが等しくない場合、アニメーションの持続時間は同じであってはなりません。 – Passerby