Animate.css 原质化设计风格的分层显示

Material Design Hierarchical Display + Animate.css Source: https://github.com/zavoloklom/material-design-hierarchical-display

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

var el = $('#demo');

var resetAndStart = function(el) {
        el.children().last().off('webkitAnimationEnd animationend');
        el.data('zmd.hierarchicalDisplay', false).hierarchicalDisplay();
    }

// Action
    $('#action').change(function() {
        var value = $(this).val();
        el.data('action', value);
        resetAndStart(el);
    });

// Speed
    $('#speed').change(function() {
        var value = $(this).val();
        el.data('speed', value);
        resetAndStart(el);
    });

// Animation In
    $('#animationIn').change(function() {
        var value = $(this).val();
        el.data('animation-in', value);
        el.children().each(function() {
            $(this).attr('class', '');
        });
        resetAndStart(el);
    });

// Animation Out
    $('#animationOut').change(function() {
        var value = $(this).val();
        el.data('animation-out', value);
        el.children().each(function() {
            $(this).attr('class', '');
        });
        resetAndStart(el);
    });

// Start Animation button handler
    $('#start').on('click', function() {
        el.children().each(function() {
            $(this).attr('class', '');
        });
        if ($('#action').val() == 'show') {
            el.removeClass('in');
        }
        if ($('#action').val() === 'hide') {
            el.addClass('in');
        }
        resetAndStart(el);
    });

// Block button when animation starts, unblock when ends
    el
        .on('show.zmd.hierarchicalDisplay', function() {
            $('#start').attr('disabled', true).css('opacity', '0.3');
        })
        .on('hide.zmd.hierarchicalDisplay', function() {
            $('#start').attr('disabled', true).css('opacity', '0.3');
        })
        .on('shown.zmd.hierarchicalDisplay', function() {
            $('#start').attr('disabled', false).css('opacity', '1');
        })
        .on('hidden.zmd.hierarchicalDisplay', function() {
            $('#start').attr('disabled', false).css('opacity', '1');
        })

// Add active class class to elements onclick just for fun
    $('#demo').on('click', 'div', function() {
        $(this).toggleClass('active');
    })

});

编译

CSS

/* ----------------------
You need to include 
- animate.min.css from https://github.com/daneden/animate.css
- zmd.hierarchical-display.min.css from https://github.com/zavoloklom/material-design-hierarchical-display is optional
-------------------------*/
/* -----------------------
demo style - you don't need it in your projects 
-------------------------*/
/* -- import Roboto Font ---------------------------- */
/* -- Box model ------------------------------- */

@import "https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic";
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* -- Demo style ------------------------------- */
    
    box-sizing: border-box;
}
html,
body {
    position: relative;
    min-height: 100%;
    height: 100%;
}
html {
    position: relative;
    overflow-x: hidden;
    margin: 16px;
    padding: 0;
    min-height: 100%;
}
body {
    font-family: 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #212121;
    background-color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.main {
    margin: 20px auto;
    max-width: 960px;
}
strong {
    font-wieght: 500;
}
h1 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
    font-weight: 400;
    color: #212121;
    text-transform: inherit;
    margin-bottom: 8px;
}
h2 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.1px;
    font-weight: 400;
    color: #212121;
}
#demo {
    position: relative;
    margin: 30px auto;
    width: 620px;
    padding: 0;
}
#demo > * {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border: none;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    background-color: #e91e63;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#demo > *:hover {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#demo > *.active {
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

HTML

<div class="main">
    <h1 style="text-align: center;">Material Design Hierarchical Display + Animate.css</h1>
    
    <div id="demo" data-animation="hierarchical-display" data-animation-in="bounceIn" data-speed="3">
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_01.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_02.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_03.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_04.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_05.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_06.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_07.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_08.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_09.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_10.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_11.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_12.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_13.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_14.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_15.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_16.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_17.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_18.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_19.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_20.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_21.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_22.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_23.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_24.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_25.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_26.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_27.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_28.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_29.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_30.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_31.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_32.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_33.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_34.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_35.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_36.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_37.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_38.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_39.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_40.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_41.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_42.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_43.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_44.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_45.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_46.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_47.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_48.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_49.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_50.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_51.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_52.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_53.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_54.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_55.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_56.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_57.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_58.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_59.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_60.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_61.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_62.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_63.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_64.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_65.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_66.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_67.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_68.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_69.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_70.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_71.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_72.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_73.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_74.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_75.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_76.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_77.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_78.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_79.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_80.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_81.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_82.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_83.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_84.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_85.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_86.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_87.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_88.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_89.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_90.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_91.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_92.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_93.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_94.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_95.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_96.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_97.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_98.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_99.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_100.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_101.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_102.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_103.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_104.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_105.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_106.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_107.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_108.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_109.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_110.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_111.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_112.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_113.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_114.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_115.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_116.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_117.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_118.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_119.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_120.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_121.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_122.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_123.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_124.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_125.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_126.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_127.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_128.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_129.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_130.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_131.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_132.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_133.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_134.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_135.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_136.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_137.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_138.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_139.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_140.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_141.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_142.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_143.jpg');"></div>
        <div style="background-image: url('https://raw.githubusercontent.com/zavoloklom/material-design-hierarchical-display/master/demo/images/md-hd_144.jpg');"></div>
    </div>

