HTML5 4个南方公园（South Park）卡通人物肖像

CSS3 Cartoon icons

css3, human

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body {
    overflow: hidden;
    background-color: #89d5e3;
    *zoom: 1;
    filter: progid: DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF89D5E3', endColorstr='#FFFFFFFF');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ZDVlMyIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #89d5e3), color-stop(60%, #ffffff));
    background-image: -moz-linear-gradient(top, #89d5e3 0%, #ffffff 60%);
    background-image: -webkit-linear-gradient(top, #89d5e3 0%, #ffffff 60%);
    background-image: linear-gradient(to bottom, #89d5e3 0%, #ffffff 60%);
}
body .container {
    padding: 0;
}
body .container h1 {
    background: #9C6C56;
    font-family: "South Park";
    padding: 17px 15px 0 15px;
    font-size: 70px;
    margin: 0 auto;
    width: auto;
    display: inline-block;
    position: absolute;
    top: 30px;
    left: calc(50% - 245px);
}
body .container h1:after,
body .container h1:before {
    position: absolute;
    height: 276px;
    width: 10px;
    background: inherit;
    top: 70px;
}
body .container h1:before {
    left: 0;
}
body .container h1:after {
    right: 0;
}
body .container:before,
body .container:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
}
body .container .boys-container {
    min-width: 600px;
    max-width: 700px;
    height: 400px;
    margin: 170px auto 0 auto;
    position: relative;
}
body .container .boys-container .kenny,
body .container .boys-container .stan,
body .container .boys-container .kyle,
body .container .boys-container .cartman {
    position: absolute;
}
body .container .boys-container .kenny *,
body .container .boys-container .stan *,
body .container .boys-container .kyle *,
body .container .boys-container .cartman * {
    position: absolute;
}
.container .eye {
    left: calc(50% - 33px);
    top: 50px;
    height: 40px;
    width: 32px;
    background: #FFFFFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.container .eye:before {
    top: 15px;
    height: 4px;
    width: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #333333;
}
.container .eye.left {
    margin-right: 34px;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.container .eye.left:before {
    right: 7px;
}
.container .eye.right {
    margin-left: 34px;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.container .eye.right:before {
    left: 7px;
}
.container .mouth {
    left: calc(50% - 10px);
    bottom: 5px;
    height: 10px;
    width: 20px;
    border: 1px solid transparent;
    border-top: 1px solid #333333;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
}
.container .body {
    top: 35px;
    left: 18%;
    width: 64%;
    perspective: 60px;
    perspective-origin: 50% 50%;
    z-index: 7;
}
.container .body .scarf {
    left: -8%;
    top: 0;
    height: 28px;
    width: 116%;
    background: #E1383B;
    -moz-border-radius: 50% 50% 50% 50%/0 0 85% 85%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/0 0 85% 85%;
}
.container .body .inner {
    left: 0;
    height: 54px;
    width: 100%;
    background: #BB6F4F;
    transform: rotateX(20deg);
    -moz-border-radius: 10% 10% 50% 50%/0 0 5% 5%;
    -webkit-border-radius: 10%;
    border-radius: 10% 10% 50% 50%/0 0 5% 5%;
}
.container .body .inner:before {
    left: 50%;
    height: 100%;
    width: 10px;
    border-left: 1px solid #333333;
}
.container .body .arm {
    height: 38px;
    width: 14px;
    background: #BB6F4F;
    -moz-transform: rotateX(25deg);
    -ms-transform: rotateX(25deg);
    -webkit-transform: rotateX(25deg);
    transform: rotateX(25deg);
}
.container .body .arm:before {
    bottom: 0;
    height: 10px;
    width: 10px;
}
.container .body .arm .hand {
    bottom: -11px;
    height: 18px;
    width: 18px;
    background: #E33940;
}
.container .body .arm.left {
    left: -10px;
    -moz-border-radius: 0 0 30% 50%/0 0 10% 20%;
    -webkit-border-radius: 0;
    border-radius: 0 0 30% 50%/0 0 10% 20%;
}
.container .body .arm.left:before {
    right: -2px;
    border-right: 1px solid #333333;
}
.container .body .arm.left .hand {
    left: -1px;
    -moz-transform: rotateX(-30deg) skewX(14deg);
    -ms-transform: rotateX(-30deg) skewX(14deg);
    -webkit-transform: rotateX(-30deg) skewX(14deg);
    transform: rotateX(-30deg) skewX(14deg);
    -moz-border-radius: 50% 50% 40% 60%/50% 20% 20% 50%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 40% 60%/50% 20% 20% 50%;
}
.container .body .arm.right {
    right: -10px;
    -moz-border-radius: 0 0 50% 30%/0 0 20% 10%;
    -webkit-border-radius: 0;
    border-radius: 0 0 50% 30%/0 0 20% 10%;
}
.container .body .arm.right:before {
    left: -2px;
    border-left: 1px solid #333333;
}
.container .body .arm.right .hand {
    right: -1px;
    -moz-transform: rotateX(-30deg) skewX(-14deg);
    -ms-transform: rotateX(-30deg) skewX(-14deg);
    -webkit-transform: rotateX(-30deg) skewX(-14deg);
    transform: rotateX(-30deg) skewX(-14deg);
    -moz-border-radius: 50% 50% 60% 40%/20% 50% 50% 20%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 60% 40%/20% 50% 50% 20%;
}
.container .buttons {
    top: 77px;
    left: calc(50% - 6px);
    height: 4px;
    width: 4px;
    background: #333333;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: 12;
}
.container .buttons:before,
.container .buttons:after {
    height: 100%;
    width: 100%;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    background: inherit;
}
.container .buttons:before {
    top: -12px;
}
.container .buttons:after {
    bottom: -12px;
}
.container .legs {
    left: 17%;
    bottom: 12px;
    width: 66%;
    height: 20px;
    background: #5060AB;
}
.container .legs .foot {
    bottom: 0;
    width: calc(50% + 5px);
    height: 5px;
    background: #333333;
    -moz-border-radius: 50% 50% 0 0/95% 95% 0 0;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 0 0/95% 95% 0 0;
}
.container .legs .foot.left {
    left: -5px;
}
.container .legs .foot.right {
    right: -5px;
}
.stan {
    left: calc(13% - (120px / 2));
    height: 120px;
    width: 120px;
    margin-top: 90px;
}
.stan .head {
    top: -60px;
    left: calc(50% - (120px / 2));
    width: 120px;
    height: 120px;
    background-color: #FEDDB2;
    -moz-border-radius: 50% 50% 50% 50%/45% 45% 50% 50%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/45% 45% 50% 50%;
    overflow: hidden;
    z-index: 8;
}
.stan .head:before {
    top: 0;
    border-top: 46px solid #5162AA;
    height: 70px;
    width: 100%;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}
.stan .hat {
    top: -10px;
    left: -2px;
    width: 124px;
    height: 150px;
    -moz-box-shadow: 0 -14px 0 -1px #E33940;
    -webkit-box-shadow: 0 -14px 0 -1px #E33940;
    box-shadow: 0 -14px 0 -1px #E33940;
    -moz-border-radius: 50% 50% 0 0/10% 10% 0 0;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 0 0/10% 10% 0 0;
    z-index: 9;
}
.stan .bobble {
    top: -73px;
    left: calc(50% - 14px);
    height: 28px;
    width: 28px;
    z-index: 9;
}
.stan .bobble span {
    left: calc(50% - 2px);
    height: 100%;
    width: 4px;
    background: #E33940;
}
.stan .bobble span:nth-of-type(1) {
    -moz-transform: rotate(25.71429deg);
    -ms-transform: rotate(25.71429deg);
    -webkit-transform: rotate(25.71429deg);
    transform: rotate(25.71429deg);
}
.stan .bobble span:nth-of-type(2) {
    -moz-transform: rotate(51.42857deg);
    -ms-transform: rotate(51.42857deg);
    -webkit-transform: rotate(51.42857deg);
    transform: rotate(51.42857deg);
}
.stan .bobble span:nth-of-type(3) {
    -moz-transform: rotate(77.14286deg);
    -ms-transform: rotate(77.14286deg);
    -webkit-transform: rotate(77.14286deg);
    transform: rotate(77.14286deg);
}
.stan .bobble span:nth-of-type(4) {
    -moz-transform: rotate(102.85714deg);
    -ms-transform: rotate(102.85714deg);
    -webkit-transform: rotate(102.85714deg);
    transform: rotate(102.85714deg);
}
.stan .bobble span:nth-of-type(5) {
    -moz-transform: rotate(128.57143deg);
    -ms-transform: rotate(128.57143deg);
    -webkit-transform: rotate(128.57143deg);
    transform: rotate(128.57143deg);
}
.stan .bobble span:nth-of-type(6) {
    -moz-transform: rotate(154.28571deg);
    -ms-transform: rotate(154.28571deg);
    -webkit-transform: rotate(154.28571deg);
    transform: rotate(154.28571deg);
}
.stan .bobble span:nth-of-type(7) {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.kyle {
    left: calc(36% - (112px / 2));
    height: 120px;
    width: 112px;
    margin-top: 90px;
}
.kyle .head {
    top: -60px;
    left: calc(50% - (112px / 2));
    width: 112px;
    height: 120px;
    background-color: #FEDDB2;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 8;
}
.kyle .head .eye {
    top: 48px;
}
.kyle .hat {
    top: -60px;
    left: calc(50% - 55px);
    width: 110px;
    height: 45px;
    background: #6AC065;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px;
    border-radius: 12px 12px 0 0;
    z-index: 9;
}
.kyle .hat span {
    top: 20px;
    left: calc(50% - 48px);
    background: #06A064;
    width: 96px;
    height: 34px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 93% 95%, 85% 92%, 79% 89%, 72% 87%, 65% 86%, 35% 86%, 24% 87%, 20% 89%, 14% 92%, 7% 95%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 93% 95%, 85% 92%, 79% 89%, 72% 87%, 65% 86%, 35% 86%, 24% 87%, 20% 89%, 14% 92%, 7% 95%, 0% 100%);
    z-index: 12;
}
.kyle .hat:before,
.kyle .hat:after {
    top: 38px;
    width: 20px;
    height: 54px;
    -moz-border-radius: 50% 50% 50% 50%/45% 45% 45% 45%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/45% 45% 45% 45%;
    background: #6AC065;
    z-index: 10;
}
.kyle .hat:before {
    left: -10px;
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
}
.kyle .hat:after {
    right: -10px;
    -moz-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
}
.kyle .body .scarf {
    background: #288F5D;
}
.kyle .body .inner,
.kyle .body .arm {
    background: #EF731B;
}
.kyle .body .arm .hand {
    background: #65C36A;
}
.kyle .pocket {
    top: 66px;
    width: 16px;
    height: 18px;
    border: 1px solid #333333;
    z-index: 12;
}
.kyle .pocket:before {
    top: -6px;
    left: 1px;
    height: 60%;
    width: 80%;
    border-bottom: 1px solid #333333;
    border-right: 1px solid #333333;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.kyle .pocket.left {
    left: 31px;
}
.kyle .pocket.right {
    right: 31px;
}
.kyle .legs {
    background: #056758;
}
.cartman {
    left: calc(61% - (160px / 2));
    height: 120px;
    width: 160px;
    margin-top: 90px;
}
.cartman .head {
    top: -55px;
    left: calc(50% - (135px / 2));
    width: 135px;
    height: 110px;
    background-color: #FEDDB2;
    -moz-border-radius: 50% 50% 50% 50%/50% 50% 48% 48%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/50% 50% 48% 48%;
    overflow: hidden;
    z-index: 8;
}
.cartman .head:before {
    left: -5%;
    top: 0;
    border-top: 36px solid #59BFD5;
    height: 100px;
    width: 110%;
    -moz-border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
}
.cartman .head .eye {
    top: 39px;
}
.cartman .head .chin {
    left: 2%;
    bottom: 5px;
    height: 90%;
    width: 96%;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    border: 1px solid transparent;
    border-bottom-color: #888888;
}
.cartman .hat {
    top: -16px;
    left: calc(50% - ((135px + 4px) / 2));
    width: 139px;
    height: 150px;
    -moz-box-shadow: 0 -6px 0 -1px #FCDF12;
    -webkit-box-shadow: 0 -6px 0 -1px #FCDF12;
    box-shadow: 0 -6px 0 -1px #FCDF12;
    -moz-border-radius: 60% 40% 0 0/10% 10% 0 0;
    -webkit-border-radius: 60%;
    border-radius: 60% 40% 0 0/10% 10% 0 0;
    z-index: 9;
}
.cartman .bobble {
    top: -62px;
    left: calc(50% - 17px);
    height: 12px;
    width: 34px;
    background: #FCDF12;
    -moz-border-radius: 50% 50% 50% 50%/65% 65% 35% 35%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/65% 65% 35% 35%;
    z-index: 9;
}
.cartman .body-cartman {
    top: 30px;
    left: 3%;
    height: 70px;
    width: 94%;
    background: #E03A41;
    transform: rotateX(10deg);
    -moz-border-radius: 30% 30% 40% 40%/70% 70% 30% 30%;
    -webkit-border-radius: 30%;
    border-radius: 30% 30% 40% 40%/70% 70% 30% 30%;
}
.cartman .body-cartman:before {
    left: 50%;
    height: 100%;
    width: 10px;
    border-left: 1px solid #333333;
}
.cartman .body-cartman .arm {
    top: -8px;
    height: 42px;
    width: 25px;
    background: #E03A41;
}
.cartman .body-cartman .arm .hand {
    bottom: -8px;
    height: 20px;
    width: 30px;
    background: #FDE318;
}
.cartman .body-cartman .arm.left {
    left: 0px;
    -moz-border-radius: 40% 0 0 30%/70% 0 0 30%;
    -webkit-border-radius: 40%;
    border-radius: 40% 0 0 30%/70% 0 0 30%;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.cartman .body-cartman .arm.left .hand {
    left: -1px;
    -moz-border-radius: 50% 50% 40% 60%/50% 30% 50% 50%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 40% 60%/50% 30% 50% 50%;
}
.cartman .body-cartman .arm.right {
    right: 0;
    -moz-border-radius: 0 40% 30% 0/0 70% 30% 0;
    -webkit-border-radius: 0;
    border-radius: 0 40% 30% 0/0 70% 30% 0;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.cartman .body-cartman .arm.right .hand {
    right: -1px;
    -moz-border-radius: 50% 50% 60% 40%/30% 50% 50% 50%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 60% 40%/30% 50% 50% 50%;
}
.cartman .legs {
    left: 5%;
    width: 90%;
    height: 30px;
    background: #7F3521;
    -moz-border-radius: 0 0 8% 8%/0 0 99% 99%;
    -webkit-border-radius: 0;
    border-radius: 0 0 8% 8%/0 0 99% 99%;
}
.cartman .legs .foot {
    width: 52%;
    height: 4px;
}
.cartman .legs .foot.left {
    left: 2%;
}
.cartman .legs .foot.right {
    right: 2%;
}
.kenny {
    left: calc(87% - (120px / 2));
    height: 120px;
    width: 120px;
    margin-top: 90px;
}
.kenny .hoodie {
    top: -60px;
    left: calc(50% - ((120px + 4px) / 2));
    height: 122px;
    width: 124px;
    background: #F7731E;
    -moz-border-radius: 50% 50% 50% 50%/48% 48% 50% 50%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/48% 48% 50% 50%;
    z-index: 8;
    -moz-box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.5);
}
.kenny .hoodie:before,
.kenny .hoodie:after {
    top: 90px;
    height: 25px;
    width: 1px;
    border: 1px solid transparent;
    border-left: 1px solid #333333;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    left: 50%;
}
.kenny .hoodie:before {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.kenny .hoodie:after {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.kenny .head {
    top: -60px;
    left: calc(50% - (120px / 2));
    width: 120px;
    height: 120px;
    background-color: #FEDDB2;
    -moz-border-radius: 50% 50% 50% 50%/48% 48% 50% 50%;
    -webkit-border-radius: 50%;
    border-radius: 50% 50% 50% 50%/48% 48% 50% 50%;
    -webkit-clip-path: circle(28% at 50% 50%);
    clip-path: circle(28% at 50% 50%);
    z-index: 8;
}
.kenny .head .eye {
    top: 39px;
}
.kenny .hoodie-edge {
    top: -31px;
    left: 20px;
    height: 72px;
    width: 80px;
    border: 1px solid #333333;
    border-top-color: transparent;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: 9;
}
.kenny .hoodie-edge:before,
.kenny .hoodie-edge:after {
    top: -5px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-left: 14px solid #7E3821;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.kenny .hoodie-edge:before {
    left: 1px;
}
.kenny .hoodie-edge:after {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    right: 1px;
}
.kenny .body .inner,
.kenny .body .arm {
    background: #F37521;
}
.kenny .body .inner {
    -moz-box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.5);
}
.kenny .body .arm .hand {
    background: #78341E;
}
.kenny .legs {
    background: #F07321;
}

HTML

CSS3 Cartoon icons

css3, human

编辑器支持Emmet

快捷键

CSS3 Cartoon icons

css3, human

HTML5 CSS3一组文本对齐方式按钮（带切换动画）

HTML5 AngularJS以图腾命盘为主设计的创意网站

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：