一款很棒的SVG+CSS3响应式工作室介绍页面

使用SVG绘制的鬼脸/京剧脸谱，以及社交网站（Stackoverflow、envato, codepen）的动画图标。

svg，studio，template

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

第三方库
作品简介 2014
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* go on then, styles go here.. knock yourself out! */

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
html,
body {
    height: 100%;
}
html {
    font-size: 1.4vw;
}
/* Now em and rem can be used to size everything according to the vewport width */

body {
    font-family: 'Quicksand', sans-serif;
    color: #f2f2f2;
    background-color: #9c9885;
    background: -webkit-radial-gradient(center, ellipse, #9c9885 0%, #595959 100%);
    background: radial-gradient(ellipse at center, #9c9885 0%, #595959 100%);
    background-attachment: fixed;
}
aside {
    position: relative;
    width: 17.9em;
    left: 4.1em;
    top: 8em;
    margin: 0 auto 1em;
    padding: 5%;
    -webkit-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    background-color: rgba(49, 49, 49, 0.2);
}
/**** HEADER ***/

header {
    position: relative;
    -webkit-perspective: 800px;
    perspective: 800px;
    /* because IE doesn't support transform-style:preseve-3d */
    
    -webkit-perspective-origin: 50% 150%;
    perspective-origin: 50% 150%;
}
header a svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
    fill-opacity: 0;
    fill: #9c9885;
    stroke-opacity: 0.6;
    stroke: #f2f2f2;
    -webkit-transition: fill-opacity 1s .2s, stroke-opacity 1s .2s;
    transition: fill-opacity 1s .2s, stroke-opacity 1s .2s;
}
/**** TEXT ****/

h1,
h2 {
    font-weight: 300;
    white-space: nowrap;
    text-indent: -0.06em;
    /** to remove the space before the first latter and the container side **/
}
h1 {
    line-height: 0.7em;
    font-size: 4.09em;
    letter-spacing: 0.15em;
}
h2 {
    line-height: 1.5em;
    font-size: 1.27em;
    letter-spacing: 0;
}
p {
    font-size: 0.8em;
    margin-top: 3%;
    text-align: justify;
}
/**** SOCIALS ****/

ul {
    position: relative;
    list-style-type: none;
    padding-top: 10%;
    height: 2em;
    z-index: 3;
}
li {
    float: left;
    width: 33.333%;
    text-align: center;
}
li a {
    display: inline-block;
    opacity: 0.7;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
li:hover a {
    opacity: .99;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
li svg {
    width: 2em;
    height: 2em;
}
li svg path {
    fill: #f2f2f2;
    stroke: none;
}
li svg circle {
    stroke: #f2f2f2;
    fill: none;
}
li svg:hover circle {
    -webkit-animation: socialsHover .7s;
    animation: socialsHover .7s;
}
/**** Media queries ****/

@media (max-width: 1400px) {
    html {
        font-size: 1.4vw;
    }
}
@media (max-width: 1200px) {
    html {
        font-size: 1.8vw;
    }
}
@media (max-width: 1000px) {
    html {
        font-size: 2.2vw;
    }
}
@media (min-width: 801px) {
    header a {
        position: absolute;
        width: 107.5%;
        height: 440%;
        top: -95%;
        right: 69%;
        z-index: -2;
    }
    header a:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 1;
        top: 0.55%;
        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9Ii0zNzggLTIgNzU2IDgwNSI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2Utb3BhY2l0eT0iMC42IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2YyZjJmMiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgLTggMCkiIGQ9Ik0xNzcuNiwyNjQuOWMtMjYuOS0wLjEtNDcuNi0yNS4xLTUzLjEtNDYuNGMtMS45LTcuMywxLTEzLDguOS0xNS4yYzgtMi4yLDE2LjQtMy42LDI0LjctNC4xYzE5LjUtMS4yLDM5LTEuOCw1OC42LTIuMyAgYzUuNy0wLjEsMTEuNiwwLjMsMTcuMiwxLjVjNy43LDEuNiwxMC42LDcuMSw3LjUsMTQuM2MtNS42LDEzLTEyLjMsMjUuNS0yMiwzNi4xQzIwOS41LDI1OS45LDE5Ni43LDI2NC44LDE3Ny42LDI2NC45eiIvPgo8L3N2Zz4=');
        background-repeat: no-repeat;
        -webkit-transform-origin: 50% 27%;
        -ms-transform-origin: 50% 27%;
        transform-origin: 50% 27%;
        -webkit-animation: blink 20s 2.5s infinite;
        animation: blink 20s 2.5s infinite;
        -webkit-transition: opacity .4s .1s;
        transition: opacity .4s .1s;
    }
    #faceRight,
    #eyeRight {
        opacity: 0;
        -webkit-transform: translateX(-8em);
        -ms-transform: translateX(-8em);
        transform: translateX(-8em);
        -webkit-transition: opacity .4s .1s, -webkit-transform 0.4s .1s ease-out;
        transition: opacity .4s .1s, transform 0.4s .1s ease-out;
    }
    #eyeLeft {
        opacity: 0;
        -webkit-transition: opacity .4s .1s;
        transition: opacity .4s .1s;
    }
    header:hover a:before {
        opacity: 0;
    }
    .profile-bio {
        position: relative;
        z-index: 2;
    }
    .profile-bio:before {
        content: '';
        position: absolute;
        top: -195%;
        left: -18%;
        width: 136%;
        height: 445%;
        z-index: -1;
    }
    /**** AVATAR FEATURING ANIMATION *****/
    
    header:hover a svg {
        fill-opacity: .99;
        stroke-opacity: 0.8;
    }
    header:hover a #faceRight,
    header:hover a #eyeRight {
        opacity: .99;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s ease-out;
        transition: opacity .5s .1s, transform .5s .1s ease-out;
    }
    header:hover #eyeLeft {
        opacity: .99;
    }
    header h1,
    header h2,
    header + .profile-bio,
    .profile-social-links {
        -webkit-transform-origin: 200% 50%;
        -ms-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        -webkit-transition: -webkit-transform .5s ease-in-out, opacity .5s ease-out;
        transition: transform .5s ease-in-out, opacity .5s ease-out;
    }
    header:hover h1,
    header:hover h2,
    header:hover + div,
    header:hover ~ ul {
        opacity: 0.7;
        -webkit-transition: -webkit-transform .4s .1s ease-in-out, opacity .4s .1s ease-out;
        transition: transform .4s .1s ease-in-out, opacity .4s .1s ease-out;
        -webkit-transform: rotateY(-40deg) translateY(3rem);
        transform: rotateY(-40deg) translateY(3rem);
    }
    /**** START ANIMATION ****/
    
    ul {
        -webkit-perspective: 800px;
        perspective: 800px;
        /* because IE doesn't support transform-style:preseve-3d */
        
        -webkit-perspective-origin: 50% -120%;
        perspective-origin: 50% -120%;
    }
    li {
        opacity: 0;
        -webkit-animation: startSocials .5s .5s cubic-bezier(.58, .15, .35, 1.72) forwards;
        animation: startSocials .5s .5s cubic-bezier(.58, .15, .35, 1.72) forwards;
        -webkit-transform: translateZ(-3rem);
        transform: translateZ(-3rem);
    }
    li:nth-child(2) {
        -webkit-animation-delay: .65s;
        animation-delay: .65s;
    }
    li:nth-child(3) {
        -webkit-animation-delay: .8s;
        animation-delay: .8s;
    }
    header a svg {
        -webkit-animation: startAvatar 4s ease-out;
        animation: startAvatar 4s ease-out;
    }
    aside {
        -webkit-animation: start 3s;
        animation: start 3s;
    }
}
@media (max-width: 800px) {
    body {
        font-size: 3vw;
    }
    aside {
        top: 1em;
        left: 0;
        padding: 4% 8%;
    }
    header a {
        position: static;
        display: block;
        text-align: center;
        padding: 10% 0;
    }
    header a svg {
        width: 30%;
        height: auto;
        fill-opacity: 0.8;
        fill: #f2f2f2;
        stroke-width: 0;
    }
    #faceRight,
    #eyeRight {
        opacity: 1;
        fill: #9c9885;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    ul {
        padding: 10% 0;
    }
}
@media (max-width: 700px) {
    body {
        font-size: 3.9vw;
    }
    aside {
        padding: 4% 10% 10%;
    }
}
/**** KEYFRAME ANIMATIONS ****/