<div style="width: 45%; display: inline-block; vertical-align: top">
        <h2>Animation Constructor</h2>
        <p>
            <select id="action" name="action">
                <option selected value="show">show</option>
                <option value="hide">hide</option>
                <option value="toggle">toggle</option>
            </select>
            <label for="action">Action</label>
        </p>
        <p>
            <input id="speed" type="number" name="speed" min="1" max="10" value="3">
            <label for="speed">Speed</label>
        </p>
        <p>
            <select id="animationIn" name="animationIn">
                <optgroup label="Attention Seekers">
                    <option value="bounce">bounce</option>
                    <option value="flash">flash</option>
                    <option value="pulse">pulse</option>
                    <option value="rubberBand">rubberBand</option>
                    <option value="shake">shake</option>
                    <option value="swing">swing</option>
                    <option value="tada">tada</option>
                    <option value="wobble">wobble</option>
                    <option value="jello">jello</option>
                </optgroup>

<optgroup label="Bouncing Entrances">
                    <option selected value="bounceIn">bounceIn</option>
                    <option value="bounceInDown">bounceInDown</option>
                    <option value="bounceInLeft">bounceInLeft</option>
                    <option value="bounceInRight">bounceInRight</option>
                    <option value="bounceInUp">bounceInUp</option>
                </optgroup>

<optgroup label="Bouncing Exits">
                    <option value="bounceOut">bounceOut</option>
                    <option value="bounceOutDown">bounceOutDown</option>
                    <option value="bounceOutLeft">bounceOutLeft</option>
                    <option value="bounceOutRight">bounceOutRight</option>
                    <option value="bounceOutUp">bounceOutUp</option>
                </optgroup>

<optgroup label="Fading Entrances">
                    <option value="fadeIn">fadeIn</option>
                    <option value="fadeInDown">fadeInDown</option>
                    <option value="fadeInDownBig">fadeInDownBig</option>
                    <option value="fadeInLeft">fadeInLeft</option>
                    <option value="fadeInLeftBig">fadeInLeftBig</option>
                    <option value="fadeInRight">fadeInRight</option>
                    <option value="fadeInRightBig">fadeInRightBig</option>
                    <option value="fadeInUp">fadeInUp</option>
                    <option value="fadeInUpBig">fadeInUpBig</option>
                </optgroup>

<optgroup label="Fading Exits">
                    <option value="fadeOut">fadeOut</option>
                    <option value="fadeOutDown">fadeOutDown</option>
                    <option value="fadeOutDownBig">fadeOutDownBig</option>
                    <option value="fadeOutLeft">fadeOutLeft</option>
                    <option value="fadeOutLeftBig">fadeOutLeftBig</option>
                    <option value="fadeOutRight">fadeOutRight</option>
                    <option value="fadeOutRightBig">fadeOutRightBig</option>
                    <option value="fadeOutUp">fadeOutUp</option>
                    <option value="fadeOutUpBig">fadeOutUpBig</option>
                </optgroup>

<optgroup label="Flippers">
                    <option value="flip">flip</option>
                    <option value="flipInX">flipInX</option>
                    <option value="flipInY">flipInY</option>
                    <option value="flipOutX">flipOutX</option>
                    <option value="flipOutY">flipOutY</option>
                </optgroup>

<optgroup label="Lightspeed">
                    <option value="lightSpeedIn">lightSpeedIn</option>
                    <option value="lightSpeedOut">lightSpeedOut</option>
                </optgroup>

<optgroup label="Rotating Entrances">
                    <option value="rotateIn">rotateIn</option>
                    <option value="rotateInDownLeft">rotateInDownLeft</option>
                    <option value="rotateInDownRight">rotateInDownRight</option>
                    <option value="rotateInUpLeft">rotateInUpLeft</option>
                    <option value="rotateInUpRight">rotateInUpRight</option>
                </optgroup>

