制作以顺时针方向圈出的动画边框动画

Question

我对this animation exactly感兴趣。除非我希望这个动画在我执行类似

之类的代码时发生

<ngb-timepicker [(ngModel)]="timePickerFormat" [meridian]="meridian"></ngb-timepicker>

或类似的东西。我还希望在按钮周围移动的实际边界线的长度稍长。这可能是微不足道的，但我是CSS的新手，我怎样才能做到这一点？

提前致谢。

Answer 1

您可以添加类名，而不是使用:hover属性。然后，当您想要开始或停止动画时，只需切换此类名称。

＆＃13;

＆＃13;

myButton.classList.toggle('animated')

＆＃13;

button
{
    display: block;
    width: 300px;
    
    padding: 10px;
    text-align:center;
    
    background: #ccc;
    position: relative;
    overflow:hidden;
}

button:after
{
    position: absolute;
    background: black;
    top: -10px;
    left: -10px;
    
    width: 12px;
    height: 12px;
    display: block;
    
    content:"";
}

/*********************** .animated instead of :hover */
button.animated:after
{
    -webkit-animation: moveBorder 2s infinite;   
}

@-webkit-keyframes moveBorder
{
    0%{
    
        top:-10px;
        left: -10px;
        
    }
    25%
    {
        top: -10px;
        left: 318px;
    }
    50%
    {
        top: calc(100% - 2px);
        left: 318px;
    }
    75%
    {
        top: calc(100% - 2px);
        left: -10px;
    }
    100%
    {
        top: -10px;
        left: -10px;
    }
}

＆＃13;

<button id="myButton">Some link</button>

＆＃13;

＆＃13;

＆＃13;

Here是你小提琴的一个分支。