@-webkit-keyframes startSocials {
    to {
        -webkit-transform: translateZ(0rem);
        transform: translateZ(0rem);
        opacity: .99;
    }
}
@keyframes startSocials {
    to {
        -webkit-transform: translateZ(0rem);
        transform: translateZ(0rem);
        opacity: .99;
    }
}
@-webkit-keyframes startAvatar {
    0% {
        stroke-dasharray: 700, 2900;
        stroke-opacity: 0;
        fill-opacity: 0;
    }
    80% {
        fill-opacity: 0;
    }
    /* In case the avatar is hovered during the start animation */
    
    100% {
        stroke-dasharray: 2850, 2900;
    }
}
@keyframes startAvatar {
    0% {
        stroke-dasharray: 700, 2900;
        stroke-opacity: 0;
        fill-opacity: 0;
    }
    80% {
        fill-opacity: 0;
    }
    /* In case the avatar is hovered during the start animation */
    
    100% {
        stroke-dasharray: 2850, 2900;
    }
}
@-webkit-keyframes start {
    from {
        opacity: 0;
    }
}
@keyframes start {
    from {
        opacity: 0;
    }
}
@-webkit-keyframes socialsHover {
    0% {
        stroke-dasharray: 0, 0, 1500;
    }
    18% {
        stroke-dasharray: 0, 150, 1500;
    }
    100% {
        stroke-dasharray: 1500, 150, 1500;
    }
}
@keyframes socialsHover {
    0% {
        stroke-dasharray: 0, 0, 1500;
    }
    18% {
        stroke-dasharray: 0, 150, 1500;
    }
    100% {
        stroke-dasharray: 1500, 150, 1500;
    }
}
@-webkit-keyframes blink {
    0%, 19.5%, 21%, 44.5%, 46%, 82.5%, 84%, 100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    20%,
    45%,
    83% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
    }
}
@keyframes blink {
    0%, 19.5%, 21%, 44.5%, 46%, 82.5%, 84%, 100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    20%,
    45%,
    83% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
    }
}

