基于mo.js实现的爱与恨选择题趣味动画

Love or Hate Animation Show Mo.js是一款Web运动动画开发库。本例包含丰富的变形动画元素（字符翻跟头等体操动作），可用于在线测试、用户调查类营销页面。

html5, template, move

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
var _typeof4 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
    return typeof obj;
} : function(obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
}; // the readable code is here: https://github.com/legomushroom/shape-demo3
/******/
(function(modules) { // webpackBootstrap
    /******/ // The module cache
    /******/
    var installedModules = {}; /******/ // The require function
    /******/
    function __webpack_require__(moduleId) { /******/ // Check if module is in cache
            /******/
            if (installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache)
            /******/
            var module = installedModules[moduleId] = { /******/
                exports: {},
                /******/
                id: moduleId,
                /******/
                loaded: false /******/
            }; /******/ // Execute the module function
            /******/
            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded
            /******/
            module.loaded = true; /******/ // Return the exports of the module
            /******/
            return module.exports; /******/
        } /******/ // expose the modules object (__webpack_modules__)
        /******/
    __webpack_require__.m = modules; /******/ // expose the module cache
    /******/
    __webpack_require__.c = installedModules; /******/ // __webpack_public_path__
    /******/
    __webpack_require__.p = "build/"; /******/ // Load entry module and return exports
    /******/
    return __webpack_require__(0); /******/
})( /************************************************************************/ /******/ [ /* 0 */ /***/ function(module, exports, __webpack_require__) {
    module.exports = __webpack_require__(1); /***/
}, /* 1 */ /***/ function(module, exports, __webpack_require__) {
    'use strict';
    exports.__esModule = true;
    var _classCallCheck2 = __webpack_require__(2);
    var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
    var _possibleConstructorReturn2 = __webpack_require__(3);
    var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
    var _inherits2 = __webpack_require__(72);
    var _inherits3 = _interopRequireDefault(_inherits2);
    var _classlistPolyfill = __webpack_require__(80);
    var _classlistPolyfill2 = _interopRequireDefault(_classlistPolyfill);
    var _mojsPlayer = __webpack_require__(81);
    var _mojsPlayer2 = _interopRequireDefault(_mojsPlayer);
    var _module = __webpack_require__(82);
    var _module2 = _interopRequireDefault(_module);
    var _colors = __webpack_require__(83);
    var _colors2 = _interopRequireDefault(_colors);
    var _showButton = __webpack_require__(84);
    var _showButton2 = _interopRequireDefault(_showButton);
    var _modal = __webpack_require__(87);
    var _modal2 = _interopRequireDefault(_modal);
    var _modalHide = __webpack_require__(100);
    var _modalHide2 = _interopRequireDefault(_modalHide);
    var _characters = __webpack_require__(101);
    var _characters2 = _interopRequireDefault(_characters);

function _interopRequireDefault(obj) {
            return obj && obj.__esModule ? obj : {
                default: obj
            };
        } // require('../css/main.postcss.css');
        // const CLASSES = require('../css/main.postcss.css.json');
        // import AddButton  from './components/add-button/add-button';
    var Demo = function(_Module) {
        (0, _inherits3.default)(Demo, _Module);

function _interopRequireDefault(obj) {
                        return obj && obj.__esModule ? obj : {
                            default: obj
                        };
                    } // TODO
                    // fix timeline reset if progress === 1
                __webpack_require__(160);
                var CLASSES = __webpack_require__(162);
                var MojsPlayer = function(_Module) {
                    (0, _inherits3.default)(MojsPlayer, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            var Icons = function(_Module) {
                (0, _inherits3.default)(Icons, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(108);
            var CLASSES = __webpack_require__(110);
            var SLIDER_CLASSES = __webpack_require__(107);
            var PlayerSlider = function(_Module) {
                (0, _inherits3.default)(PlayerSlider, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(105);
            var CLASSES = __webpack_require__(107);
            var Slider = function(_Module) {
                (0, _inherits3.default)(Slider, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(95);
            var CLASSES = __webpack_require__(99);
            var Handle = function(_Module) {
                (0, _inherits3.default)(Handle, _Module);

function removeStyleElement(styleElement) {
                styleElement.parentNode.removeChild(styleElement);
                var idx = styleElementsInsertedAtTop.indexOf(styleElement);
                if (idx >= 0) {
                    styleElementsInsertedAtTop.splice(idx, 1);
                }
            }

function createStyleElement(options) {
                var styleElement = document.createElement("style");
                styleElement.type = "text/css";
                insertStyleElement(options, styleElement);
                return styleElement;
            }

function createLinkElement(options) {
                var linkElement = document.createElement("link");
                linkElement.rel = "stylesheet";
                insertStyleElement(options, linkElement);
                return linkElement;
            }

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(102);
            var CLASSES = __webpack_require__(104);
            var Track = function(_Handle) {
                (0, _inherits3.default)(Track, _Handle);

function _interopRequireDefault(obj) {
                    return obj && obj.__esModule ? obj : {
                        default: obj
                    };
                } // require('css/blocks/handle.postcss.css');
                // let CLASSES = require('css/blocks/handle.postcss.css.json');
            var Ripple = function(_Module) {
                (0, _inherits3.default)(Ripple, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(120);
            var CLASSES = __webpack_require__(122);
            var IconButton = function(_Button) {
                (0, _inherits3.default)(IconButton, _Button);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(113);
            var CLASSES = __webpack_require__(115);
            var Icon = function(_Module) {
                (0, _inherits3.default)(Icon, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(117);
            var CLASSES = __webpack_require__(119);
            var Button = function(_Module) {
                (0, _inherits3.default)(Button, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(132);
            var CLASSES = __webpack_require__(134);
            var SpeedControl = function(_Module) {
                (0, _inherits3.default)(SpeedControl, _Module);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(129);
            var CLASSES = __webpack_require__(131);
            var LabelButton = function(_ButtonSwitch) {
                (0, _inherits3.default)(LabelButton, _ButtonSwitch);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(126);
            var CLASSES = __webpack_require__(128);
            var ButtonSwitch = function(_Button) {
                (0, _inherits3.default)(ButtonSwitch, _Button);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(140);
            var CLASSES = __webpack_require__(142); // PLAYER_BTN_CLASSES = require('css/blocks/player-button.postcss.css.json');
            var PlayButton = function(_IconFork) {
                (0, _inherits3.default)(PlayButton, _IconFork);

function _interopRequireDefault(obj) {
                    return obj && obj.__esModule ? obj : {
                        default: obj
                    };
                } // import HammerJS from 'hammerjs'
            __webpack_require__(137);
            var CLASSES = __webpack_require__(139);
            var IconFork = function(_ButtonSwitch) {
                (0, _inherits3.default)(IconFork, _ButtonSwitch);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(144);
            var CLASSES = __webpack_require__(146);
            var StopButton = function(_IconButton) {
                (0, _inherits3.default)(StopButton, _IconButton);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(152);
            var CLASSES = __webpack_require__(154);
            var RepeatButton = function(_OpacitySwitch) {
                (0, _inherits3.default)(RepeatButton, _OpacitySwitch);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(149);
            var CLASSES = __webpack_require__(151);
            var OpacitySwitch = function(_ButtonSwitch) {
                (0, _inherits3.default)(OpacitySwitch, _ButtonSwitch);

function _interopRequireDefault(obj) {
                    return obj && obj.__esModule ? obj : {
                        default: obj
                    };
                } // require('css/blocks/repeat-button.postcss.css');
                // let CLASSES = require('css/blocks/repeat-button.postcss.css.json');
            var BoundsButton = function(_RepeatButton) {
                (0, _inherits3.default)(BoundsButton, _RepeatButton);

function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : {
                    default: obj
                };
            }
            __webpack_require__(157);
            var CLASSES = __webpack_require__(159),
                className = 'hide-button';
            var HideButton = function(_ButtonSwitch) {
                (0, _inherits3.default)(HideButton, _ButtonSwitch);

function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }
    var VibroButton = function(_Module) {
        (0, _inherits3.default)(VibroButton, _Module);

function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }
    var modalHide = new _modalHide2.default();
    var Modal = function(_Module) {
        (0, _inherits3.default)(Modal, _Module);

function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }
    var ModalIn = function(_Module) {
        (0, _inherits3.default)(ModalIn, _Module);

function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }
    var ModalHide = function(_Module) {
        (0, _inherits3.default)(ModalHide, _Module);

function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }
    var Characters = function(_Module) {
        (0, _inherits3.default)(Characters, _Module);

function Characters() {
            (0, _classCallCheck3.default)(this, Characters);
            return (0, _possibleConstructorReturn3.default)(this, _Module.apply(this, arguments));
        }
        Characters.prototype._render = function _render() {
            var _angle, _y, _y2, _angle2, _y3, _y4, _x2;
            var parent = this._findEl('#js-modal-hide-layer');
            var BubbleSpeech = function(_mojs$CustomShape) {
                (0, _inherits3.default)(BubbleSpeech, _mojs$CustomShape);

function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }
    var GeometricShapes = function(_Module) {
        (0, _inherits3.default)(GeometricShapes, _Module);

编译

CSS

body,
html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background: rgba(241, 226, 215, 0.2);
    position: relative;
    background: #FD5061;
    font-family: Arial, Open Sans, sans-serif;
}
.character {
    color: white;
    font-size: 68px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: .475;
    font-family: Oswald, monospace;
}
.add-button {
    overflow: hidden;
    border-radius: 50%;
}
.modal-wrapper {
    position: absolute;
    width: 248px;
    height: 184px;
    margin-left: -124px;
    margin-top: -92px;
    left: 50%;
    top: 50%;
    z-index: 1;
}
.modal,
.modal__shake {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.modal-shape {
    border-radius: 35px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .25);
    overflow: hidden;
}
.modal__inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}
.modal__text {
    text-align: center;
    font-size: 16px;
    position: absolute;
    width: 100%;
    height: 50px;
    padding-top: 34px;
    color: #29363B;
    letter-spacing: 1px;
    backface-visibility: hidden;
}
.modal__buttons {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    text-align: center;
}
.modal__button {
    background: white;
    border-radius: 40px;
    display: inline-block;
    padding: 5px 10px;
    width: 65px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    color: #29363B;
    letter-spacing: 1px;
    backface-visibility: hidden;
}
.modal__button:hover {
    opacity: 0.95;
}
.modal__button--love {
    transform: rotate(3deg);
}
.modal__button--hate {
    margin-left: 15px;
    transform: rotate(-2deg);
}
.layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
}
.layer--modal {
    z-index: 5;
}
.layer--modal-hide {
    z-index: 10;
}

HTML

<style>
    .what:hover {
        cursor: pointer;
        opacity: .75;
    }
    .what {
        display: block;
        width: 28px;
        height: 28px;
        position: fixed;
        right: 20px;
        bottom: 20px;
        background-size: 100% 100%;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjMgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2xpY2UgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPHBhdGggZD0iTTExLjUsMjIgQzE3LjI5ODk4OTksMjIgMjIsMTcuMjk4OTg5OSAyMiwxMS41IEMyMiw1LjcwMTAxMDEzIDE3LjI5ODk4OTksMSAxMS41LDEgQzUuNzAxMDEwMTMsMSAxLDUuNzAxMDEwMTMgMSwxMS41IEMxLDE3LjI5ODk4OTkgNS43MDEwMTAxMywyMiAxMS41LDIyIFoiIGlkPSJPdmFsIiBzdHJva2U9IiMzQTA1M0EiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0xMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgTDEwLjc4NTE1NjIsMTMuNDYyODkwNiBDMTAuNzgxMjUsMTMuMjQ4MDQ1OCAxMC43NzkyOTY5LDEzLjExNzE4NzcgMTAuNzc5Mjk2OSwxMy4wNzAzMTI1IEMxMC43NzkyOTY5LDEyLjU4NTkzNTEgMTAuODU5Mzc0MiwxMi4xODc1MDE2IDExLjAxOTUzMTIsMTEuODc1IEMxMS4xNzk2ODgzLDExLjU2MjQ5ODQgMTEuNDk5OTk3NiwxMS4yMTA5Mzk1IDExLjk4MDQ2ODgsMTAuODIwMzEyNSBDMTIuNDYwOTM5OSwxMC40Mjk2ODU1IDEyLjc0ODA0NjQsMTAuMTczODI4NyAxMi44NDE3OTY5LDEwLjA1MjczNDQgQzEyLjk4NjMyODgsOS44NjEzMjcxNyAxMy4wNTg1OTM4LDkuNjUwMzkxNzggMTMuMDU4NTkzOCw5LjQxOTkyMTg4IEMxMy4wNTg1OTM4LDkuMDk5NjA3NzcgMTIuOTMwNjY1Myw4LjgyNTE5NjQ2IDEyLjY3NDgwNDcsOC41OTY2Nzk2OSBDMTIuNDE4OTQ0LDguMzY4MTYyOTIgMTIuMDc0MjIwOSw4LjI1MzkwNjI1IDExLjY0MDYyNSw4LjI1MzkwNjI1IEMxMS4yMjI2NTQyLDguMjUzOTA2MjUgMTAuODczMDQ4Myw4LjM3MzA0NTY4IDEwLjU5MTc5NjksOC42MTEzMjgxMiBDMTAuMzEwNTQ1NSw4Ljg0OTYxMDU3IDEwLjExNzE4OCw5LjIxMjg4ODE4IDEwLjAxMTcxODgsOS43MDExNzE4OCBMOC41LDkuNTEzNjcxODggQzguNTQyOTY4OTYsOC44MTQ0NDk2MyA4Ljg0MDgxNzU1LDguMjIwNzA1NTcgOS4zOTM1NTQ2OSw3LjczMjQyMTg4IEM5Ljk0NjI5MTgzLDcuMjQ0MTM4MTggMTAuNjcxODcwNSw3IDExLjU3MDMxMjUsNyBDMTIuNTE1NjI5Nyw3IDEzLjI2NzU3NTMsNy4yNDcwNjc4NCAxMy44MjYxNzE5LDcuNzQxMjEwOTQgQzE0LjM4NDc2ODQsOC4yMzUzNTQwMyAxNC42NjQwNjI1LDguODEwNTQzNTkgMTQuNjY0MDYyNSw5LjQ2Njc5Njg4IEMxNC42NjQwNjI1LDkuODMwMDc5OTQgMTQuNTYxNTI0NSwxMC4xNzM4MjY1IDE0LjM1NjQ0NTMsMTAuNDk4MDQ2OSBDMTQuMTUxMzY2MiwxMC44MjIyNjcyIDEzLjcxMjg5NCwxMS4yNjM2NjkxIDEzLjA0MTAxNTYsMTEuODIyMjY1NiBDMTIuNjkzMzU3NiwxMi4xMTEzMjk2IDEyLjQ3NzUzOTUsMTIuMzQzNzQ5MSAxMi4zOTM1NTQ3LDEyLjUxOTUzMTIgQzEyLjMwOTU2OTksMTIuNjk1MzEzNCAxMi4yNzE0ODQzLDEzLjAwOTc2MzQgMTIuMjc5Mjk2OSwxMy40NjI4OTA2IEwxMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgWiBNMTAuNzg1MTU2MiwxNS42Nzc3MzQ0IEwxMC43ODUxNTYyLDE0LjAzMTI1IEwxMi40MzE2NDA2LDE0LjAzMTI1IEwxMi40MzE2NDA2LDE1LjY3NzczNDQgTDEwLjc4NTE1NjIsMTUuNjc3NzM0NCBaIiBpZD0iPyIgZmlsbD0iIzNBMDUzQSI+PC9wYXRoPiAgICA8L2c+PC9zdmc+);
    }
</style>
<a href="https://mojs.io/tutorials/shape/" class="what" title="tutorial" target="_blank"></a>

Love or Hate Animation Show Mo.js是一款Web运动动画开发库。本例包含丰富的变形动画元素（字符翻跟头等体操动作），可用于在线测试、用户调查类营销页面。

html5, template, move

编辑器支持Emmet

快捷键

Love or Hate Animation Show Mo.js是一款Web运动动画开发库。 本例包含丰富的变形动画元素（字符翻跟头等体操动作），可用于在线测试、用户调查类营销页面。

html5, template, move

基于Velocity.js实现的幻灯片（页面垂直滚动轮播）动画

使用Flipping.animationFrame.js实现的响应式房屋变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Love or Hate Animation Show Mo.js是一款Web运动动画开发库。本例包含丰富的变形动画元素（字符翻跟头等体操动作），可用于在线测试、用户调查类营销页面。