HTML5 相邻单元互相吸引的果冻像素网格

可用来绘制边缘柔和的图像和文字。衔接处的柔和过渡通过border-radius和box-shadow来实现。

css3, grid, bubble

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1696
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var grid = { //You can play width this value
    width: 30, //cells X
    height: 20, //cells Y
    margin: 2 //Margin bewteen cells
};

var selector = $('#bubble-board'); //Bubble container

var prefix = (function() {
    var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice
            .call(styles)
            .join('')
            .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
        )[1],
        dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
    };
})();

var cell_width = selector.width() / grid.width;
var cell_height = cell_width;

$(function() {
    for (var j = 0; j < grid.width; j += 1) {
        for (var i = 0; i < grid.height; i += 1) {
            var grid_cell = $('<div>').addClass('grid-cell');
            var grid_cell_action = $('<a>').click(function() {
                $(this).parent().removeClass('tl tr br bl');
                if ($(this).parent().hasClass('on')) {
                    $(this).parent().removeClass('on');
                    un_checkAdjacent($(this).parent());
                } else {
                    $(this).parent().addClass('on');
                    adjacentCheck($(this).parent());
                }
            });

grid_cell_action.appendTo(grid_cell);
            grid_cell.appendTo(selector);

var css = {};
            css[prefix.css + 'transform'] = 'translate3d(' + (j * cell_width) + 'px,' + (i * cell_height) + 'px, 0)';

grid_cell.css(css).attr({
                'data-j': j,
                'data-i': i
            });
        }
    }

$('.grid-cell').css({
        width: cell_width,
        height: cell_height,
    });

$('.grid-cell > a').css({
        top: grid.margin / 2,
        right: grid.margin / 2,
        bottom: grid.margin / 2,
        left: grid.margin / 2
    });

$('h1').click(function() {
        $(this).fadeOut('slow', function() {
            $(this).remove();
        });
    });
});

function adjacentCheck(grid_element) {
    var j = parseInt(grid_element.attr('data-j'));
    var i = parseInt(grid_element.attr('data-i'));

if ($('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on')) {
        grid_element.addClass('tl');
        $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i - 1) + '"]').addClass('br');
    }
    if ($('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').hasClass('on')) {
        grid_element.addClass('tl tr');
        $('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').addClass('bl br');
    }
    if ($('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on')) {
        grid_element.addClass('tr');
        $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i - 1) + '"]').addClass('bl');
    }
    if ($('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        grid_element.addClass('tl bl');
        $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').addClass('tr br');
    }
    if ($('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        grid_element.addClass('tr br');
        $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').addClass('tl bl');
    }
    if ($('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on')) {
        grid_element.addClass('bl');
        $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i + 1) + '"]').addClass('tr');
    }
    if ($('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').hasClass('on')) {
        grid_element.addClass('bl br');
        $('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').addClass('tl tr');
    }
    if ($('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on')) {
        grid_element.addClass('br');
        $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i + 1) + '"]').addClass('tl');
    }
}

function un_checkAdjacent(grid_element) {
    var j = parseInt(grid_element.attr('data-j'));
    var i = parseInt(grid_element.attr('data-i'));

if ($('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i - 1) + '"]').removeClass('br')
    }
    if ($('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').hasClass('on')) {
        if (!$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').removeClass('bl');
        if (!$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').removeClass('br');
    }
    if ($('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i - 1) + '"]').removeClass('bl');
    }
    if ($('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        if (!$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').removeClass('tr');
        if (!$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').removeClass('br');
    }
    if ($('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        if (!$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i - 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i - 1) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').removeClass('tl');
        if (!$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').removeClass('bl');
    }
    if ($('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').hasClass('on')) {
        $('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i + 1) + '"]').removeClass('tr');
    }
    if ($('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').hasClass('on')) {
        if (!$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j - 1) + '"][data-i="' + (i) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').removeClass('tl');
        if (!$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').hasClass('on'))
            $('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').removeClass('tr');
    }
    if ($('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j) + '"][data-i="' + (i + 1) + '"]').hasClass('on') && !$('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i) + '"]').hasClass('on')) {
        $('.grid-cell[data-j="' + (j + 1) + '"][data-i="' + (i + 1) + '"]').removeClass('tl');
    }
}

编译

CSS

html,
body {
    background-color: #000;
    overflow: hidden;
    margin: 0;
}
#the-grid {
    width: 100%;
    height: 100%;
    position: relative;
}
h1 {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    line-height: 300px;
    color: #fff;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    font-family: sans-serif;
    font-weight: 100;
}
.grid-cell {
    position: absolute;
}
.grid-cell a {
    position: absolute;
    background-color: #222;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, .5);
    z-index: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
.grid-cell.on a {
    background-color: #f90;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.grid-cell a:hover {
    box-shadow: none;
}
.grid-cell.tl a {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
}
.grid-cell.tr a {
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}
.grid-cell.br a {
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
}
.grid-cell.bl a {
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
}

HTML

可用来绘制边缘柔和的图像和文字。衔接处的柔和过渡通过border-radius和box-shadow来实现。

css3, grid, bubble

编辑器支持Emmet

快捷键

可用来绘制边缘柔和的图像和文字。 衔接处的柔和过渡通过border-radius和box-shadow来实现。

css3, grid, bubble

HTML5 GSAP图像网格分割和悬停并拢交互动效

HTML5 CSS3在球形表面运动的彩色圆形元素

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

可用来绘制边缘柔和的图像和文字。衔接处的柔和过渡通过border-radius和box-shadow来实现。