HTML

<a href="https://web-tiki.com/" target="_blank">
            <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="-378 -2 756 805" preserveAspectRatio="none" stroke-linejoin="round" stroke-linecap="round">
                <defs>
                    <g id="halfFace">
                        <path d="M267,59c4.7,3.6,4.8,10.3,1.9,14.8c-2.7,4.2-8.1,6.1-13.5,4.1c-4.2-1.5-54.8-28.4-76-39.7c-8.6-4.6-17.8-7.3-27.7-6.9   c-6.8,0.3-12.9,2.4-18,7.2C104.4,65.7,76,93.7,49,123.2c-11,12-15.3,25.8-16.4,41.6c-2.2,32-12.2,162.1-10.6,195.3  c0.6,12.8,2.7,25.4,7.4,37.5c10.1,25.9,30.7,37.3,58.1,32.6c11.3-1.9,20.8-7,28.2-15.7c3.4-4,6.8-7.9,10.1-12c1.4-1.8,2.6-3.9,3.5-6   c1.1-2.7,1.4-6-1.5-7.3c-2.1-1-5.3-0.7-7.6,0.2c-2,0.7-3.6,2.9-5.1,4.7c-6,7.1-12.7,13.4-20.9,17.9c-10.4,5.8-20,4.5-29.1-2.9   c-14.9-12.1-20.1-32.3-13-52.6c8.5-24.2,26.8-36.1,51.5-39c7.2-0.8,14.7-0.8,21.8,0.4c22.2,3.7,34.9,18.4,42,38.7   c6.2,17.6,7.3,35.4,2.5,53.6c-2.6,9.6-0.5,12.1,9.2,9.7c14.1-3.5,28.1-7.6,41.8-12.5c17.3-6.2,34.6-12.7,51.1-20.7  c25-12.1,42.4-31.3,48.8-59c3.2-13.9,6-28,7.6-42.2c3-26.9,5-54,7.5-81c0.4-4,1-8.5,5.8-9.4c4.7-0.9,6.7,3.2,8.5,6.6  c5.4,10.1,7.3,21.3,8.9,32.5c4.4,31.8,6.1,63.9,5,96c-0.8,23.1-2.2,46.4-10,68.3c-4.5,12.7-10.9,25-17.8,36.6   c-27.1,46.2-58.6,89.5-90.6,132.5c-7,9.4-14.1,18.7-21.7,27.5c-3.7,4.3-8.6,7.7-13.4,10.8c-1.8,1.1-5.5,1.2-7.1,0.1   c-1.3-0.9-1.6-4.7-0.9-6.7c8.3-22.8,10.3-46.6,12.5-70.5c1.5-16-4.1-28.6-16.1-38.6c-16.7-13.9-36.3-20.5-57.9-20.7   c-45.6-0.4-91.1-0.7-136.7-1c-1.4,0-2.7,0-4.4,0C0,347.9,0,227.6-0.1,107.1c2.5,0,5.1,0.2,7.6,0c7.5-0.6,14-3.7,19.5-8.9  c28.3-26.6,56.7-53,85-79.7c8.1-7.6,19.3-18,30.8-18C161.7,0.4,256.4,50.8,267,59z"
                        />
                        <path d="M0,595.3c0-17.8,0-35.4,0-53.2c1-0.1,2.1-0.3,3.1-0.3c17.1,0,34.1-0.2,51.2,0c13.5,0.2,23.5,6.6,30.7,17.8  c3.2,5,3.4,10.2,1,15.7c-5.7,12.9-18.2,21.2-32.2,21c-17.1-0.2-34.1-0.6-51.2-0.9C1.8,595.5,1,595.4,0,595.3z" />
                        <path d="M0,799.6c0-43.1,0-84.9,0-127.3c1.9,0,3.5,0,5.1,0c24.2-0.6,48.4-1.1,72.6-1.8c5.4-0.1,10.7-1,16.1-0.9 c10.4,0.2,14.6,6.7,9.4,15.7c-3.9,6.7-9,13-14.7,18.1c-27.3,24-52.5,49.8-73.4,79.7c-2.8,3.9-5.9,7.6-9.1,11.2 C4.4,796,2.5,797.4,0,799.6z" />
                    </g>
                    <g id="eye">
                        <path d="M177.6,264.9c-26.9-0.1-47.6-25.1-53.1-46.4c-1.9-7.3,1-13,8.9-15.2c8-2.2,16.4-3.6,24.7-4.1c19.5-1.2,39-1.8,58.6-2.3  c5.7-0.1,11.6,0.3,17.2,1.5c7.7,1.6,10.6,7.1,7.5,14.3c-5.6,13-12.3,25.5-22,36.1C209.5,259.9,196.7,264.8,177.6,264.9z" />
                    </g>
                </defs>
                <use id="faceRight" xlink:href="#halfFace" />
                <use id="eyeRight" xlink:href="#eye" />
                <use xlink:href="#halfFace" transform="matrix(-1 0 0 1 -8 0)" />
                <use id="eyeLeft" xlink:href="#eye" transform="matrix(-1 0 0 1 -8 0)" />
            </svg>
        </a>

