Javascript CSS动画边框

我需要在一个div上制作一个动画边框。我知道如何使用画布覆盖和一些javascript来实现它，但现在它非常笨重。是否还有其他方法可以用CSS动画完成相同的动画？请看这个

编辑：很多很棒的答案！我发现有些人在做这件事，有些人没有。我一直遇到的问题是，我的小提琴中的确切动画是客户想要的，而我从来没有能够将我发现的任何东西调整到与之接近的程度

还有我的密码

HTML

Javascript

$('body').on('click', '#buttona', function (){
    DrawButtonBorder("bordera");
});

$('body').on('click', '#buttonb', function (){
    DrawButtonBorder("borderb");
});



/*animated borders*/
function Point(x, y, width, height, half) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.half = half;
}

Point.prototype.increment = function () {
    if (this.half == "upper") {
        if (this.y > 0 && this.x == 0)
            this.y--;
        else if (this.y == 0 && this.x < this.width)
            this.x++;
        else if (this.y < this.height / 2 && this.x == this.width)
            this.y++;
    }
    else {
        if (this.y < this.height && this.x == 0)
            this.y++;
        else if (this.y == this.height && this.x < this.width)
            this.x++;
        else if (this.y > this.height / 2 && this.x == this.width)
            this.y--;
    }
}

animatedBorder = null;
borderDrawn = "";
function DrawButtonBorder(id) {
    if (borderDrawn != id) {
        borderDrawn = id;
        CancelButtonBorder();
        ClearButtonBorder("bordera");
        ClearButtonBorder("borderb");

        var speed = 1;
        var canvas = document.getElementById(id);
        var context = canvas.getContext('2d');

        var style = getComputedStyle(canvas);

        var width = parseInt(style.width.replace("px", ""));
        width = parseInt(width / speed);

        var height = parseInt(style.height.replace("px", ""));
        height = parseInt(height / speed);

        context.canvas.width = width;
        context.canvas.height = height;

        var middle = parseInt(height / 2);
        var a = new Point(0, middle, width, height, "upper");
        var b = new Point(0, middle, width, height, "lower");

        function draw() {

            //upper half
            context.strokeStyle = '#D7A95A';
            context.moveTo(a.x, a.y);
            a.increment();
            context.lineTo(a.x, a.y);
            context.stroke();

            //lower half
            context.strokeStyle = '#D7A95A';
            context.moveTo(b.x, b.y);
            b.increment();
            context.lineTo(b.x, b.y);
            context.stroke();


            if (a.y > middle && b.y < middle)
                return;
            animatedBorder = requestAnimFrame(draw);
        }
        draw();
    }
}

function ClearButtonBorder(id) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.clearRect(0,0,context.canvas.width, context.canvas.height);
}

function CancelButtonBorder() {
    cancelAnimFrame(animatedBorder);
}

var requestAnimFrame = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        function (callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };

var cancelAnimFrame = window.cancelAnimationFrame ||
                        window.webkitCancelAnimationFrame ||
                        window.mozCancelAnimationFrame;

$（'body'）。在（'click'，'buttona'，函数（）{
DrawButtonBorder（“bordera”）；
});
$（'body'）。在（'click'，'#buttonb'，函数（）{
DrawButtonBorder（“borderb”）；
});
/*动画边框*/
功能点（x、y、宽度、高度、一半）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
这个.一半=一半；
}
Point.prototype.increment=函数（）{
if（this.half==“upper”）{
如果（this.y>0&&this.x==0）
这是我的名字；
else if（this.y==0&&this.xthis.height/2&&this.x==this.width）
这是我的名字；
}
}
animatedBorder=null；
边框画“”；
函数DrawButtonOrder（id）{
if（borderdraw！=id）{
borderdraw=id；
取消按钮顺序（）；
ClearButtonBorder（“bordera”）；
ClearButtonBorder（“borderb”）；
无功转速=1；
var canvas=document.getElementById（id）；
var context=canvas.getContext（'2d'）；
var style=getComputedStyle（画布）；
var-width=parseInt（style.width.replace（“px”），“”）；
宽度=parseInt（宽度/速度）；
var height=parseInt（style.height.replace（“px”）和“”）；
高度=parseInt（高度/速度）；
context.canvas.width=宽度；
context.canvas.height=高度；
var middle=parseInt（高度/2）；
var a=新点（0，中间，宽度，高度，“上”）；
var b=新点（0，中间，宽度，高度，“较低”）；
函数绘图（）{
//上半部
context.strokeStyle='#D7A95A'；
上下文。移动到（a.x，a.y）；
a、 增量（）；
上下文。lineTo（a.x，a.y）；
stroke（）；
//下半部
context.strokeStyle='#D7A95A'；
上下文。移动到（b.x，b.y）；
b、 增量（）；
上下文。lineTo（b.x，b.y）；
stroke（）；
如果（a.y>中间和b.y<中间）
回来
animatedBorder=requestAnimFrame（绘制）；
}
draw（）；
}
}
函数ClearButtonOrder（id）{
var canvas=document.getElementById（id）；
var context=canvas.getContext（'2d'）；
clearRect（0,0，context.canvas.width，context.canvas.height）；
}
函数cancelButtonOrder（）{
取消动画帧（动画边框）；
}
var requestAnimFrame=window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
var cancelAnimFrame=window.cancelAnimationFrame||
window.webkitCancelAnimationFrame||
window.mozCancelAnimationFrame；

