作者:胖蚂蚁 | 来源:互联网 | 2023-02-13 19:04
我试图让一个移动的边框CSS动画在广场上工作,但我不知道如何让它工作.它在圆上工作正常,因为我只使用关键帧的旋转过渡.这是我目前的标记.
.box {
width: 50px;
height: 50px;
margin: 50px auto;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.box .border {
position: absolute;
top: -4px;
left: -4px;
width: 50px;
height: 50px;
background: transparent;
border: 4px solid transparent;
border-top-color: orangered;
border-radius: 50%;
animation-name: border;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes border {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
1> Harry..:
有问题的动画是使用rotate
具有静止边界的变换来创建移动边界的错觉,而实际上并非如此.使用正方形,你不能使用类似的模型,因为当我们旋转正方形时它不像圆圈那样保持不变.
所以可用的选项是使用stroke-dashoffset
基于SVG 的动画,如下面的代码片段所示.该stroke-dasharray
属性提供笔划的长度/宽度(第一个参数)和空间的长度/宽度(第二个参数).该stroke-dashoffset
属性指定从应绘制笔划的起始位置开始的偏移量.
polygon {
stroke: red;
stroke-width: 3;
stroke-dasharray: 50, 750;
stroke-dashoffset: 0;
fill: none;
animation: border 5s linear infinite;
}
@keyframes border {
to {
stroke-dashoffset: -800;
}
}