HTML5 原质化设计概念网页

Flat webpage concept。里面包含很不错的新技术元素：1. 利用Shape（shape-outside）方法实现的图文环绕效果；2. 原质化设计风格的菜单展开隐藏动效；3. 原质化设计风格的菜单项悬停涟漪动效。

material

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {

var $blob = $('<blob/>');
    var $blob2 = $('<blob class="blob2"/>');

$('#sidebarToggle').on('click', function() {
        $(this).closest('.menu').toggleClass('open');
        $('.page').toggleClass('open');

});

$('.link').on('mouseleave', function(e) {
        $blob.css({
            top: e.offsetY + 'px',
            left: e.offsetX + 'px'
        });
        $blob.removeClass('scale');
    });
    $('.link').on('mousemove', function(e) {
        $(this).find('blob').css({
            top: e.offsetY + 'px',
            left: e.offsetX + 'px'
        });
    });
    $('.link').on('mouseenter', function(e) {
        $blob.css({
            top: e.offsetY + 'px',
            left: e.offsetX + 'px'
        });
        $(this).append($blob);
        setTimeout(function() {
            $blob.addClass('scale');
        }, 20);
    });
    $('.link').on('click', function(e) {
        e.preventDefault();
        $blob2.css({
            top: e.offsetY + 'px',
            left: e.offsetX + 'px'
        });
        $blob2.removeClass('scale');
        $(this).append($blob2);
        setTimeout(function() {
            $blob2.addClass('scale');
        }, 20);
        var target = $(this).attr('href');
        var scroll = $(target)[0].offsetTop - 70;
        $('html, body').animate({
            scrollTop: scroll
        });

});

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100);
html {
    height: 100%;
    font-size: 16px;
}
body {
    min-height: 101%;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    background-color: #222;
    color: #fff4d5;
    min-width: 20em;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-weight: 100;
}
article {
    overflow: hidden;
    margin: 2em 0;
}
h2 {
    font-weight: 100;
    font-size: 1.4em;
    line-height: 1.2;
}
.sidebar {
    width: 0;
    position: fixed;
    z-index: 6;
    top: 0;
    right: 100%;
    bottom: 0;
}
.sidebar,
.sidebar * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.sidebar .menu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding-right: 2.4em;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
    -webkit-transform: translate3d(2.4em, 0, 0);
    transform: translate3d(2.4em, 0, 0);
}
.sidebar .menu .morpher {
    position: absolute;
    overflow: hidden;
    right: 0.2em;
    top: 1em;
    height: 0;
    padding-top: 0.1em;
    background: #f2e9e4;
    pointer-events: none;
    width: 2em;
    -webkit-transition-property: -webkit-transform, top, height, width;
    transition-property: transform, top, height, width;
    -webkit-transition-delay: 0.6s, 0s, 0s, 0.6s;
    transition-delay: 0.6s, 0s, 0s, 0.6s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.sidebar .menu.open {
    -webkit-transform: translate3d(14em, 0, 0);
    transform: translate3d(14em, 0, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
@media only screen and (max-width: 20em) {
    .sidebar .menu.open {
        -webkit-transform: translate3d(20em, 0, 0);
        transform: translate3d(20em, 0, 0);
    }
}
.sidebar .menu.open .morpher {
    pointer-events: all;
    top: 0;
    -webkit-transform: translatex(-2em);
    -ms-transform: translatex(-2em);
    transform: translatex(-2em);
    width: 12em;
    height: 100%;
    -webkit-transition-delay: 0.3s, 0.9s, 0.9s, 0.3s;
    transition-delay: 0.3s, 0.9s, 0.9s, 0.3s;
}
@media only screen and (max-width: 20em) {
    .sidebar .menu.open .morpher {
        width: 17.8em;
    }
}
.sidebar .menu.open .button span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sidebar .menu.open .button span:nth-child(2) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sidebar .menu.open .button span {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.sidebar .menu .button {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 2.4em;
    width: 2.4em;
    cursor: pointer;
}
.sidebar .menu .button span {
    display: block;
    background: #f2e9e4;
    height: 0.1em;
    position: absolute;
    left: 0.2em;
    right: 0.2em;
    top: 50%;
    margin-top: -0.05em;
    pointer-events: none;
    -webkit-transition: -webkit-transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.sidebar .menu .button span:nth-child(1) {
    -webkit-transform: translatey(-0.6em);
    -ms-transform: translatey(-0.6em);
    transform: translatey(-0.6em);
}
.sidebar .menu .button span:nth-child(2) {
    -webkit-transform: translatey(0.4em);
    -ms-transform: translatey(0.4em);
    transform: translatey(0.4em);
}
.sidebar .menu ul,
.sidebar .menu li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar .menu .item {
    position: relative;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.sidebar .menu a {
    display: block;
    color: #d61818;
    padding: 0.5em 1em;
    text-decoration: none;
}
.sidebar .menu a span {
    position: relative;
    z-index: 3;
    pointer-events: none;
}
.sidebar .menu a:hover blob {
    -webkit-transition-duration: 0;
    transition-duration: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
}
.sidebar .menu a:hover blob.scale {
    box-shadow: 0 0 1em 8em rgba(235, 222, 214, 0.7) inset;
    -webkit-transition-duration: 0.6s, 0;
    transition-duration: 0.6s, 0;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.page {
    display: block;
    margin: 3em 2.4em 2.4em;
    padding-right: 11.6em;
    line-height: 1.2em;
    max-width: 40em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}
@media only screen and (max-width: 38em) {
    .page {
        padding-right: 0;
    }
}
.page.open {
    -webkit-transition-delay: 0;
    transition-delay: 0;
    -webkit-transform: translate3d(11.6em, 0, 0);
    transform: translate3d(11.6em, 0, 0);
}
@media only screen and (max-width: 20em) {
    .page.open {
        -webkit-transform: translate3d(17.6em, 0, 0);
        transform: translate3d(17.6em, 0, 0);
        padding-right: 0;
    }
}
.page .avatar {
    display: block;
    width: 9em;
    float: left;
    margin: 0 1.2em 0 0;
    border-radius: 100%;
    overflow: hidden;
    line-height: 0;
    shape-outside: circle(50%);
}
@media only screen and (max-width: 20em) {
    .page .avatar {
        shape-outside: initial;
        float: none;
        width: 15.2em;
    }
}
.page .avatar figure {
    margin: 0;
    padding: 0;
    background-color: #f2e9e4;
}
.page .avatar img {
    width: 100%;
    display: block;
    height: auto;
    border-radisu: inherit;
}
blob {
    display: block;
    position: absolute;
    z-index: 0;
    height: 25em;
    width: 25em;
    margin: -12.5em;
    background: rgba(239, 227, 221, 0.5);
    box-shadow: 0 0 0 20em rgba(235, 222, 214, 0.5) inset;
    pointer-events: none;
    border-radius: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.6s cubic-bezier(1, 0.22, 0.5, 0.75);
    transition: all 0.6s cubic-bezier(1, 0.22, 0.5, 0.75);
    -webkit-transition-property: -webkit-transform, box-shadow;
    transition-property: transform, box-shadow;
}
blob.blob2.scale {
    background: #ebded6;
    box-shadow: 0 0 1em 8em rgba(235, 222, 214, 0.7) inset;
    z-index: 1;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
@media only screen and (max-width: 20em) {
    blob {
        z-index: 0;
        height: 43em;
        width: 43em;
        margin: -21.5em;
    }
}
.header {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(214, 24, 24, 0.9);
    height: 2.4em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

HTML

<div class="header"></div>
<div class="page">
    <article>
        <h2 id="about_me">This is who I am</h2>
        <div class="avatar">
            <figure>
                <?xml version="1.0" encoding="iso-8859-1" ?>
                
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                    <g id="Sunglasses">
                        <g>
                            <rect x="-0.024" style="fill:#00D4A5;" width="100" height="100" />
                            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="57.5187" y1="52.8842" x2="101.5511" y2="96.9166">
                                <stop offset="0" style="stop-color:#117C71" />
                                <stop offset="0.5401" style="stop-color:#08AB8C" />
                                <stop offset="0.9852" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="22.061,59.565 62.454,99.959 99.976,100 100,53.226 86.17,39.396 48.72,45.101 " />
                            <path style="fill:#8C1C1C;" d="M50.25,41.233c-1.633-0.034-2.556-0.341-3.82-0.618c-4.439-0.975-9.262-2.614-19.721-2.614 c-12.893,0-12.281,1.395-12.281,1.395l0.068,4.797c0,0,2.509-0.298,3.572,7.246c1.09,7.737,5.409,10.546,12.927,10.546 c7.518,0,11.371-1.99,13.642-7.382c2.297-5.455,2.619-8.811,5.613-8.811h0.049v-4.559H50.25z"
                            />
                            <path style="fill:#AD1E1E;" d="M73.889,38.001c-10.46,0-15.282,1.639-19.721,2.614c-1.264,0.278-2.187,0.584-3.82,0.618h-0.049 v4.559h0.049c2.994,0,3.316,3.356,5.613,8.811c2.271,5.392,6.124,7.382,13.642,7.382c7.518,0,11.837-2.809,12.927-10.546 c1.063-7.544,3.572-7.246,3.572-7.246l0.068-4.797C86.17,39.396,86.782,38.001,73.889,38.001z"
                            />
                            <path style="fill:#DB961D;" d="M37.433,40.694c-2.263-0.295-6.83-0.697-8.175-0.655c-1.111,0.034-4.512-0.098-6.861,1.719 c-1.362,1.053-2.374,2.758-2.374,5.542c0,0.095,0.006,0.181,0.007,0.275c0.071,8.387,3.3,11.991,10.925,11.991 c0.364,0,0.707-0.007,1.05-0.015c5.377-0.122,8.296-1.26,10.245-4.969c0.564-1.074,1.053-2.352,1.492-3.898 C45.758,43.577,44.615,41.63,37.433,40.694z"
                            />
                            <path style="fill:#EDBD50;" d="M35.16,41.39c3.282,0,6.339,0.788,8.949,2.13c-0.888-1.586-2.976-2.344-6.675-2.826 c-2.263-0.295-6.83-0.697-8.175-0.655c-1.111,0.034-4.512-0.098-6.861,1.719c-1.362,1.053-2.374,2.758-2.374,5.542 c0,0.095,0.006,0.181,0.007,0.275c0.004,0.46,0.021,0.9,0.044,1.332C23.002,44.427,28.658,41.39,35.16,41.39z"
                            />
                            <path style="fill:#DB961D;" d="M30.955,59.565c0.364,0,0.707-0.007,1.05-0.015c5.377-0.122,8.296-1.26,10.245-4.969 c0.564-1.074,1.053-2.352,1.492-3.898c0.978-3.445,1.203-5.671,0.367-7.163c-2.61-1.343-5.667-2.13-8.949-2.13 c-6.502,0-12.158,3.037-15.085,7.517C20.472,56.34,23.748,59.565,30.955,59.565z"
                            />
                            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="70.3037" y1="50.5552" x2="106.812" y2="87.0635">
                                <stop offset="0.1034" style="stop-color:#A1443B" />
                                <stop offset="0.1676" style="stop-color:#954E43" />
                                <stop offset="1" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.3;fill:url(#SVGID_2_);" points="60.384,57.266 99.928,96.811 99.928,63.549 79.389,43.01 " />
                            <path style="fill:#EDBD50;" d="M78.179,41.739c-2.349-1.799-5.733-1.666-6.841-1.701c-1.345-0.042-5.912,0.361-8.175,0.655 c-7.181,0.935-8.325,2.883-6.308,9.989c2.05,7.223,5.075,8.882,12.786,8.882c7.639,0,10.866-3.615,10.926-12.033 c0.001-0.08,0.006-0.152,0.006-0.233C80.573,44.501,79.552,42.792,78.179,41.739z"
                            />
                            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="17.0562" y1="70.2254" x2="78.2979" y2="70.2254">
                                <stop offset="0.0148" style="stop-color:#BE4043" />
                                <stop offset="0.1598" style="stop-color:#974E4D" />
                                <stop offset="0.4828" style="stop-color:#357067" />
                                <stop offset="0.5961" style="stop-color:#117C71" />
                                <stop offset="0.7283" style="stop-color:#0C9580" />
                                <stop offset="1" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.2;fill:url(#SVGID_3_);" points="17.056,42.283 74.721,99.948 78.298,99.954 18.842,40.497 " />
                            <circle style="fill:#DB961D;" cx="17.949" cy="41.39" r="1.262" />
                            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="87.0208" y1="45.7499" x2="100.6278" y2="59.3569">
                                <stop offset="0" style="stop-color:#89363C" />
                                <stop offset="0.1438" style="stop-color:#6F5450" />
                                <stop offset="0.4274" style="stop-color:#3F8B74" />
                                <stop offset="0.6722" style="stop-color:#1DB38F" />
                                <stop offset="0.8663" style="stop-color:#08CB9F" />
                                <stop offset="0.9852" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.2;fill:url(#SVGID_4_);" points="81.691,42.187 99.977,60.474 99.98,56.941 83.645,40.607 " />
                            <circle style="fill:#EDBD50;" cx="82.662" cy="41.39" r="1.262" />
                            <path style="fill:#F4D087;" d="M73.107,41.395c1.952,0,3.834,0.286,5.607,0.812c-0.171-0.167-0.349-0.325-0.535-0.467 c-2.349-1.799-5.733-1.666-6.841-1.701c-1.345-0.042-5.912,0.361-8.175,0.655c-7.062,0.92-8.278,2.83-6.399,9.651 C60.104,44.989,66.164,41.395,73.107,41.395z"
                            />
                            <path style="fill:#EDBD50;" d="M69.642,59.565c7.639,0,10.866-3.615,10.926-12.033c0.001-0.08,0.006-0.152,0.006-0.233 c0-2.42-0.765-4.023-1.859-5.093c-1.773-0.526-3.655-0.812-5.607-0.812c-6.944,0-13.003,3.594-16.343,8.951 c0.032,0.115,0.057,0.22,0.09,0.338C58.905,57.906,61.931,59.565,69.642,59.565z"
                            />
                        </g>
                    </g>
                    <g id="Layer_1"></g>
                </svg>
            </figure>
        </div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum.</p>
        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </article>
    <article>
        <h2 id="my_experience">This is what I do</h2>
        <div class="avatar">
            <figure>
                <?xml version="1.0" encoding="iso-8859-1" ?>
                
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                    <g id="Mixedtape">
                        <g>
                            <rect style="fill:#00D4A5;" width="100" height="100" />
                            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="52.8066" y1="52.5085" x2="97.6292" y2="97.3311">
                                <stop offset="0" style="stop-color:#117C71" />
                                <stop offset="0.5401" style="stop-color:#08AB8C" />
                                <stop offset="0.9852" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="83.328,28.744 100.096,45.512 100,100 45.881,99.869 17.283,71.271 " />
                            <path style="fill:#B77A18;" d="M81.972,30.132H18.971c-1.074,0-1.945,0.871-1.945,1.945v38.246c0,1.074,0.871,1.945,1.945,1.945 h5.297h57.703c1.074,0,1.945-0.871,1.945-1.945V43.505V32.077C83.916,31.003,83.046,30.132,81.972,30.132z" />
                            <path style="fill:#EDBD50;" d="M81.972,28.187H18.971c-1.074,0-1.945,0.871-1.945,1.945v38.246c0,1.074,0.871,1.945,1.945,1.945 h5.297h57.703c1.074,0,1.945-0.871,1.945-1.945V41.561V30.132C83.916,29.058,83.046,28.187,81.972,28.187z" />
                            <g>
                                <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="32.5236" y1="67.9658" x2="60.5919" y2="96.0341">
                                    <stop offset="0" style="stop-color:#91341A" />
                                    <stop offset="0.7241" style="stop-color:#EDBE58" />
                                </linearGradient>
                                <polygon style="opacity:0.3;fill:url(#SVGID_2_);" points="20.392,66.446 24.268,70.322 45.492,70.322 34.867,59.697 " />
                                <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="60.7329" y1="39.7563" x2="88.8013" y2="67.8247">
                                    <stop offset="0" style="stop-color:#91341A" />
                                    <stop offset="0.7241" style="stop-color:#EDBE58" />
                                </linearGradient>
                                <polygon style="opacity:0.3;fill:url(#SVGID_3_);" points="83.914,63.028 83.916,63.033 83.916,41.561 80.371,38.478 51.526,51.929 69.512,48.626 " />
                            </g>
                            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="52.7857" y1="32.0312" x2="85.6704" y2="64.9159">
                                <stop offset="0" style="stop-color:#91341A" />
                                <stop offset="0.7241" style="stop-color:#EDBE58" />
                            </linearGradient>
                            <path style="opacity:0.15;fill:url(#SVGID_4_);" d="M80.959,40.011v20.056l2.96,2.96L83.915,46.87l-0.003-11.83l-6.852-6.852 l-49.61,6.624l2.957,2.957H78.88C80.028,37.769,80.959,38.773,80.959,40.011z" />
                            <path style="fill:#D64A43;" d="M78.88,37.769H30.406h-8.344c-1.148,0-2.079,1.004-2.079,2.243v25.111 c0,1.239,0.931,2.243,2.079,2.243H78.88c1.148,0,2.079-1.004,2.079-2.243v-5.056V40.011C80.959,38.773,80.028,37.769,78.88,37.769 z" />
                            <polygon style="fill:#DB961D;" points="23.884,28.187 27.449,34.812 73.494,34.812 77.059,28.187 " />
                            <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="52.0372" y1="54.0093" x2="68.6315" y2="70.6036">
                                <stop offset="0" style="stop-color:#A1443B" />
                                <stop offset="0.6443" style="stop-color:#C24840" />
                                <stop offset="1" style="stop-color:#D64A43" />
                            </linearGradient>
                            <path style="opacity:0.5;fill:url(#SVGID_5_);" d="M83.914,63.028L69.512,48.626l-17.986,3.302l-20.639,3.789l3.979,3.979 l10.625,10.626h36.479c1.074,0,1.945-0.871,1.945-1.945v-5.345L83.914,63.028z" />
                            <path style="fill:#EDBD50;" d="M66.12,47.334H34.823c-2.825,0-5.116,2.29-5.116,5.116c0,2.825,2.29,5.115,5.116,5.115H66.12 c2.825,0,5.116-2.29,5.116-5.115C71.235,49.625,68.945,47.334,66.12,47.334z" />
                            <circle style="fill:#AD1E1E;" cx="35.023" cy="52.45" r="3.941" />
                            <circle style="fill:#117C71;" cx="65.92" cy="52.45" r="3.941" />
                            <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="52.7816" y1="64.7756" x2="78.1327" y2="90.1267">
                                <stop offset="0" style="stop-color:#B6392B" />
                                <stop offset="0.2745" style="stop-color:#87614A" />
                                <stop offset="0.8958" style="stop-color:#11C599" />
                                <stop offset="0.9852" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.3;fill:url(#SVGID_6_);" points="78.407,60.124 99.908,81.625 100,100 57.627,99.897 22.536,64.807 " />
                            <path style="fill:#AD1E1E;" d="M77.029,65.38H23.914c-1.074,0-1.945-0.871-1.945-1.945v-1.939c0-1.074,0.871-1.945,1.945-1.945 h53.115c1.074,0,1.945,0.871,1.945,1.945v1.939C78.973,64.509,78.103,65.38,77.029,65.38z" />
                            <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="20.7524" y1="32.96" x2="26.9013" y2="39.1088">
                                <stop offset="0" style="stop-color:#91341A" />
                                <stop offset="0.7241" style="stop-color:#EDBE58" />
                            </linearGradient>
                            <polygon style="opacity:0.25;fill:url(#SVGID_7_);" points="23.804,37.788 20.187,34.172 22.212,32.642 27.339,37.769 " />
                            <circle style="fill:#DB961D;" cx="21.26" cy="33.485" r="1.276" />
                            <circle style="fill:#DB961D;" cx="79.683" cy="33.485" r="1.276" />
                        </g>
                    </g>
                    <g id="Layer_1"></g>
                </svg>
            </figure>
        </div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum.</p>
        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </article>
    <article>
        <h2 id="my_projects">Here's some fun stuff</h2>
        <div class="avatar">
            <figure>
                <?xml version="1.0" encoding="iso-8859-1" ?>
                
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                    <g id="Diamond">
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="96.1211" y1="89.7883" x2="142.9375" y2="89.7883">
                            <stop offset="0" style="stop-color:#117C71" />
                            <stop offset="0.2289" style="stop-color:#108073" />
                            <stop offset="0.4331" style="stop-color:#0E8A7A" />
                            <stop offset="0.6279" style="stop-color:#0B9D84" />
                            <stop offset="0.8156" style="stop-color:#06B693" />
                            <stop offset="0.9852" style="stop-color:#00D4A5" />
                        </linearGradient>
                        <polyline style="display:none;opacity:0.4;fill:url(#SVGID_1_);" points="113.765,106.109 98.5,90.844 96.121,80.657 98.108,75.311 102.504,72.451 107.562,73.188 142.938,107.125 " />
                        <g>
                            <rect style="fill:#00D4A5;" width="100" height="100.002" />
                            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="58.2028" y1="54.0531" x2="101.6171" y2="79.0398">
                                <stop offset="0" style="stop-color:#117C71" />
                                <stop offset="0.5401" style="stop-color:#08AB8C" />
                                <stop offset="0.9852" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <path style="opacity:0.4;fill:url(#SVGID_2_);" d="M100,100c0.001-0.5,0.035-52.847,0.035-52.847l-4.406-4.406L68.251,15.368 L50,66.834l-1.125,1.291l-5.666,3.349l-1.212,7.285l0.972,3.492L60.72,99.97L100,100z" />
                            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="66.6883" y1="56.0659" x2="103.9673" y2="77.5215">
                                <stop offset="0" style="stop-color:#117C71" />
                                <stop offset="0.5401" style="stop-color:#08AB8C" />
                                <stop offset="0.9852" style="stop-color:#00D4A5" />
                            </linearGradient>
                            <polygon style="opacity:0.4;fill:url(#SVGID_3_);" points="100.018,51.476 74.793,26.251 50,66.834 83.233,100.067 100,100 " />
                            <circle style="fill:none;stroke:#BF9643;stroke-width:2;stroke-miterlimit:10;" cx="50" cy="76.763" r="7.874" />
                            <polygon style="fill:#EF6D6A;" points="44.041,15.377 44.041,15.368 31.921,15.368 37.985,26.263 " />
                            <polygon style="fill:#D64A43;" points="56.143,15.372 56.143,15.364 44.023,15.364 50.088,26.259 " />
                            <polygon style="fill:#8C1C1C;" points="68.25,15.377 68.251,15.368 56.131,15.368 62.195,26.263 " />
                            <polygon style="fill:#AD1E1E;" points="50.083,26.243 44.051,15.38 38.01,26.251 50.083,26.251 " />
                            <polygon style="fill:#FF8A8A;" points="37.958,26.243 31.925,15.38 25.207,26.251 37.958,26.251 " />
                            <polygon style="fill:#B74141;" points="56.141,15.371 50.091,26.251 62.191,26.251 " />
                            <polygon style="fill:#B74141;" points="68.24,15.371 62.191,26.251 74.793,26.251 " />
                            <polygon style="fill:#D64A43;" points="37.992,26.251 50,66.834 50.091,26.251 " />
                            <polygon style="fill:#EF6D6A;" points="25.207,26.251 50,66.834 37.992,26.251 " />
                            <polygon style="fill:#8C1C1C;" points="62.191,26.251 50,66.834 74.793,26.251 " />
                            <polygon style="fill:#AD1E1E;" points="50.091,26.251 50,66.834 62.191,26.251 " />
                            <circle style="fill:none;stroke:#EDBD50;stroke-width:2;stroke-miterlimit:10;" cx="50" cy="75.46" r="7.874" />
                        </g>
                    </g>
                    <g id="Layer_1"></g>
                </svg>
            </figure>
        </div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum.</p>
        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </article>
    <article>
        <h2 id="social">You can also find me here</h2>
        <div class="avatar">
            <figure>
                <?xml version="1.0" encoding="iso-8859-1" ?>
                
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                    <g id="Heart">
                        <g>
                            <rect x="-0.02" style="fill:#EDBD50;" width="100" height="100" />
                            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.9268" y1="60.5114" x2="103.9973" y2="92.5819">
                                <stop offset="0" style="stop-color:#91341A" />
                                <stop offset="0.7241" style="stop-color:#EDBE58" />
                            </linearGradient>
                            <polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="50.716,79.417 71.237,99.938 99.98,99.938 100,48.468 83.159,31.627 " />
                            <polygon style="fill:#D64A43;" points="81.724,23.879 81.698,23.852 81.698,23.871 " />
                            <polygon style="fill:#EF6D6A;" points="40.969,22.606 27.184,22.606 27.184,32.353 29.319,32.353 27.184,32.353 27.184,35.658 27.184,32.353 17.437,32.353 17.437,46.138 27.184,55.885 50.716,79.417 50.716,32.353 " />
                            <polygon style="fill:#D64A43;" points="74.248,22.606 60.463,22.606 50.716,32.353 50.716,79.417 74.248,55.885 83.995,46.138 83.995,32.353 " />
                            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="26.2917" y1="31.5435" x2="40.9077" y2="46.1595">
                                <stop offset="0" style="stop-color:#C84F50" />
                                <stop offset="0.0425" style="stop-color:#CA5151" />
                                <stop offset="0.645" style="stop-color:#E56563" />
                                <stop offset="1" style="stop-color:#EF6D6A" />
                            </linearGradient>
                            <polygon style="opacity:0.5;fill:url(#SVGID_2_);" points="27.184,22.606 46.583,42.005 36.753,51.835 35.93,50.846 17.437,32.353 " />
                            <polygon style="fill:#AD1E1E;" points="27.184,22.606 17.437,32.353 27.184,32.353 " />
                            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="62.1383" y1="60.0476" x2="99.9679" y2="60.0476">
                                <stop offset="0" style="stop-color:#91341A" />
                                <stop offset="0.7241" style="stop-color:#EDBE58" />
                            </linearGradient>
                            <polygon style="opacity:0.4;fill:url(#SVGID_3_);" points="62.138,48.997 99.954,86.813 99.968,55.755 77.495,33.282 " />
                            <g>
                                <polygon style="fill:#00B58A;" points="71.908,27.657 71.908,27.657 62.79,27.657 62.79,27.657 67.349,38.664 " />
                                <polygon style="fill:#0C4C41;" points="67.349,38.664 71.908,49.669 78.355,43.222 " />
                                <polygon style="fill:#117C71;" points="78.355,43.222 78.355,43.222 78.355,34.105 78.355,34.105 67.349,38.664 " />
                                <polygon style="fill:#00D4A5;" points="62.79,27.657 56.343,34.105 67.349,38.664 " />
                                <polygon style="fill:#0C4C41;" points="78.355,34.105 71.908,27.657 67.349,38.664 " />
                                <polygon style="fill:#117C71;" points="62.79,49.669 62.79,49.669 71.908,49.669 71.908,49.669 67.349,38.664 " />
                                <polygon style="fill:#00B58A;" points="56.343,34.105 56.343,34.105 56.343,43.222 56.343,43.222 67.349,38.664 " />
                                <polygon style="fill:#00D4A5;" points="56.343,43.222 62.79,49.669 67.349,38.664 " />
                            </g>
                        </g>
                    </g>
                    <g id="Layer_1"></g>
                </svg>
            </figure>
        </div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum.</p>
        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </article>
    <article>
        <h2 id="contact">Got questions?</h2>
        <div class="avatar">
            <figure>
                <?xml version="1.0" encoding="iso-8859-1" ?>
                
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                    <g id="Iphone">
                        <g>
                            <polygon style="fill:#EDBD50;" points="0.789,0 0.789,100 45.394,100 100.789,100 100.789,44.861 100.789,0 " />
                            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="104.6793" y1="86.1862" x2="48.8762" y2="52.0931">
                                <stop offset="0.1514" style="stop-color:#EDBE58" />
                                <stop offset="0.2708" style="stop-color:#E5B353" />
                                <stop offset="0.4838" style="stop-color:#D19445" />
                                <stop offset="0.7632" style="stop-color:#B0632F" />
                                <stop offset="1" style="stop-color:#91341A" />
                            </linearGradient>
                            <polygon style="opacity:0.4;fill:url(#SVGID_1_);" points="36.852,83.271 53.219,99.633 53.601,100.014 100.789,100 100.764,52.682 97.812,49.731 64.977,16.896 " />
                            <path style="fill:#117C71;" d="M61.655,15.978c0,0.507-0.289,0.918-0.646,0.918h-3.949c-0.357,0-0.646-0.411-0.646-0.918l0,0 c0-0.507,0.289-0.917,0.646-0.917h3.949C61.366,15.061,61.655,15.471,61.655,15.978L61.655,15.978z" />
                            <path style="fill:#117C71;" d="M35.676,30.46c-0.507,0-0.917-0.289-0.917-0.646v-3.949c0-0.357,0.411-0.646,0.917-0.646l0,0 c0.507,0,0.917,0.289,0.917,0.646v3.949C36.593,30.171,36.183,30.46,35.676,30.46L35.676,30.46z" />
                            <path style="fill:#0C4C41;" d="M66.82,79.636c0,2.929-2.34,5.304-5.227,5.304H40.687c-2.887,0-5.227-2.374-5.227-5.304V22.887 c0-2.929,2.34-5.304,5.227-5.304h20.907c2.887,0,5.227,2.375,5.227,5.304V79.636z" />
                            <path style="fill:#117C71;" d="M66.82,77.73c0,2.929-2.34,5.304-5.227,5.304H40.687c-2.887,0-5.227-2.374-5.227-5.304V20.982 c0-2.929,2.34-5.304,5.227-5.304h20.907c2.887,0,5.227,2.375,5.227,5.304V77.73z" />
                            <rect x="37.789" y="24" style="fill:#00D4A5;" width="26" height="49" />
                            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.0916" y1="79.6566" x2="59.9669" y2="79.6566">
                                <stop offset="0" style="stop-color:#91341A" />
                                <stop offset="1" style="stop-color:#DB341A" />
                            </linearGradient>
                            <polygon style="opacity:0.25;fill:url(#SVGID_2_);" points="59.967,83.032 53.217,76.282 49.092,80.26 51.279,82.448 51.857,83.026 " />
                            <circle style="fill:#EDBD50;" cx="51.14" cy="78.26" r="2.862" />
                            <path style="fill:#00D4A5;" d="M55.341,20.036c0,0.278-0.225,0.503-0.503,0.503h-7.396c-0.278,0-0.503-0.225-0.503-0.503l0,0 c0-0.278,0.225-0.503,0.503-0.503h7.396C55.116,19.533,55.341,19.758,55.341,20.036L55.341,20.036z" />
                            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="41.2745" y1="68.0636" x2="100.7895" y2="68.0636">
                                <stop offset="0" style="stop-color:#91341A" />
                                <stop offset="0.7241" style="stop-color:#EDBE58" />
                            </linearGradient>
                            <polyline style="opacity:0.3;fill:url(#SVGID_3_);" points="41.275,51.656 48.657,58.749 48.653,58.749 89.862,100.084 100.789,100 100.778,74.497 57.949,36.043 " />
                            <polygon style="fill:#D64A43;" points="41.275,51.712 49.605,55.346 57.897,58.658 57.909,47.911 57.949,36.043 " />
                            <polygon style="fill:#A02924;" points="57.949,36.043 47.373,54.363 48.657,58.749 50.212,55.588 " />
                        </g>
                    </g>
                    <g id="Layer_1"></g>
                </svg>
            </figure>
        </div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum.</p>
        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </article>
</div>
<div class="sidebar">
    <div class="menu">
        <div id="sidebarToggle" class="button"><span></span><span></span>
        </div>
        <ul class="morpher">
            <li class="item"><a href="#about_me" class="link"><span>about me</span></a>
            </li>
            <li class="item"><a href="#my_experience" class="link"><span>my experience</span></a>
            </li>
            <li class="item"><a href="#my_projects" class="link"><span>my projects</span></a>
            </li>
            <li class="item"><a href="#social" class="link"><span>social</span></a>
            </li>
            <li class="item"><a href="#contact" class="link"><span>contact</span></a>
            </li>
        </ul>
    </div>
</div>

Flat webpage concept。里面包含很不错的新技术元素：1. 利用Shape（shape-outside）方法实现的图文环绕效果；2. 原质化设计风格的菜单展开隐藏动效；3. 原质化设计风格的菜单项悬停涟漪动效。

material

编辑器支持Emmet

快捷键

Flat webpage concept。里面包含很不错的新技术元素：1. 利用Shape（shape-outside）方法实现的图文环绕效果；2. 原质化设计风格的菜单展开隐藏动效；3. 原质化设计风格的菜单项悬停涟漪动效。

material

使用SVG创建原质化设计风格的按钮涟漪动效 - 六边形脉冲波

原质化设计中关于元素在三维空间中位置高度的动画图解

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：