创建一个div元素作为边框，将其放置在希望动画边框出现的元素的位置

.border{
    height: 10px; //Or whatever height for thickness
    background-color: black; //Or whichever color
    visibility: hidden; //So that it takes up space
}

单击该按钮后，将该类添加到border元素并将其可见性设置为visible

.extend{
  animation: expand 3s;
  -webkit-animation: expand 3s;
}

在css中包含此操作

/* Chrome, Safari, Opera */
@-webkit-keyframes expand {
    from {width: 0%;}
    to {width: 100%;}
}

/* Chrome, Safari, Opera */
@keyframes expand {
    from {width: 0%;}
    to {width: 100%;}
}

---

创建一个div元素作为边框，将其放置在希望动画边框出现的元素的位置

.border{
    height: 10px; //Or whatever height for thickness
    background-color: black; //Or whichever color
    visibility: hidden; //So that it takes up space
}

单击该按钮后，将该类添加到border元素并将其可见性设置为visible

.extend{
  animation: expand 3s;
  -webkit-animation: expand 3s;
}

在css中包含此操作

/* Chrome, Safari, Opera */
@-webkit-keyframes expand {
    from {width: 0%;}
    to {width: 100%;}
}

/* Chrome, Safari, Opera */
@keyframes expand {
    from {width: 0%;}
    to {width: 100%;}
}

---

您可以使用边框图像css样式：

---

您可以使用边框图像css样式：

---

您可以使用背景图像或渐变和背景大小

。按钮{
填充：0.25em；
显示：内联块；
边界：无；
背景色：；
背景：
线性梯度（至顶部、红色、红色）0 100%，
线性梯度（向右、红色、红色）100%底部，
线性渐变（顶部、红色、红色）右下角，
线性渐变（到顶部、红色、红色）右上角浅灰色；
背景尺寸：3px 0%，0%3px，3px 0%，0%3px；
背景重复：不重复，不重复，不重复，不重复；
过渡：1s；
}
.按钮：悬停{
背景尺寸：3px 100%，100%3px，3px 100%，100%3px；

按钮A
按钮B

您可以使用背景图像或渐变和背景大小

。按钮{
填充：0.25em；
显示：内联块；
边界：无；
背景色：；
背景：
线性梯度（至顶部、红色、红色）0 100%，
线性梯度（向右、红色、红色）100%底部，
线性渐变（顶部、红色、红色）右下角，
线性渐变（到顶部、红色、红色）右上角浅灰色；
背景尺寸：3px 0%，0%3px，3px 0%，0%3px；
背景重复：不重复，不重复，不重复，不重复；
过渡：1s；
}
.按钮：悬停{
背景尺寸：3px 100%，100%3px，3px 100%，100%3px；

按钮A
按钮B

如果将div转换为实际的

元素，则可以使用

：focus

伪类实现此效果

例如：

---

如果将div转换为实际的

元素，则可以使用

：focus

伪类实现此效果

例如：

---

不要认为这样的CSS动画是可能的，

<button id="buttona" class="button">Button A</button>
<button id="buttonb" class="button">Button B</button>

.button {
    padding:10px;
    background: none;
    outline: none;
    border:1px solid red;
}

#buttona, #buttonb {
    position:absolute;
}

#buttonb {
    left:100px;
}

.button:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  border-top: 1px #ccc solid;
  transition: width 3s;
}

.button:focus:after {
  width: 100%;
}