我正在尝试使用纯CSS实现环绕式边框动画。目前的方法是使用:before和:after伪元素进行大小更改。一个用于顶部和右侧边框,另一个用于底部和左侧边框。但是,由于宽度和高度的差异,每个边框的时间相等,但由于宽度比高度大得多,因此看起来速度要快得多,导致出现奇怪的效果。您如何在不知道div大小的情况下修复它?同时,欢迎任何使用SCSS /原始CSS获得相同动画的不同方法。看起来我无法更改SO片段的大小,但如果您想玩一下,这里是一个codepen链接:https://codepen.io/lollobaldo2000/pen/KKPazNw?editors=1100。
* {
box-sizing: border-box;
}
body {
background: black;
}
.square {
background: black;
display: block;
width: 500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px auto auto -250px;
}
.square:before, .square:after {
content: '';
width: 0%;
height: 0%;
position: absolute;
border: 1px solid #FB0;
animation-fill-mode: forwards;
}
.square:before {
left: 0;
top: 0;
border-bottom: 0;
border-left: 0;
animation: btm 2s ease-in forwards;
}
.square:after {
visibility: hidden;
right: 0;
bottom: 0;
border-top: 0;
border-right: 0;
animation: btm 2s 2s ease-out forwards;
}
@keyframes btm {
0% {
visibility: visible;
width: 0;
height: 0;
}
50% {
width: 100%;
height: 0;
}
100% {
width: 100%;
height: calc(100% - 1px);
visibility: visible;
}
}
<div class="square">
</div>
<svg>
标签? - Lorenzo<style>
包含在SVG中。请看我添加的答案。 - Lorenzo