jQuery-UI 盒子变形动画

Animate Box Height

jQuery-UI

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//Plugin code
(function($) {

var colorArray = ["#333", "#fdfae9", "#e7fdd1", "#d2fdd9", "#cefbfd", "#cfe1fd", "#dacefd", "#fdc2ed", "#fdc3c3", "#fdc746"];
    //alert(colorArray.length)
    var background = colorArray[0];

$.fn.autoHeight = function(options) {
        var settings = $.extend({
            "auto": true,
            "width": 100,
            "height": 100,
            "background": background,
            "click": true,
            "changeBg": true,
        }, options);

return this.each(function() {
            var $this = $(this);

var elementWidth = settings.width;
            var elementHeight = settings.height;

$this.css("width", elementWidth);
            $this.css("height", elementHeight);
            $this.css("background-color", background);
            $this.css({
                "position": "absolute",
                "top": "50%",
                "left": "50%",
                "margin-left": -elementWidth / 2,
                "margin-top": -elementHeight / 2
            })

if (settings.auto && settings.click) {
                //console.log("auto = true"+"  "+"click = true")		
                function looping() {
                    var randomHt = parseInt(Math.random() * elementHeight);
                    var randomWt = parseInt(Math.random() * elementWidth);
                    var randomColor = colorArray[parseInt(Math.random() * colorArray.length)];
                    if (settings.changeBg) {
                        $this.stop().animate({
                            height: randomHt,
                            width: randomWt,
                            backgroundColor: randomColor,
                            marginLeft: -randomWt / 2,
                            marginTop: -randomHt / 2,
                            opacity: Math.random() * 1
                        }, 1500, 'easeInOutExpo');
                    } else {
                        $this.stop().animate({
                            height: randomHt,
                            width: randomWt,
                            marginLeft: -randomWt / 2,
                            marginTop: -randomHt / 2
                        }, 1500, 'easeInOutExpo');
                    }
                };
                window.setInterval(function() {
                    looping()
                }, 1500);
            } else if (settings.auto && !settings.click) {
                //console.log("auto = true"+"  "+"click = false")	
                var count = 0;

};
                var timer = window.setInterval(function() {
                    looping()
                }, 1500);
            } else if (!settings.auto && settings.click) {
                //console.log("auto = false"+"  "+"click = true")	
                $(this).click(function() {
                    var randomHt = parseInt(Math.random() * elementHeight);
                    var randomWt = parseInt(Math.random() * elementWidth);
                    var randomColor = colorArray[parseInt(Math.random() * colorArray.length)];
                    if (settings.changeBg) {
                        $this.stop().animate({
                            height: randomHt,
                            width: randomWt,
                            backgroundColor: randomColor,
                            marginLeft: -randomWt / 2,
                            marginTop: -randomHt / 2,
                            opacity: Math.random() * 1
                        }, 1500, 'easeInOutExpo');
                    } else {
                        $this.stop().animate({
                            height: randomHt,
                            width: randomWt,
                            marginLeft: -randomWt / 2,
                            marginTop: -randomHt / 2
                        }, 1500, 'easeInOutExpo');
                    }

});
            }
        });
    };
})(jQuery);

//Execution
$(document).ready(function() {
    var width = $(window).innerWidth();
    var height = $(window).innerHeight();

$('#container').autoHeight({
        "auto": true,
        "width": width,
        "height": height,
        "click": true,
        "changeBg": true
    });
    $('#container1').autoHeight({
        "auto": true,
        "width": width,
        "height": height,
        "click": true,
        "changeBg": true
    });
    $('#container2').autoHeight({
        "auto": true,
        "width": width,
        "height": height,
        "click": true,
        "changeBg": true
    });
    $('#container3').autoHeight({
        "auto": true,
        "width": width,
        "height": height,
        "click": true,
        "changeBg": true
    });

});

/*/options /*
  "auto" : true,  
  "click" : true,
  "changeBg" : true,
*/

编译

CSS

body {
    margin: 0;
    padding: 0;
}
body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate-rev {
    from {
        -webkit-transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes rotate-rev {
    from {
        -moz-transform: rotate(360deg);
    }
    to {
        -moz-transform: rotate(0deg);
    }
}
#container {
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-transition-timing-function: linear;
    -o-animation-name: rotate;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-transition-timing-function: linear;
    -ms-animation-name: rotate;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-transition-timing-function: linear;
}
#container2 {
    -webkit-animation-name: rotate-rev;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
    -moz-animation-name: rotate-rev;
    -moz-animation-duration: 12s;
    -moz-animation-iteration-count: infinite;
    -moz-transition-timing-function: linear;
    -o-animation-name: rotate-rev;
    -o-animation-duration: 12s;
    -o-animation-iteration-count: infinite;
    -o-transition-timing-function: linear;
    -ms-animation-name: rotate-rev;
    -ms-animation-duration: 12s;
    -ms-animation-iteration-count: infinite;
    -ms-transition-timing-function: linear;
}

HTML

Animate Box Height

jQuery-UI

编辑器支持Emmet

快捷键

Animate Box Height

jQuery-UI

拖拉型触发 | 解锁

游戏逻辑：位置交叉和上下

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：