制作一个动画的边框动画，以顺时针圆圈进行

Question

我有兴趣准确地执行此动画。除了我希望该动画在执行

之类的事情时发生在代码中

$('#myJqueryAnimation').animate();

或类似的东西。我还希望实际的边界线在按钮周围行驶的时间长一点。这可能是微不足道的，但是我是CSS的新手，我该如何实现？

预先感谢。

Answer 1

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

myButton.classList.toggle('animated')

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

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

这是您的小提琴的叉子。