frame边框阴影html,CSS3阴影框（shadow-box）代码在线编辑器

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var X = 26,

Y = 26;

var W = 20,

H = 20;

var A = [];

var selectedFrame = 0;

var canvas = $('canvas.grid');

var ctx = canvas[0].getContext('2d');

var shadow = $('div.draw');

var out = $('style.css');

var blur = $('input.blur');

var offset = $('input.offset');

var opacity = $('input.opacity');

var colorwheel = $('.colorwheel');

var cw = Raphael.colorwheel(colorwheel[0], 525, 256);

var pickColor = false;

var colorInput = $('input.color');

var loop = true;

var play = false;

reset();

cw.input(colorInput[0]);

shadow.click(drawShadow);

shadow.mousemove(drawShadow);

$('.reset').click(function() {

if (confirm('Are you Sure')) reset();

});

colorInput.click(color);

$('.panel').on('click', '.frame', select);

$('.panel').on('click', '.addFrame', add);

$('.panel').on('click', '.removeFrame', remove);

$('.panel').on('click', '.play', animate);

function animate() {

play = !play;

if (play) $(this).text('⏹');

else $(this).text('▶');

shadowToString();

}

function color() {

colorwheel.toggle();

pickColor = !pickColor;

}

function drawShadow(E) {

var o = offset.val();

var op = opacity.val();

var c = cw.color();

if (o < -W / 2) {

o = -W / 2;

offset.val(o);

}

if (op < 0) {

op = 0;

opacity.val(op);

}

if (op > 100) {

op = 100;

opacity.val(op);

}

var x = parseInt(E.offsetX / W),

y = parseInt(E.offsetY / H);

if (pickColor || (E.altKey && E.type == 'click')) {

cw.color(A[selectedFrame][x][y].c);

} else if (E.type == 'click' ||

(E.type == 'mousemove' && E.shiftKey)) {

var erase = E.ctrlKey;

A[selectedFrame][x][y].a = !erase;

if (!erase) {

A[selectedFrame][x][y].b = Math.abs(blur.val());

A[selectedFrame][x][y].o = Number(o);

A[selectedFrame][x][y].c = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + Number(op / 100) + ')';

ctx.strokeStyle = '#666';

} else {

ctx.strokeStyle = '#eee';

}

ctx.strokeRect(x * W, y * H, W, H);

}

shadowToString();

}

function shadowToString() {

var drawcss = '.draw { width: ' + (X * W) + 'px; height: ' + (Y * H) + 'px}';

var cssShadows = [];

var drawaftercss = '.draw:after { width: ' + W + 'px; height: ' + H + 'px; content: ""; display: block; transform: translate(-20px, -20px)';

if (A.length == 1 || !play) {

xyLoop(0, function(x, y) {

var s = A[selectedFrame][x][y];

if (s.a) cssShadows.push(' ' + (W + s.x * W) + 'px ' + (H + s.y * H) + 'px ' + s.b + 'px ' + s.o + 'px ' + s.c);

});

if (cssShadows.length) drawaftercss += '; box-shadow: ';

out.text(drawcss + drawaftercss + cssShadows.join(', ') + ' }');

} else {

drawaftercss += '; animation: shadowAnimation 2s infinite } ';

var animationcss = ' @keyframes shadowAnimation { ';

for (var f = 0; f < A.length; f++) {

cssShadows[f] = [];

xyLoop(0, function(x, y) {

var s = A[f][x][y];

if (s.a) cssShadows[f].push(' ' + (W + s.x * W) + 'px ' + (H + s.y * H) + 'px ' + s.b + 'px ' + s.o + 'px ' + s.c);

});

}

for (f = 0; f < cssShadows.length; f++) {

var p = $('.frame').eq(f).children('.percent').val();

var q = 'none';

if (cssShadows[f].length) q = cssShadows[f].join(', ');

if (p == 0 && loop) p += '%, 100'

animationcss += ' ' + p + '% { box-shadow: ' + q + ' } '

}

out.text(drawcss + drawaftercss + animationcss + ' } ');

}

}

function reset() {

out.css('top', (30 + Y * H) + 'px');

A = [

[]

];

canvas[0].width = X * W + 1;

canvas[0].height = Y * H + 1;

ctx.strokeStyle = 'white';

xyLoop(

function() {

A[0].push([]);

},

function(x, y) {

build(0, x, y);

ctx.strokeRect(x * W + .5, y * H + .5, W, H);

});

ctx.strokeStyle = 'grey';

selectedFrame = 0;

shadowToString();

}

function select() {

$('.frame.selected').removeClass('selected');

$(this).addClass('selected');

selectedFrame = $(this).index() - 1;

shadowToString();

return false;

}

function xyLoop(cb1, cb2) {

for (var x = 0; x < X; x++) {

if (cb1) cb1(x)

for (var y = 0; y < Y; y++) {

if (cb2) cb2(x, y)

}

}

}

function build(frame, x, y) {

A[frame][x].push({

a: false,

b: 0,

x: x,

y: y,

b: 0,

o: 0,

c: '#000000'

});

}

function copyItem(i) {

return {

a: i.a,

b: i.b,

x: i.x,

y: i.y,

b: i.b,

o: i.o,

c: i.c

};

}

function add() {

$('.frame.selected').removeClass('selected');

var f = $('.frame').last().clone();

f.children('.name').text('New Frame');

var p = f.prev().children('.percent');

if (!p.length) p = f.children('.percent');

f.children('.percent').val(parseInt(p.val()) + 1).attr('disabled', false);

f.children('.removeFrame').attr('disabled', false);

f.addClass('selected');

$('.frame').last().after(f);

selectedFrame = f.index() - 1;

A[selectedFrame] = [];

xyLoop(

function() {

A[selectedFrame].push([]);

},

function(x, y) {

A[selectedFrame][x].push(copyItem(A[selectedFrame - 1][x][y]));

}

);

shadowToString();

return false;

}

function remove() {

var t = $(this);

if (!t.attr('disabled')) {

var p = t.parent();

if (p.hasClass('selected')) {

p.removeClass('selected');

$('.frame').first().addClass('selected');

selectedFrame = 0;

}

A.splice(p.index() - 1, 1);

p.remove();

}

shadowToString();

return false;

}