javascript - CSS 动画边框

Question

我需要在 div 上制作动画边框。我想出了如何使用 Canvas 覆盖和一些 javascript 来完成它，但它现在非常笨重。有没有办法用 CSS 动画完成同样的动画？请看这个 jsfiddle http://jsfiddle.net/L8ov2fk0/7/

编辑:很多很棒的答案!我发现有些人正在研究这个，有些则没有。我一直遇到的问题是，我的 fiddle 中的确切动画正是客户想要的，而且我永远无法将我发现的任何东西调整成甚至接近那个的东西。

还有我的代码

HTML

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

<canvas id="bordera"></canvas>
<canvas id="borderb"></canvas>

CSS

.button{
    padding:10px;
    border:1px solid red;
}
#buttona{
    position:absolute;
}

#buttonb{
    position: absolute;
    left:100px;
}

#bordera{
    position:absolute;
    width:81px;
    height:40px;
    pointer-events:none;
}

#borderb{
    position: absolute;
    left:100px;
    width:80px;
    height:40px;
    pointer-events:none;
}

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;

Answer 1

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

.button {
  padding:0.25em;
  display:inline-block;
  border:none;
  background-color:;
  background:
    linear-gradient(to top,red,red)  0 100%,
    linear-gradient(to right,red,red)100% bottom,
    linear-gradient(to top,red,red) bottom right ,
    linear-gradient(to top,red,red) top right  lightgray;
  background-size: 3px 0%, 0% 3px,3px 0%, 0% 3px;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  transition:1s;
  }
.button:hover {
  background-size: 3px 100%, 100% 3px,3px 100%, 100% 3px;
    

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

或由背景上的阴影制作的动画

.button {
  padding:0.25em;
  display:inline-block;
  border:none;
  background-color:;
  background:
    linear-gradient(to top,red,red)  0 100%,
    linear-gradient(to right,red,red)100% bottom,
    linear-gradient(to top,red,red) bottom right ,
    linear-gradient(to top,red,red) top right  lightgray;
   background-size: 3px 100%, 100% 3px,3px 100%, 100% 3px;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  box-shadow:inset 0 0 0 0 lightgray;
  transition:1s;
  }
.button:hover {
  box-shadow:inset 5em 2em 0 0 lightgray

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

其他 CSS 示例:http://codepen.io/gc-nomade/pen/IGliC http://codepen.io/gc-nomade/pen/bhxAL或 http://codepen.io/gc-nomade/pen/pKwby