<h1>webtiki</h1>

<h2>web design & developement</h2>

</header>

<div class="profile-bio">

<p>This profile card is responsive, the layout changes for screens under 800px wide. You can hover the avatar on the left to see it entirely. You may also check the links below to see more of my work.</p>

</div>

<ul class="profile-social-links">

<li>
            <a href="#" target="_blank">
                <svg viewBox="0 0 500 500" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin">
                    <path transform="scale(3) translate(277,-113)" d="M-173.7,159.7c-2.4-1.3-9.2-0.5-17.4,2c-14.4,9.8-26.5,24.3-27.4,47.6c-0.2,0.6-1.6-0.1-1.9-0.2 c-3.9-7.4-5.4-15.3-2.2-26.6c0.6-1-1.4-2.2-1.7-1.9c-0.7,0.7-3.7,3.9-5.7,7.3c-9.8,16.9-3.4,38.7,13.7,48.2 c17.1,9.5,38.7,3.4,48.2-13.7C-157,202.6-167.2,163.3-173.7,159.7z"
                    />
                    <circle cx="250" cy="250" r="235" stroke-dasharray="0,0,1500" stroke-width="15" transform="rotate(-90, 250,250)" />
                </svg>
            </a>
        </li>

</ul>

</aside>

使用SVG绘制的鬼脸/京剧脸谱，以及社交网站（Stackoverflow、envato, codepen）的动画图标。

svg，studio，template

编辑器支持Emmet

快捷键

使用SVG绘制的鬼脸/京剧脸谱，以及社交网站（Stackoverflow、envato, codepen）的动画图标。

svg，studio，template

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：