1
我需要在div上製作動畫邊框。我想出瞭如何用canvas重疊和一些javascript來實現，但現在它超級笨重。無論如何用CSS動畫來完成同樣的動畫？請看這個jsfiddle http://jsfiddle.net/L8ov2fk0/7/CSS動畫邊框
編輯：很多偉大的答案！有些我發現在這方面工作而其他方面沒有。我一直遇到的問題是，我的小提琴中的確切動畫是客戶想要的，我從來沒有能夠調整我發現的任何東西，甚至接近於此。
而且我的代碼
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;
不要以爲一個CSS動畫像這是可能的，但你可以創建一個比你的按鈕大一個像素的動畫gif（假設他們'靜態大小），你點擊可見 – 2015-04-02 16:15:38
雖然可以用CSS畫一條線 - 在svg上使用stroke-dasharray和stroke-dashoffset。 – Shikkediel 2015-04-02 16:17:34
這是一個答案的提示？ http://codepen.io/gc-nomade/pen/IGliC – 2015-04-02 16:19:02