<optgroup label="Rotating Exits">
                    <option value="rotateOut">rotateOut</option>
                    <option value="rotateOutDownLeft">rotateOutDownLeft</option>
                    <option value="rotateOutDownRight">rotateOutDownRight</option>
                    <option value="rotateOutUpLeft">rotateOutUpLeft</option>
                    <option value="rotateOutUpRight">rotateOutUpRight</option>
                </optgroup>

<optgroup label="Sliding Entrances">
                    <option value="slideInUp">slideInUp</option>
                    <option value="slideInDown">slideInDown</option>
                    <option value="slideInLeft">slideInLeft</option>
                    <option value="slideInRight">slideInRight</option>

</optgroup>
                <optgroup label="Sliding Exits">
                    <option value="slideOutUp">slideOutUp</option>
                    <option value="slideOutDown">slideOutDown</option>
                    <option value="slideOutLeft">slideOutLeft</option>
                    <option value="slideOutRight">slideOutRight</option>

</optgroup>

<optgroup label="Zoom Entrances">
                    <option value="zoomIn">zoomIn</option>
                    <option value="zoomInDown">zoomInDown</option>
                    <option value="zoomInLeft">zoomInLeft</option>
                    <option value="zoomInRight">zoomInRight</option>
                    <option value="zoomInUp">zoomInUp</option>
                </optgroup>

<optgroup label="Zoom Exits">
                    <option value="zoomOut">zoomOut</option>
                    <option value="zoomOutDown">zoomOutDown</option>
                    <option value="zoomOutLeft">zoomOutLeft</option>
                    <option value="zoomOutRight">zoomOutRight</option>
                    <option value="zoomOutUp">zoomOutUp</option>
                </optgroup>

<optgroup label="Specials">
                    <option value="hinge">hinge</option>
                    <option value="rollIn">rollIn</option>
                    <option value="rollOut">rollOut</option>
                </optgroup>
            </select>
            <label for="animationIn">Animation In</label>
        </p>
        <p>
            <select id="animationOut" name="animationOut">
                <optgroup label="Attention Seekers">
                    <option value="bounce">bounce</option>
                    <option value="flash">flash</option>
                    <option value="pulse">pulse</option>
                    <option value="rubberBand">rubberBand</option>
                    <option value="shake">shake</option>
                    <option value="swing">swing</option>
                    <option value="tada">tada</option>
                    <option value="wobble">wobble</option>
                    <option value="jello">jello</option>
                </optgroup>

<optgroup label="Bouncing Entrances">
                    <option value="bounceIn">bounceIn</option>
                    <option value="bounceInDown">bounceInDown</option>
                    <option value="bounceInLeft">bounceInLeft</option>
                    <option value="bounceInRight">bounceInRight</option>
                    <option value="bounceInUp">bounceInUp</option>
                </optgroup>

</optgroup>

<optgroup label="Zoom Exits">
                    <option selected value="zoomOut">zoomOut</option>
                    <option value="zoomOutDown">zoomOutDown</option>
                    <option value="zoomOutLeft">zoomOutLeft</option>
                    <option value="zoomOutRight">zoomOutRight</option>
                    <option value="zoomOutUp">zoomOutUp</option>
                </optgroup>

<optgroup label="Specials">
                    <option value="hinge">hinge</option>
                    <option value="rollIn">rollIn</option>
                    <option value="rollOut">rollOut</option>
                </optgroup>
            </select>
            <label for="animationOut">Animation Out</label>
        </p>
        <p>
            <button id="start">Start Animation</button>
        </p>
    </div>
    <div style="width: 45%; display: inline-block; vertical-align: top; margin-left: 30px;">
        <h2>Description</h2>
        <p>Browser Support: Chrome 4+, Firefox 16+, Opera 12.1+, IE 10+, Safari 4+, Android Browser 4+.
            <br>Browser support specified in accordance to caniuse.com.</p>
        <p>You can download this plugin from <a href="https://github.com/zavoloklom/material-design-hierarchical-display" target="_blank">GitHub</a> or install via <strong>bower</strong> or <strong>npm</strong>.</p>
        <p>For more information visit <a href="https://zavoloklom.github.io/material-design-hierarchical-display/" target="_blank">this site</a>.</p>
    </div>
</div>
</div>

Material Design Hierarchical Display + Animate.css Source: https://github.com/zavoloklom/material-design-hierarchical-display

编辑器支持Emmet

快捷键

Material Design Hierarchical Display + Animate.css Source: https://github.com/zavoloklom/material-design-hierarchical-display

three.js光线行进（ray marching picking）代码示例

three.js octree 光线投射（raycasting）实现选择交互的代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：