HTML5/CSS3齐天大圣孙悟空肖像

西游记人物志

css3, monkey

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes hover {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-1.5em);
        transform: translateY(-1.5em);
    }
}
@keyframes hover {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-1.5em);
        transform: translateY(-1.5em);
    }
}
@-webkit-keyframes shadow {
    0% {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.08);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}
@keyframes shadow {
    0% {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.08);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}
*,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
    height: 100vh;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "Sigmar One", cursive;
    font-size: 100%;
    overflow: hidden;
}
@media (orientation: portrait) {
    monkey-scene {
        font-size: 2vw;
    }
}
@media (orientation: landscape) {
    monkey-scene {
        font-size: 2vh;
    }
}
monkey-scene {
    width: 30em;
    height: 30em;
    position: relative;
}
monkey-scene *,
monkey-scene *::before {
    display: block;
    position: absolute;
}
monkey-scene h1 {
    top: 1.5em;
    left: auto;
    color: Silver;
    font-family: "Sigmar One", cursive;
    font-size: 5em;
    line-height: 1;
    text-align: center;
}
monkey-king {
    top: 12.5em;
    left: 12em;
    -webkit-animation: hover 2s alternate infinite ease-in-out;
    animation: hover 2s alternate infinite ease-in-out;
}
monkey-head {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background-color: Brown;
}
monkey-head::before {
    top: 5.9em;
    left: 2.25em;
    content: "";
    border-width: 1.5em 0.75em 0 0.75em;
    border-style: solid;
    border-color: Brown transparent;
}
monkey-face {
    width: 5em;
    height: 3.5em;
    top: 2.5em;
    left: 0.5em;
    border-radius: 50%;
    background-color: Pink;
}
monkey-forehead {
    width: 2.5em;
    height: 3.5em;
    top: -1em;
    left: 0.25em;
    border-radius: 50%;
    background-color: Pink;
    box-shadow: 2em 0 Pink;
}
monkey-eyes {
    width: 1em;
    height: 0.5em;
    top: 2.3em;
    left: 0.8em;
    border-radius: 50%;
    background-color: Pink;
    box-shadow: 0 -0.2em Black, 1.8em 0 Pink, 1.8em -0.2em Black;
}
monkey-ears {
    width: 2em;
    height: 2em;
    top: 2.75em;
    left: -1em;
    border-radius: 50%;
    background-color: Pink;
    z-index: -1;
    box-shadow: 6em 0 Pink;
}
monkey-mouth {
    width: 1.5em;
    height: 1em;
    top: 1.8em;
    left: 1.75em;
    border-radius: 50%;
    box-shadow: 0 0.2em Red;
}
monkey-crown {
    width: 6em;
    height: 1em;
    top: 1.5em;
    left: 0em;
    border-radius: 50%;
    box-shadow: 0 0.3em Gold;
}
monkey-body {
    width: 5em;
    height: 4em;
    top: 5em;
    left: 0.5em;
    border-radius: 2.5em 2.5em 0 0;
    background-color: Orange;
}
monkey-legs {
    width: 10em;
    height: 4em;
    top: 9em;
    left: -2em;
    border-radius: 2em 2em 50% 50%;
    background-color: Orange;
}
monkey-hands {
    width: 3em;
    height: 2em;
    top: 8.5em;
    left: 1.5em;
    border-radius: 1em;
    background-color: Pink;
    box-shadow: 0.5em 0 Brown inset, -0.5em 0 Brown inset;
}
monkey-shadow {
    width: 8em;
    height: 1em;
    top: 26em;
    left: 11em;
    border-radius: 50%;
    -webkit-animation: shadow 2s alternate infinite ease-in-out;
    animation: shadow 2s alternate infinite ease-in-out;
}

HTML

西游记人物志

css3, monkey

编辑器支持Emmet

快捷键

西游记人物志

css3, monkey

HTML5/CSS3会摇头眨眼的火狐狸肖像

HTML5/CSS3页面标题的像素溶解特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：